<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>首页实战</title>
<meta http-equiv="Conrent-type" content="text/html;charset=utf-8">
<meta name="description" content="实战首页布局">
<link rel="stylesheet" href="csh.css"/>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div id="container">
<div id="logo">
<img src="logo.gif" alt="" id="logo"/>
</div>
<div id="header">
<ul id="nav">
<li><a href="http:www.70love.com">首页</a></li>
<li><a href="#">腋臭专题</a></li>
<li><a href="#">高发人群</a></li>
<li><a href="#">权威推荐</a></li>
<li><a href="#">权威推荐</a></li>
<li><a href="#">家庭医生</a></li>
<li><a href="#">腋臭论坛</a></li>
</ul>
</div>
<img src="bj.jpg" alt="" id="banner"/>
<div id="main">
<div id="lside">
<div class="subtitle">
<img src="5-120601154104-50.gif" alt=""/>
<h1>文章分类</h1>
<a href="#">more>></a>
</div>
<div class="four">
<h2>狐臭常识管理</h2>
<img src="lside.jpg" alt=""/>
<ul>
<li><a href="#">腋臭治疗最佳选择1</a></li>
<li><a href="#">腋臭治疗最佳选择2</a></li>
<li><a href="#">腋臭治疗最佳选择3</a></li>
<li><a href="#">腋臭治疗最佳选择4</a></li>
<li><a href="#">腋臭治疗最佳选择5</a></li>
</ul>
</div>
<div class="four">
<h2>狐臭常识管理</h2>
<img src="lside.jpg" alt=""/>
<ul>
<li><a href="#">腋臭治疗最佳选择1</a></li>
<li><a href="#">腋臭治疗最佳选择2</a></li>
<li><a href="#">腋臭治疗最佳选择3</a></li>
<li><a href="#">腋臭治疗最佳选择4</a></li>
<li><a href="#">腋臭治疗最佳选择5</a></li>
</ul>
</div><div class="four">
<h2>狐臭常识管理</h2>
<img src="lside.jpg" alt=""/>
<ul>
<li><a href="#">腋臭治疗最佳选择1</a></li>
<li><a href="#">腋臭治疗最佳选择2</a></li>
<li><a href="#">腋臭治疗最佳选择3</a></li>
<li><a href="#">腋臭治疗最佳选择4</a></li>
<li><a href="#">腋臭治疗最佳选择5</a></li>
</ul>
</div><div class="four">
<h2>狐臭常识管理</h2>
<img src="lside.jpg" alt=""/>
<ul>
<li><a href="#">腋臭治疗最佳选择1</a></li>
<li><a href="#">腋臭治疗最佳选择2</a></li>
<li><a href="#">腋臭治疗最佳选择3</a></li>
<li><a href="#">腋臭治疗最佳选择4</a></li>
<li><a href="#">腋臭治疗最佳选择5</a></li>
</ul>
</div>
</div>
<div id="rside">
<div class="subtitle">
<img src="5-120601154104-50.gif" alt=""/>
<h1>核心业务</h1>
<a href="#">more>></a>
</div>
<ul id="art">
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
<li><a href="#">文章3</a></li>
<li><a href="#">文章4</a></li>
<li><a href="#">文章5</a></li>
</ul>
<div class="subtitle">
<img src="5-120601154104-50.gif" alt=""/>
<h1>相关信息</h1>
<a href="#">more>></a>
</div>
<div id="contact">
</div>
</div>
<div class="clr"></div>
</div>
<div id="footer">
<ul>
<li><a href="#">联系我们1</a></li>
<li><a href="#">联系我们2</a></li>
<li><a href="#">联系我们3</a></li>
<li><a href="#">联系我们4</a></li>
<li><a href="#">联系我们5</a></li>
</ul>
<address>© 2006-2009 山东省青岛市荣世家 版权所有 http://www.bbs-1.com 备案信息</address>
</div>
<div></div>
</div>
</body>
</html>
.clr{
clear:both;
width:0px;
height:0px;
}
#container{
width:960px;
margin:0px auto;
}
/*总长度960 盒子居中显示*/
#logo{
width:241px;
height:68px;
}
#header{
height:33px;
background:gray url(nv.png)
}
/*导航条高度33 插入背景图片*/
#nav li{
width:90px;
margin-right:1px;
float:left;
}
/*每个分类导航宽度是90 右外边距是1 因为是<li>标签本身竖向显示，加入漂浮 float:left;*/
#nav a{
font-size:15px;
line-height:33px;
font-family:'微软雅黑';
color:#000000;
display:block;
width:90px;
height:33px;
text-align:center;
color:white;
}
/*导航字体大小15px，字体：微软雅黑，颜色：黑色，如果需要字体设置宽高加上背景的话就需要本身内联元素转换为块状元素display:block; 这是高和宽， 字体居中显示text-align:center; */
#nav a:hover{
color:white;
background:url(i_navbg2.jpg);
}
/*鼠标放上的时候显示字体的颜色跟背景*/
#banner{
margin:6px 0;
}
#main{
margin:2px 0 0 0;
}
#lside{
height:469px;
width:694px;
border:1px solid #EEE; /*这个border声明了上右下左*/
float:left;
border-top:none; /*上边框去掉 border-top：none；*/
}
.four img{
float:left;
margin:0 0 0 10px;
padding:6px;
background:white;
}
.four ul{
margin-left:10px;
float:left;
}
.four li{
background:url(dot.gif) no-repeat;
padding-left:15px;
height:20px;
}
.four a{
}
.four h2{
margin:6px 0 6px 10px;
font-size:16px;
font-family:'microsoft yahei',simhei,sans-serif;
}
#rside{
height:469px;
width:260px;
float:right;
}
.subtitle{
line-height:37px;
height:37px;
background:gray url(tb.png);
}
.subtitle img{
float:left;
margin:10px 0 0 10px;
}
.subtitle h1{
float:left;
margin-left:10px;
font-size:16px;
font-family:'microsoft yahei',simhei,sans-serif;
}
.subtitle a{
float:right;
font-size:14px;
color:gray;
}
#art{
background:#EEE;
margin-top:1px;
padding-top:10px;
}
#art a{
display:block;
padding-left:15px;
height:29px;
background:url(dot.gif) no-repeat;
margin-left:10px;
}
#art a:hover{
background:red;
}
.four{
width:326px;
height:200px;
background:#EEE;
margin:10px;
float:left;
}
#contact{
height:238px;
background:#EEE;
margin-top:1px;
}
#footer{
height:120px;
}
#footer ul{
margin-top:10px;
height:40px;
background:#EEE;
}
#footer li{
float:left;
margin-top:10px;
margin-left:20px;
}
#footer address{
margin-top:10px;
font-size:12px;
font-family:'微软雅黑',sans-serif;
}
我的微信
这是我的微信扫一扫
