div与css的小事例

div与css的小例子
<div class="iteye-blog-content-contain" style="font-size: 14px;">
<p>这是一个关于div与css应用的前台例子，并不是很好。</p>
<p>html：</p>
<pre name="code" class="html">&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;link href="css/style.css" type="text/css"  rel="stylesheet" /&gt;
&lt;title&gt;无标题文档&lt;/title&gt;
&lt;script type="text/javascript"&gt;
var div=document.getElementById("main_container");
var mdiv=document.getElementById("container_bg1_main");
var mdiv2=document.getElementById("container_bg2_main");

var h=div.scrollHeight;
h-=45;
mdiv.style.height=h+"px";
mdiv2.style.height=h+"px";
&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="main_container"&gt;
&lt;div id="container_bg1"&gt;
&lt;div id="container_bg1_top"&gt;&lt;/div&gt;
&lt;div id="container_bg1_main"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;div id="main_content"&gt;
                   &lt;div id="login_container"&gt;
                   &lt;form action="#" method="post" name="fo"&gt;
                   &lt;ul&gt;
                   &lt;li&gt;
                        用户名：
                        &lt;/li&gt;
                        &lt;li&gt;
                        &lt;input type="text" class="txt"/&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                        密码：
                        &lt;/li&gt;
                        &lt;li&gt;
                        &lt;input type="text" class="txt"/&gt;
                        &lt;/li&gt;
                        &lt;li&gt;
                         &lt;input type="radio" /&gt;记住我
                        &lt;/li&gt;
                        &lt;li&gt;
                         &lt;label&gt;验证码：&lt;/label&gt;
                        &lt;label style="background-color:#FC3"&gt;2233&lt;/label&gt;
                      
                        &lt;/li&gt;
                        &lt;li&gt;
                        &lt;input type="submit" class="btn" value="登录"/&gt;
                        &lt;/li&gt;
                         &lt;li&gt;
                        &lt;input type="button" class="btn" value="注册"/&gt;
                        &lt;/li&gt;
                   &lt;/ul&gt;
                   &lt;/form&gt;
   &lt;/div&gt;

   &lt;div id="vi_container"&gt;
                   &lt;div id="vi_main"&gt;&lt;/div&gt;
                    &lt;div id="vi_banner"&gt;&lt;img src="images/ban.jpg"/&gt;&lt;/div&gt;
   &lt;/div&gt;

   &lt;div id="nav_container"&gt;
                   &lt;div id="nav_content"&gt;
                   &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;咨询&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;知识&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;软件&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;硬件&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;外包&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;方案&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;工厂&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;供应&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;管理&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;书籍&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;人才&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;下载&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;社区&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt;
                   &lt;/div&gt;
               &lt;/div&gt;

   &lt;div class="advertise"&gt;
                   &lt;img src="images/ad1.jpg"/&gt;
   &lt;/div&gt;
                  
   &lt;div class="line_content"&gt;
                   &lt;div class="line_hot"&gt;&lt;img src="images/01.jpg"/&gt;&lt;/div&gt;
                        &lt;div class="news_container"&gt;
                        &lt;div class="news_title"&gt;&gt;&gt;资讯&lt;/div&gt;
                            &lt;div class="news_content"&gt;
                            &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;会见连战 第三次“习连会”&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt; 
                            &lt;/div&gt;
                        &lt;/div&gt;
                       
                        &lt;div class="news_container"&gt;
                        &lt;div class="news_title"&gt;&gt;&gt;软件&lt;/div&gt;
                            &lt;div class="news_content"&gt;
                            &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;会见连战 第三次“习连会”&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt; 
                            &lt;/div&gt;
                        &lt;/div&gt;
                       
   &lt;/div&gt;

   &lt;div class="advertise"&gt;
                   &lt;img src="images/ad2.jpg"/&gt;
   &lt;/div&gt;

   &lt;div class="line_content"&gt;
                  
                    &lt;div class="news_container" style="width:inherit"&gt;
                        &lt;div class="news_title"&gt;&gt;&gt;人才&lt;/div&gt;
                            &lt;div class="news_content"&gt;
                            &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;会见连战 第三次“习连会”&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;抗战阅兵首次组建两栖装甲突击&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国将建立600亿元基金促进&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt; 
                            &lt;/div&gt;
                        &lt;/div&gt;
                       
                         &lt;div class="news_container"&gt;
                        &lt;div class="news_title"&gt;&gt;&gt;供求&lt;/div&gt;
                            &lt;div class="news_content"&gt;
                            &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;会见连战 第三次“习连会”&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt; 
                            &lt;/div&gt;
                        &lt;/div&gt;
                       
                         &lt;div class="news_container"&gt;
                        &lt;div class="news_title"&gt; &gt;&gt;方案&lt;/div&gt;
                            &lt;div class="news_content"&gt;
                            &lt;ul&gt;
                        &lt;li&gt;&lt;a href="#"&gt;会见连战 第三次“习连会”&lt;/a&gt;&lt;/li&gt;
                           &lt;li&gt;&lt;a href="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;
                            &lt;li&gt;&lt;a href="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;
                        &lt;/ul&gt; 
                            &lt;/div&gt;
                        &lt;/div&gt;
                       
   &lt;/div&gt;

   &lt;div id="foot_container"&gt;
                   &lt;div id="foot_vi"&gt; &lt;/div&gt;
                        &lt;div id="foot_nav"&gt;
                        &lt;ul&gt;
                            &lt;li&gt;网站介绍&lt;/li&gt;
                                &lt;li&gt;网站地图&lt;/li&gt;
                                &lt;li&gt;联系我们&lt;/li&gt;
                                &lt;li&gt;版权说明&lt;/li&gt;
                                &lt;li&gt;工作机会&lt;/li&gt;
                                &lt;li&gt;友情链接&lt;/li&gt;
                                &lt;li&gt;意见反馈&lt;/li&gt;
                            &lt;/ul&gt;
                        &lt;/div&gt;
                        &lt;div id="foot_copyright"&gt;本站的
    由网络第三方视频类网站收集，本站不存在任何视频文件及视频镜像。如视频原作者不愿意在本网站刊登或违规&lt;br&gt;请及时联系：hltm@foxmail.com，予以删除。
    &lt;br&gt;
    &amp;copy; 2011-2014
    红旅动漫网
    . All Rights Reserved 苏ICP备11029620号-2
&lt;/div&gt;
   &lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;div id="container_bg2"&gt;
&lt;div id="container_bg2_top"&gt;&lt;/div&gt;
&lt;div id="container_bg2_main"&gt;&lt;/div&gt;
&lt;/div&gt;
           
            &lt;div id="container_clear"&gt;&lt;/div&gt;
     &lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;</pre>
<p> css：</p>
<pre name="code" class="html">/*页面整体样式*/
    *{ margin:0px;
   padding:0px;
   font-size:12px;}
    /*整体容器*/
#main_container{ width:1000px;
                margin:auto;}
    #container_clear{ clear:both;}

/*中间内容区*/
#main_content{
       width:876px;
  float:left;}
/****登录*****/
#login_container{
border-bottom:solid 1px #e7e7e7;
  height:45px;
  background:url(../images/ct1.jpg) repeat-x top center;
}
#login_container ul{
width:500px;
margin:0 auto;
}
     #login_container ul li{ float:left; list-style-type:none; padding-top:15px; padding-left:2px;}

#login_container .btn{ width:58px; height:22px; background-color:#f4f4f4; border:solid 1px #bebebe; border-left:solid 3px #f90;}
#login_container .txt{ width:80px; height:22px; border-style:none;border-bottom:solid 1px silver; background-color:transparent;}
 
/****VI*****/
#vi_container{
      height:90px;
  }
#vi_main{ float:left; background-image:url(../images/vi.jpg);width:220px; height:90px;}
#vi_banner{ float:left; width:656px; height:90px; text-align:center; overflow:hidden;}
/****导航nav*****/
#nav_container{
      width:876px;
      height:26px; background:url(../images/mn1.jpg) no-repeat left center;}
#nav_content{ width:791px; height:26px; line-height:26px; overflow:hidden; background:url(../images/mn2.jpg) repeat-x left center; float:right;}
#nav_content ul li{ list-style-type:none; float:left; width:50px; height:20px; text-align:center;}
#nav_content ul li a{ display:block; text-decoration:none; width:50px; color:#000000;}
  #nav_content ul li a:hover{ background-image:url(../images/mn4.jpg);}

/****广告条 advertise ****/
.advertise{
/*height:100px;*/
background-color:#ffffff;
padding:6px;
padding-bottom:0px;
}


/****内容 content****/
.line_content{
background-color:#fff;
padding-left:5px;
padding-top:5px;
height:260px;
}
.line_hot{
width:226px;
height:260px;
float:left;
border:solid 1px #aeb8c2;
}
.line_hot img{
width:220px;
height:252px;
margin-top:5px;
margin-left:3px;
}


.news_container{
border:solid 1px #aeb8c2;
width:312px;
height:260px;
float:left;
margin-left:5px;
}
.news_title{
background-image:url(../Images/titlebg1.jpg);
height:23px;
line-height:23px;
overflow:hidden;
padding-left:10px;
font-weight:bold;
}
.news_content{
padding:5px;
padding-left:20px;
}
.news_content ul{
padding-left:5px;
}
.news_content ul li{
list-style-image:url(../Images/start.gif);
line-height:18px;
}
/**** foot *******/
#foot_container{
width:876px;
text-align:center;
clear:both;
}
#foot_vi{
width:876px;
height:27px;
background:url(../Images/footvi.jpg) repeat-x top left;
}
#foot_nav{
height:20px;
background-color:#e7e7e7;
line-height:20px;
padding-left:200px;
overflow:hidden;
}
#foot_nav ul li{
width:60px;
float:left;
list-style-type:none;
}
#foot_copyright{
height:80px;
background-color:#f7f7f7;
line-height:20px;
}

/*左侧边*/
#container_bg1{
       width:62px;
           float:left;}
#container_bg1_top{                  
                    background:url(../images/mt1.jpg) no-repeat top center;
  height:45px;
  width:62px;}
#container_bg1_main{
          background: url(../images/ml1.jpg) repeat-y top center;
  }
/*右侧边*/

#container_bg2{
        width:62px;
float:left;}
#container_bg2_top{
              background: url(../images/mt2.jpg) no-repeat top center;
  height:45px;
  width:62px;}
#container_bg2_main{
          background: url(../images/ml2.jpg) repeat-y top center;
  }


/*总体下*/
#container_clear{
clear:both;
}
</pre>
<p> </p>
</div>