<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 搜狐首页缩减版 </title>
<style type="text/css">
.box{
width:950px;
height:600px;
margin:0px auto;
}
.top{
width:950px;
height:23px;
background-color:#FFF0F5;
font-size:12px;
line-height:23px;
}
.login{
width:416px;
height:23px;
background-color:#008000;
float:left;
}
.set-index{
width:105px;
height:23px;
background-color:#808080;
float:left;
margin-left:80px;
}
.img-logo{
width:250px;
height:23px;
background-color:#D4D4D4;
float:right;
}
.user-name-style{
height:14px;
}
.button-style{
height:23px;
font-size:12px;
}
.web-logo{
width:136px;
height:68px;
margin-top:5px;
float:left;
}
.nav{
width:807px;
height:68px;
background:#7CF574;
margin-top:5px;
float:right;
}
.ad-box{
width:950px;
height:213px;
border:1px solid silver;
margin-top:5px;
float:left;
}
.ad-zs{
width:125px;
height:195px;
background-color:#FC7E8C;
float:left;
margin:8px 0 0 5px;
}
.ad2{
width:454px;
height:195px;
background-color:#FC7E8C;
float:left;
margin:8px 0 0 5px;
}
.ad-house{
width:150px;
height:195px;
background-color:#FFC90C;
float:left;
margin:8px 0 0 5px;
}
.ad-img{
width:180px;
height:213px;
border-left:1px solid red;
float:right;
text-align:center;/*图片居中*/
}
.ad-img img{
margin-top:10px;
}
</style>
</head>
<body>
<div class="box"><!--放div-->
<div class="top"><!--top-->
<div class="login">登录
<input class="user-name-style" type="text" name="user_name">
<input class="button-style" type="submit" value="登录">
</div>
<div class="set-index">设置首页</div>
<div class="img-logo">图片log</div>
</div><!--top-->
<div class="web-logo">
</div>
<div class="nav">正月十二
</div>
<div class="ad-box">
<div class="ad-zs">招生广告</div>
<div class="ad2">广告2</div>
<div class="ad-house">房地产广告</div>
<div class="ad-img">
</div>
</div>
</body>
</html>
sohu.png
网友评论