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

最新推荐文章于 2021-07-04 14:54:03 发布

youyajie

最新推荐文章于 2021-07-04 14:54:03 发布

阅读量3.6k

点赞数 3

分类专栏： css 文章标签： html css class div stylesheet xhtml

本文链接：https://blog.csdn.net/youyajie/article/details/7537534

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

效果图为：