div与css的小例子

<p>这是一个关于div与css应用的前台例子，并不是很好。</p>

<p>html：</p>

<prename="code"class="html">&lt;!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;htmlxmlns="http://www.w3.org/1999/xhtml"&gt;

&lt;head&gt;

&lt;metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/&gt;

&lt;linkhref="css/style.css"type="text/css"rel="stylesheet"/&gt;

&lt;title&gt;无标题文档&lt;/title&gt;

&lt;scripttype="text/javascript"&gt;

vardiv=document.getElementById("main_container");

varmdiv=document.getElementById("container_bg1_main");

varmdiv2=document.getElementById("container_bg2_main");

varh=div.scrollHeight;

h-=45;

mdiv.style.height=h+"px";

mdiv2.style.height=h+"px";

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;divid="main_container"&gt;

&lt;divid="container_bg1"&gt;

&lt;divid="container_bg1_top"&gt;&lt;/div&gt;

&lt;divid="container_bg1_main"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;divid="main_content"&gt;

&lt;divid="login_container"&gt;

&lt;formaction="#"method="post"name="fo"&gt;

&lt;ul&gt;

&lt;li&gt;

用户名：

&lt;/li&gt;

&lt;li&gt;

&lt;inputtype="text"class="txt"/&gt;

&lt;/li&gt;

&lt;li&gt;

密码：

&lt;/li&gt;

&lt;li&gt;

&lt;inputtype="text"class="txt"/&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;inputtype="radio"/&gt;记住我

&lt;/li&gt;

&lt;li&gt;

&lt;label&gt;验证码：&lt;/label&gt;

&lt;labelstyle="background-color:#FC3"&gt;2233&lt;/label&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;inputtype="submit"class="btn"value="登录"/&gt;

&lt;/li&gt;

&lt;li&gt;

&lt;inputtype="button"class="btn"value="注册"/&gt;

&lt;/li&gt;

&lt;/ul&gt;

&lt;/form&gt;

&lt;/div&gt;

&lt;divid="vi_container"&gt;

&lt;divid="vi_main"&gt;&lt;/div&gt;

&lt;divid="vi_banner"&gt;&lt;imgsrc="images/ban.jpg"/&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;divid="nav_container"&gt;

&lt;divid="nav_content"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;首页&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;咨询&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;知识&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;软件&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;硬件&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;外包&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;方案&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;工厂&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;供应&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;管理&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;书籍&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;人才&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;下载&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;社区&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divclass="advertise"&gt;

&lt;imgsrc="images/ad1.jpg"/&gt;

&lt;/div&gt;

&lt;divclass="line_content"&gt;

&lt;divclass="line_hot"&gt;&lt;imgsrc="images/01.jpg"/&gt;&lt;/div&gt;

&lt;divclass="news_container"&gt;

&lt;divclass="news_title"&gt;&gt;&gt;资讯&lt;/div&gt;

&lt;divclass="news_content"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;会见连战第三次“习连会”&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divclass="news_container"&gt;

&lt;divclass="news_title"&gt;&gt;&gt;软件&lt;/div&gt;

&lt;divclass="news_content"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;会见连战第三次“习连会”&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divclass="advertise"&gt;

&lt;imgsrc="images/ad2.jpg"/&gt;

&lt;/div&gt;

&lt;divclass="line_content"&gt;

&lt;divclass="news_container"style="width:inherit"&gt;

&lt;divclass="news_title"&gt;&gt;&gt;人才&lt;/div&gt;

&lt;divclass="news_content"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;会见连战第三次“习连会”&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;抗战阅兵首次组建两栖装甲突击&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国将建立600亿元基金促进&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divclass="news_container"&gt;

&lt;divclass="news_title"&gt;&gt;&gt;供求&lt;/div&gt;

&lt;divclass="news_content"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;会见连战第三次“习连会”&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divclass="news_container"&gt;

&lt;divclass="news_title"&gt;&gt;&gt;方案&lt;/div&gt;

&lt;divclass="news_content"&gt;

&lt;ul&gt;

&lt;li&gt;&lt;ahref="#"&gt;会见连战第三次“习连会”&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;联合国再驳日质&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;市场不明股价下滑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;张高丽29次批示天津爆炸事&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;公积金购二套房首付最低两成&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;党报回应阅兵三大质疑&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国性别比失衡治理13年&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;抗战阅兵首次组建两栖装甲突击车方队&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;迅雷创始人首次开口&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;中国将建立600亿元基金促进中小企业发展&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;济南的姐被劫匪捅10刀后反绑沉河&lt;/a&gt;&lt;/li&gt;

&lt;li&gt;&lt;ahref="#"&gt;奥巴马跟贝爷去阿拉斯加挑战3天&lt;/a&gt;&lt;/li&gt;

&lt;/ul&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divid="foot_container"&gt;

&lt;divid="foot_vi"&gt;&lt;/div&gt;

&lt;divid="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;divid="foot_copyright"&gt;本站的

由网络第三方视频类网站收集，本站不存在任何视频文件及视频镜像。如视频原作者不愿意在本网站刊登或违规&lt;br&gt;请及时联系：[email protected]，予以删除。

&lt;br&gt;

&amp;copy;2011-2014

红旅动漫网

.AllRightsReserved苏ICP备11029620号-2

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;/div&gt;

&lt;divid="container_bg2"&gt;

&lt;divid="container_bg2_top"&gt;&lt;/div&gt;

&lt;divid="container_bg2_main"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;divid="container_clear"&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;

&lt;/html&gt;</pre>

<p>css：</p>

<prename="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:solid1px#e7e7e7;

height:45px;

background:url(../images/ct1.jpg)repeat-xtopcenter;

}

#login_containerul{

width:500px;

margin:0auto;

}

#login_containerulli{float:left;list-style-type:none;padding-top:15px;padding-left:2px;}

#login_container.btn{width:58px;height:22px;background-color:#f4f4f4;border:solid1px#bebebe;border-left:solid3px#f90;}

#login_container.txt{width:80px;height:22px;border-style:none;border-bottom:solid1pxsilver;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-repeatleftcenter;}

#nav_content{width:791px;height:26px;line-height:26px;overflow:hidden;background:url(../images/mn2.jpg)repeat-xleftcenter;float:right;}

#nav_contentulli{list-style-type:none;float:left;width:50px;height:20px;text-align:center;}

#nav_contentullia{display:block;text-decoration:none;width:50px;color:#000000;}

#nav_contentullia: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:solid1px#aeb8c2;

}

.line_hotimg{

width:220px;

height:252px;

margin-top:5px;

margin-left:3px;

}

.news_container{

border:solid1px#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_contentul{

padding-left:5px;

}

.news_contentulli{

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-xtopleft;

}

#foot_nav{

height:20px;

background-color:#e7e7e7;

line-height:20px;

padding-left:200px;

overflow:hidden;

}

#foot_navulli{

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-repeattopcenter;

height:45px;

width:62px;}

#container_bg1_main{

background:url(../images/ml1.jpg)repeat-ytopcenter;

}

/*右侧边*/

#container_bg2{

width:62px;

float:left;}

#container_bg2_top{

background:url(../images/mt2.jpg)no-repeattopcenter;

height:45px;

width:62px;}

#container_bg2_main{

background:url(../images/ml2.jpg)repeat-ytopcenter;

}

/*总体下*/

#container_clear{

clear:both;

}

</pre>

<p></p>

</div>