css+div网页设计精品课件
第一步：规划网站，本教程将以图示为例构建网站；
第二步：创建html模板及文件目录等；
第三步：将网站分为五个div，网页基本布局的基础；
第四步：网页布局与div浮动等；
第五步：网页主要框架之外的附加结构的布局与表现；
第六步：页面内的基本文本的样式(css)设置；
第七步：网站头部图标与logo部分的设计；
第八步：页脚信息(版权等)的表现设置；
第九步：导航条的制作(较难)；
第十步：解决IE浏览器的显示BUG；
规划网主要由五个部分构成
1.Main Navigation 导航条，具有按钮特效。
Width: 760px Height: 50px
2.Header 网站头部图标，包含网站的logo和站名。
Width: 760px Height: 150px
3.Content 网站的主要内容。
Width: 480px Height: Changes depending on content
4.Sidebar 边框，一些附加信息。
Width: 280px Height: Changes depending on content
5.Footer 网站底栏，包含版权信息等。
Width: 760px Height: 66px。
在html文件的<body>和</body>之间写入
<div id="page-container">Hello world.</div>
创建css文件，命名为master.css,保存在/css/文件夹下。写入：
#page-container {width: 760px;background: red;}
第六步：页面内的基本文本的样式(css)设置
你是不是厌倦了那些大红大绿的背景，现在是去掉它们的时候了，只保留导航条的红色背景。很好，再过几步，你就能很好了解css控制整个网页版面(Layout)的能力。 先设置全局的文本样式：
body {font-family: Arial, Helvetica, Verdana, Sans-serif;font-size: 12px;color: #666666;background: #ffffff;}
一般我们把body标签放在css文件的顶端，当然你要是执意要把它放在尾部，浏览器不会和你计较。font-family内的顺序决定字体显示优先级， 比方如果所在计算机没有Arial字体，浏览器就会指向Helvetica字体，依次类推；color指字体颜色；background指背景颜色。
下载更新
