DIV+CSS样式

<div class="iteye-blog-content-contain" style="font-size: 14px"></div>
2015.9.7
本次课程根据上次反应，对CSS样式进行二次讲解
1.框架的搭建
建立目标模板， 简单分为 container//总容器 nav_container//导航栏 banner//广告栏
Main_container//内容容器 footer//底部栏
2.新建CSS文件
ID选择器 设置背景颜色方便辨认框体
#container{ width=100%; background-color:#C03;}
#nav_container{ width:800px; height:50px; background-color:#09F; margin:0 auto; } //设置导航栏的长宽及背景色 margin属性 设为 0 auto 为居中显示
#banner{width:800px;height:100px; background-color:#F90; margin: 0 auto;} //设置广告栏的属性
#Main_container {width:800px; background-color:#FC0; margin:0 auto;}//设置内容容器的属性 其中的height属性为空 （清除浮动） 类似于贴吧回帖模式时 根据帖子内容 框体变高
#footer{width:800px;height:50px; background-color:#FF0; margin:0 auto;}/设置底部内容
3.将CSS文件与HTML文件 链接
<link href="css/style.css" rel="stylesheet" type="text/css" /> //重要的参数 rel
4.对HTML页面进行调整划分
<div id="container">
<div id="nav_container">
<div id="nav_left"></div>
<div id="nav_right">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">介绍</a></li>
</ul>
</div>
</div>
<div id="banner"></div>
<div id="Main_container">
<div id="Main_left">
<div id="Main_left_top"></div>
<div id="Main_left_bottom"></div>
</div>
<div id="Main_right"></div>
<div style="clear:both;">
</div>
<div id="footer">
</div>
</div>
5.写入CSS样式
#container{ width=100%; background-color:#C03;}

#nav_container{ width:800px; height:50px; background-color:#09F; margin:0 auto; }

#nav_left{ width:150px; height:50px; background-color:#FC0; float:left;}

#nav_right{ width:650px;height:50px; background-color:#99C; float:right;}
#nav_right ul{margin:0; padding:0px;}
#nav_right ul li{ float:left; list-style-type:none; text-align:center;}
#nav_right ul li a{ display:block; height:50px; width:50px; text-decoration:none;} /* display使用内联元素变成块状元素 text-decorationw为·

#nav_right ul li a:hover{ background-color:#999;} //hover是将导航栏设置为滑动显示
#banner{width:800px;height:100px; background-color:#F90; margin: 0 auto;}
#Main_container {width:800px; background-color:#FC0; margin:0 auto;}
#Main_left{ width:400px; height:400px; background-color:#66C; float:left;} /* float left right*/
#Main_left_top{400px; height:200px; background-color:#63F;}
#Main_left_bottom{ width:400px;height:200px; background-color:#30F;}

#Main_right{width:400px; height:400px; background-color:#96C; float:right;} /* 浮动之后清除浮动 */ //float 浮动 使用完毕后进行清除，也可以在所有的使用结束后一并清除

#footer{width:800px;height:50px; background-color:#FF0; margin:0 auto;}
5.至此 网站的基本框架搭建完成