首页 > 代码库 > 使用css和html模仿搜狐页面

使用css和html模仿搜狐页面

2024-07-18 18:55:18   215人阅读

最近在有学习了下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=http://www.mamicode.com/"./sohu.css">>

在写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


联系
我们