html代码为:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>souhu.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
<meta http-equiv="description" content="this is my page"/>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="./souhu.css"/>
</head>
<body>
<div class="top">
<div class="login">login</div>
<div class="weibo">微博推荐</div>
</div>
<!-- logo部分 -->
<div class="logo"><img src="img/1.jpg"/></div>
<!-- 导航栏 -->
<div class="navi">导航</div>
<!-- 广告部分 -->
<div class="ad">
<div class="student">招生</div>
<div class="add2">广告2</div>
<div class="add3">广告3</div>
<div class="add4">
<table height="100%" align="center" valign="middle">
<tr><td><img src="img/4.jpg"/></td></tr></table>
</div>
</div>
</body>
</html>
css代码为:
@CHARSET "UTF-8";
body {
width: 953px;
height: 800px;
margin: 0 auto;
/*background-color: pink;使用border会占像素,所以使用背景色看范围*/
border: 1px solid red;
}
.top {
height: 30px;
width: 953px;
background-color: pink;
}
.login {
width: 540px;
height: 30px;
background-color: blue;
float: left;
}
.weibo {
width: 270px;
height: 30px;
background-color: grey;
float: right;
}
/*logo部分*/
.logo {
width: 139px;
height: 67px;
background-color: yellow;
margin-top: 5px;
float: left;
}
.logo img {
width: 139px;
height: 67px;
}
/*导航*/
.navi {
width: 810px;
height: 67px;
float: left;
margin-left: 4px;
background-color: green;
margin-top: 5px;
}
/*广告*/
.ad {
width: 953px;
height: 212px;
border: 1px solid silver;
float: left;/*不加浮动的话会认为是粘连在一起的*/
margin-top: 5px;
}
/*招生广告*/
.student {
width:121px;
height: 197px;
margin: 5px 0 0 4px;
float: left;
background-color: silver;
}
/*广告2*/
.add2 {
width: 450px;
height: 197px;
margin: 5px 0 0 18px;
float: left;
background-color: green;
}
/*房地产广告*/
.add3{
height: 197px;
width: 140px;
float: left;
margin: 5px 0 0 15px;
background-color: green;
}
/*图片广告*/
.add4 {
height: 212px;
width: 180px;
float: right;
border-left: 1px solid silver;
}
效果图为: