效果图如下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度首页</title>
</head>
<style>
.box1{
text-align: center;
font-size: 10px;
}
.logo{
margin-top: 100px;
}
.top-link{
margin-top: 20px;
}
span{
padding-left: 5px;
}
input{
margin-top: 20px;
width: 400px;
height: 20px;
}
button{
margin-left: 5px;
height: 20px;
width: 8em;
font-size: 10px;
}
.down-link{
margin-top: 30px;
}
.baidu-map{
margin-top: 30px;
}
.down-box{
margin-top: 30px;
}
p{
margin-top: 30px;
}
</style>
<body>
<div class="box1">
<div class="logo">
<img src="images/bdlogo.gif" alt="logo">
</div>
<div class="top-link">
<span><a href="">新闻</a></span>
<span>网页</span>
<span><a href="">贴吧</a></span>
<span><a href="">知道</a></span>
<span><a href="">音乐</a></span>
<span><a href="">图片</a></span>
<span><a href="">视频</a></span>
<span><a href="">地图</a></span>
</div>
<div class="input-button">
<form>
<label><input type="text" name=""></label><button type="submit">百度一下</button>
</form>
</div>
<div class="down-link">
<span><a href="">百科</a></span>
<span><a href="">文库</a></span>
<span><a href="">hao123</a></span>
|
<span><a href="">更多</a></span>
</div>
<div class="baidu-map">
<img src="images/ic.jpg"><a href="">百度地图带你吃喝玩乐，全心全意为人民服务</a>
</div>
<div class="down-box">
<span><a href="">把百度设为主页</a></span>
<span><a href="">安装百度浏览器</a></span>
<br/>
<span><a href="">加入百度推广</a></span>
<span>|</span>
<span><a href="">搜索风云榜</a></span>
<span>|</span>
<span><a href="">关于百度</a></span>
<span><a href="">|</a></span>
<span><a href="">About Badidu</a></span>
<P>©2013 Baidu <a href="">使用百度前必读</a> 京ICP证030173号</P>
</div>
</div>
</body>
</html>
整理了一些盒子模型,有需要自取,皆是在老师的带领下做的,可做补充。
1486
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
