|
熟悉工作流程 在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用DIV来实现排版的嵌套，DIV是块级元素，而像P也是块级元素，例如要分出几个文字内容块，不是一定要用DIV才叫DIV排版，不是“＜div＞文字块一＜/div＞＜div＞文字块二＜/div＞＜div＞文字块三＜/div＞”，而用“＜p＞文字块一＜/p＞＜p＞文字块二＜/p＞＜p＞文字块三＜/p＞”更合适。 用DIV+CSS设计思路是这样的: 1.用div来定义语义结构；2.然后用CSS来美化网页，如加入背景、线条边框、对齐属性等；3.最后在这个CSS定义的盒子内加上内容，如文字、图片等（没有表现属性的标签），下面大家跟我一起来做一个实例加深对这个步骤的理解。先看结果图：  CSS排版结果图 1.用div来定义语义结构 现在我要给大家演示的是一个典型的版面分栏结构，即页头、导航栏、内容、版权（如下图），  典型版面分栏结构 其结构代码如下： ＜div id="header"＞＜/div＞ ＜div id="nav"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="footer"＞＜/div＞ 上面我们定义了四个盒子，按照我们想要的结果是，我们要让这些盒子等宽，并从下到下整齐排列，然后在整个页面中居中对齐，为了方便控制，我们再把这四个盒子装进一个更大的盒子，这样代码就变成: ＜div id=”mainBox”＞ ＜div id="header"＞＜/div＞ ＜div id="nav"＞＜/div＞ ＜div id="content"＞＜/div＞ ＜div id="footer"＞＜/div＞ ＜/div＞ 最外边的大盒子（装着小盒子的大盒子）我们要让它在页面居中，同时加上边框，那么它的样式是： #mainBox { margin: 0px auto; height: auto; width: 760px; border: 1px solid #006633; } 页头为了简单起见，我们这里只要让它整个区块应用一幅背景图就行了,并在其下边界设计定一定间隙，目的是让页头的图像不要和下面要做的导航栏连在一起，这样也是为了美观。其样式代码为： #header { height: 100px; width: 760px; background-image: url(headPic.gif); background-repeat: no-repeat; margin:0px 0px 3px 0px; } 导航栏我做成像一个个小按钮，鼠标移上去会改变按钮背景色和字体色，那么这些小小的按钮我们又可以理解为小盒子，如此一来这是一个盒子嵌套问题了，样式代码如下： #nav { height: 25px; width: 760px; font-size: 14px; list-style-type: none; } #nav li { float:left; } #nav li a{ color:#000000; text-decoration:none; padding-top:4px; display:block; width:97px; height:22px; text-align:center; background-color: #009966; margin-left:2px; } #nav li a:hover{ background-color:#006633; color:#FFFFFF; } |
