最近在有学习了下css+html，利用css+html写模仿写下了搜狐布局的一部分
首先创建一个html文件，命名为sohu.html
代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>sohu.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="./sohu.css">
</head>
<body>
<!--最上面的div -->
<div class="top">
<div class="login">登录部分</div>
<div class="indexpage">设为首页</div>
<div class="myhref">超链接</div>
</div>
<!--logo div -->
<div class="logo"><img src="sohu1.jpg"/></div>
<div class="navi">导航栏</div>
<!-- 广告部分 -->
<div class="ad">
<div class="stuad">招生广告</div>
<div class="ad2">广告2</div>
<div class="housead">房地产广告</div>
<div class="picad">
<table height="100%" aligin="center" valign="middle">
<tr>
<td>
<img src="car2.jpg">
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
在写css文件：
</pre><pre name="code" class="css">body{
width:950px;
/*高度定不下来不要写，自己适应 */
margin:0 auto;
/* background-color: pink; */
border:1px solid red;
font-size: 12px;
}
.top{
width:950px;
height:22px;
background-color: pink;
}
/*登入部分 */
.login{
width:416px;
height:22px;
background-color: green;
float:left;
}
/*设为首页 */
.indexpage{
width:105px;
height:20px;
background-color: gray;
float:left;
margin-left: 80px;
}
/* 超链接 */
.myhref{
width:250px;
height:20px;
float:right;
background-color: #b4b4b4;
}
/* logo */
.logo{
width:137px;
height:68px;
float:left;
background-color: yellow;
margin-top: 5px;
}
.logo img{
width:137px;
}
/*导航栏 */
.navi{
width:807px;
height:68px;
float:left;
background-color: #7CE574;
margin-top:5px;
margin-left: 5px;
}
/*广告部分 */
.ad{
width:950px;
height:212px;
background-color: pink;
margin-top: 5px;
float:left;
border:1px solid silver;
}
/*学生广告 */
.stuad{
width:126px;
height:196px;
background-color: #EC7E8C;
float:left;
margin:5px 0 0 5px;
}
/*广告2 */
.ad2{
width:453px;
height:196px;
margin:5px 0 0 15px;
background-color: #EC7E8C;
float:left;
}
/* 房地产广告 */
.housead{
height:196px;
width:150px;
background-color: #7CE574;
margin:5px 0 0 12px;
float:left;
}
/* 图片广告 */
.picad{
height:212px;
width:180px;
float:right;
background-color: #7CE574;
border-left: 1px solid silver;
text-align: center;
}
运行后界面为：
本文原创，转载请注明：http://blog.csdn.net/j903829182/article/details/38732321
使用css和html模仿搜狐页面
时间： 2024-11-02 17:17:57