新手模拟百度网页
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>模拟百度首页</title>
<link rel="stylesheet" type="text/css" href="css/baidu01.css" />
<link href="img/1.1.ico" rel="shortcut icon"/>
</head>
<body>
<div id="header">
<ul id="header_nav">
<li><a href="">新闻</a></li>
<li><a href="">hao123</a></li>
<li><a href="">地图</a></li>
<li><a href="">视频</a></li>
<li><a href="">贴吧</a></li>
<li><a href="">学术</a></li>
<li><a href="">登录</a></li>
<li><a href="">设置</a></li>
</ul>
</div>
<div id="main">
<img id="img_logo" src="img/3.1.gif" width="270px" height="129px">
<br>
<input type="text" name="" id="" value=""/>
<input type="submit" name="" id="" value="百度一下"/>
</div>
<div id="footer">
<img src="img/2.1.jpg">
</div>
</body>
</html>
baidu01.css
@charset "UTF-8";
*{margin:0px;padding:0px;}
#header{
width:100%;
height:45px;
}
#header_nav{
position:absolute;
right:92px;
top:26px;
}
#header_nav li{
float:left;
list-style-type:none;
margin-left:24px;
}
#header_nav li a{
color:#333;
font-size:13px;
font-weight:500px;
line-height:24px;
}
#main{
width:100%;
height:384px;
text-align:center;
}
#img_logo{
margin-top:30px;
margin-bottom:21px;
}
input[type=text]{
height:34px;
width:539px;
border:solid 1px #4992FF;
background-image:url(../img/2.1.jpg);
background-repeat:no-repeat;
background-position-x:500px;
background-position-y:3px;
}
input[type=submit]{
width:100px;
height:36px;
font-size:15px;
color:#fff;
background-color:#2d78f4;
border:solid #2d78f4;
letter-spacing:1px;
position:relative;
right:5px;
top:1px;
}
#footer{
width:100%;
height:206px;
text-align:center;
}
#header_nav li a:hover{color:blue;}
!!!图片需要添加。