使用css和html模仿搜狐页面

浏览数：48 / 时间：2015年06月09日

最近在有学习了下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;
}






运行后界面为：