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.至此 网站的基本框架搭建完成