说明
- 此程序是作者自己的设计思路，仅供参考（新手，大家多多包涵，哈哈）。
- 大家如果有好的设计思路，可分享，共同学习。
推荐手册
代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>souhu案例</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="div_css_souhu.css"/>
</head>
<body>
<div class="div1">
<ul>
<a href="#"><li>下载APP |</li></a>
<li> <img src="souhu6.PNG"/> </li>
<a href="#"><li>登录狐友</li></a>
</ul>
</div>
<div class="div2">
<img src="souhu1.PNG"/>
</div>
<div class="div2_right">
<div class="div3">
<input type="text" value="大家都在搜:菲律宾台风泥石流"/><img src="souhu2.PNG"/>
</div>
<div class="div4">
<ul>
<li><img src="souhu3.PNG"/></li>
<li> <a href="#">搜狐号</a> | </li>
<li><img src="souhu4.PNG"/></li>
<li> <a href="#">搜狐搜索</a> | </li>
<li><img src="souhu5.PNG"/></li>
<li> <a href="#">搜狐邮箱</a></li>
</ul>
</div>
</div>
<div class="div5">
<div class="div6">
<span><a href="#"><b>新闻</b></a> <a href="#">军事</a> <a href="#">社会</a></span>
<br/><br/>
<span><a href="#"><b>财经</b></a> <a href="#">宏观</a> <a href="#">理财</a></span>
</div>
<div class="div6">
<span><a href="#"><b>体育</b></a> <a href="#">NBA</a> <a href="#">中超</a></span>
<br/><br/>
<span><a href="#"><b>房产</b></a> <a href="#">二手车</a> <a href="#">家居</a></span>
</div>
<div class="div6">
<span><a href="#"><b>娱乐</b></a> <a href="#">视频</a> <a href="#">美剧</a></span>
<br/><br/>
<a href="#"><b>汽车</b> 车贷 车型</a>
</div>
<div class="div6">
<span><a href="#"><b>时尚</b></a> <a href="#">旅游</a> <a href="#">母婴</a></span>
<br/><br/>
<span><a href="#"><b>科技</b></a> <a href="#">教育</a> <a href="#">健康</a></span>
</div>
<div class="div6">
<span><a href="#"><b>美食</b></a> <a href="#">文化</a> <a href="#">历史</a></span>
<br/><br/>
<span><a href="#"><b>星座</b></a> <a href="#">动漫</a> <a href="#">游戏</a></span>
</div>
<div class="div6">
<span><a href="#"><b>邮箱</b></a> <a href="#">浏览器</a> <a href="#">博客</a></span>
<br/><br/>
<span><a href="#"><b>地图</b></a> <a href="#">输入法</a> <a href="#">**</a></span>
</div>
<div class="div6" id="id1">
<span><a href="#"><b>千帆</b></a> <a href="#">微门户</a> <a href="#">看房</a></span>
<br/><br/>
<span><a href="#"><b>畅游</b></a> <a href="#">17173</a> <a href="#">政务</a></span>
</div>
</div>
<div class="div7">
<div class="div8">
<a href="#"><img src="souhu7.PNG"/></a>
</div>
<div class="div9">
<a href="#"><img src="souhu8.PNG"/></a>
</div>
</div>
<div class="div10">
<div class="div11">
</div>
<div class="div11">
</div>
<div class="div11">
</div>
</div>
</body>
</html>
/*注释*/
body{
margin:0px;
}
.div1{
z-index:1;
background-color:black;
border:1px solid black;
margin:0px;
height:30px;
}
.div1 ul{
color:gray;
float:right;
width:200px;
list-style-type:none;
margin:5px 150px 10px 0px;
padding:0px;
}
.div1 li {
float:left;
}
.div1 li img{
margin-top:-5px;
}
.div1 a:link{
text-decoration:none;
color:gray;
}
.div1 a:hover{
text-decoration:none;
color:white;
font-weight:bold;
}
.div2{
position:absolute;
left:120px;
top:0px;
width:150px;
height:100px;
border:1px solid pink;
}
.div2 img{
z-index:2;
width:150px;
height:100px;
}
.div2_right{
position:absolute;
left:260px;
top:30px;
width:1000px;
height:100px;
/*border:1px solid pink;*/
}
.div3{
display:inline;
position:absolute;
left:150px;
top:20px;
}
.div3 input{
width:300px;
height:45px;
}
.div3 img{
margin-bottom:-20px;
width:80px;
height:50px;
}
.div4{
display:inline;
position:absolute;
left:580px;
top:20px;
}
.div4 ul{
list-style-type:none;
float:right;
margin-right:0px;
/*background-color:black;*/
}
.div4 li{
float:left;
color:gray;
}
.div4 li img{
margin-top:-10px;
width:40px;
height:40px;
}
.div4 a{
text-decoration:none;
color:gray;
}
.div5{
border:1px solid gray;
border-style: solid none solid none;
margin-top:100px;
margin-left:120px;
width:1140px;
height:80px;
}
#id1{
border-style: none none none none;
}
.div6{
float:left;
border:1px solid gray;
border-style: none solid none none;
margin-top:5px;
padding:5px 5px 0px 5px;
width:150px;
height:60px;
}
.div6 span{
/*border:1px solid black;*/
margin-top:20px;
}
.div6 a:link{
color:black;
text-decoration:none;
}
.div6 a:hover{
color:red;
text-decoration:none;
}
.div6 a:visited{
color:black;
text-decoration:none;
}
.div7{
margin-top:20px;
margin-left:120px;
width:1140px;
height:100px;
float:left;
}
.div8{
display:inline;
}
.div8 img{
width:1000px;
height:100px;
}
.div9{
display:inline;
}
.div9 img{
width:130px;
height:100px;
}
.div10{
border:2px solid black;
margin-top:140px;
margin-left:120px;
width:1140px;
height:420px;
}
.div11{
margin:5px 5px 0px 0px;
float:left;
border:3px solid pink;
width:369px;
height:400px;
}
