使用html+css仿搜狐网址页面布局

来源：互联网发布：道家经典软件下载编辑：程序博客网时间：2024/04/29 18:12

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

效果图为：