新手学div+css的基础步骤

本文主要介绍本人学习div+css网页布局的一种思路

软件工具

  • 01

    网页三剑客

步骤/方法

  • 01

    从局部出发:从一个小的部分的样式写起,目的是让你熟悉css样式的元素有哪些,那些元素都有一些什么作用,怎么样使用这些元素,以及div+css的属性有哪些?等等这一步是基础! 比如,我有一个层,里面包括标题列表还有背景图片,层的宽度高度这些属性,还要设置标题列表的字体样式颜色等等,能用的属性都用上,从一个小的层,实现各种能表现出来的形式; 其实div+css布局中的每个div就像是一个盒子,如图所示:

  • 02

    整体布局很重要:有了第一步基础,你可以尝试布局框架,把网页分成一块一块,先把框框写好,各浏览器中测试不要错位了,可以先用不同的背景颜色看效果,不错位就行,框架ok了之后,这样你的而已应该就没问题了,你可以尝试更多方式写布局,两栏式,三栏式等都可以.

  • 03

    把整体跟局部结合,也就是把你第一步中的基础东西写好,往框架的层里面填充就好了!所以第一步很关键!

(0)

相关推荐

  • 新手学五笔打字的步骤

    在日常生活中,有些人会因为各种各样的原因而练习五笔打字法,不仅可以有效的提升打字的速度,还能够为工作提供便利.今天来给大家说说新手学五笔打字的步骤有哪些?以帮助进行参考. 基本常识 01 首先需要熟明 ...

  • 如何用DIV+CSS进行网页样式布局

    在html网页编辑中,对于新手来讲,接触最多的就是div+css:那么如何使用div+css就行网页简单布局呢 操作方法 01 一个网页设计时,我们可以将一个页面设置为头部,中间,和底部三部分:  头 ...

  • 学计算机需要什么样基础

    有很多人不了解学计算机需要什么样基础,那么今天小编就在这里给大家分享一点我的小,希望可以给你们带来帮助. 操作方法 01 首先家里要准备一台笔记本电脑或台式电脑因为这样有便于我们操作,第一个步骤先把电 ...

  • div+css网页设计基础教程

    div+css是一个网页设计师,程序员必经之路,是网站建设的基础!div+css是网页设计的最重要的元素. 操作方法 01 一.准备工作,电脑一套,Dreamweaver(网页设计软件) Dreamw ...

  • div+css经典布局教程

    在网页制作中,有许多的术语,例如:CSS.HTML.DHTML.XHTML等等.在下面的文章中我们将会用到一些有关于HTML的基本知识,而在你学习这篇入门教程之前,请确定你已经具有了一定的HTML基础 ...

  • 使用div+css编写的简洁漂亮的顶部导航代码

    使用div+css编写的简洁漂亮的顶部导航代码 步骤/方法 01 首先建立一个css样式表文件,命名为:common.css,在其中添加以下CSS代码. #info{border:1px solid ...

  • 分享新手学写软文主要面临的五大问题

    笔者写软文投稿不是很长时间,所以没有太多的投稿经验,但是对于投稿的新手亦或是准备写软文投稿的朋友,也许还能分享一点经验和心得.要想成为一个合格的SEOer,写软文是必备的技能.不过和多数新手一样,写软 ...

  • Dreamweaver 怎么网页布局 div css布局

    div+css布局已经成为当前网页布局的潮流,通过盒子模型和浮动.定位来控制页面布局比以前的表格布局容易控制多了.如何用Dreamweaver实现div+css网页布局呢.小编为你分享我的. 操作方法 ...

  • DIV + CSS 到底是什么意思?

    在很久很久以前,web工程师通过table进行页面布局(现在Google的picasa等应用还能找到table布局应用的例子),现在页面布局大都推荐div+css方式.         所谓的div+ ...