Div+css设计搜狐首页头部页

这几天一直在学习Div+css布局.觉得不错.非常棒.下午就做了一个搜狐.页的布局.

展示图:


Html代码:

<!DOCTYPE html 

PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html>

<title>搜狐首页</title>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″/>

<link rel=”stylesheet” type=”text/css” href=”index.css”/>

</head>

<body class=”body”>

<!–top部分–>

<div class=”top”>

<span class=”login”>登录表单</span>

<span class=”sitindex”>设置首页面</span>

<span class=”myhref”>超链接</span>

</div>

<!–logo部分–>

<div class=”logo”>

<img src=”logo.png” class=”logo”/>

</div>

<!–导航–>

<div class=”navi”></div>

<!–首页头部广告–>

<div class=”adall”>

<div class=”ad1″>招生广告</div>

<div class=”ad2″>贷款广告</div>

<div class=”ad3″>热门广告</div>

<div class=”ad4″><img src=”adright.png”/>

</div>

</div>

 </body>

</html>

Css代码:

.body{

margin:0 auto;

/*border:1px solid red;*/

width:950px;

height:800px;

font-size:14px;

}

.top{

width:949px;

height:22px;

/*border:1px solid black;*/

}

.login{

width:350px;

height:22px;

background:pink;

 

float:left;

}

.sitindex{

width:100px;

height:22px;

background:green;

float:left;

margin-left:50px;

}

.myhref{

float:right;

background:silver;

margin-right:5px;

margin:right;

margin-top:3px;

}

/*logo*/

.logo{

width:131px;

height:71px;

float:left;

 

}

.logo img{

width:151px;

height:71px;

margin:3px 0 0 0;

}

.navi{

width:790px;

height:71px;

background:pink;

float:right;

margin-top:3px;

margin-right:3px;

}

/*总体广告*/

.adall{

width:945px;

height:210px;

border:1px solid silver;

margin-top:3px;

float:left;

}

/*招生*/

.ad1{

width:180px;

height:204px;

background:blue;

float:left;

margin: 3px 0 0 3px;

}

.ad2{

width:400px;

height:204px;

background:blue;

float:left;

margin:3px 3px 0 3px;

}

.ad3{

width:180px;

height:204px;

background:blue;

float:left;

margin:3px 2px 0 0;

}

.ad4{

width:170px;

height:204px;

 

float:left;

margin:3px 0 0 0;

border-left:1px solid silver;

}

.ad4 img{

width:160px;

height:204px;

margin-left:3px;

}

Div+css设计搜狐首页头部页》有2个想法

发表评论

电子邮件地址不会被公开。 必填项已用*标注