一、 我们制作一个百度首页作为练习，可直接复制该代码保存后缀名为.html来查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>d93_baidu_home_exercise</title>
<style>
.header{
height: 250px;
/*background-color: red;*/
}
.content{
height: 220px;
/*background-color: pink;*/
?
}
.footer{
height: 200px;
/*background-color:green;*/
}
div{
text-align: center;
}
.logo{
background-color:skyblue;
height: 130px;
}
input[type=text]{
width: 400px;
height:30px;
}
input[type=submit]{
width:80px;
height:30px;
}
.content_form{
height:80px;
}
body{
font-size: 16px;
}
</style>
</head>
<body>
<div class="header">
<div>
<img src="image/baidu_logo.png" class="logo">
</div>
<div class="header_navgitor">
<a href="#">新闻</a>
<a href="#">音乐</a>
<a href="#">知道</a>
<a href="#">文库</a>
<a href="#">应用</a>
<a href="#">视频</a>
<a href="#">地图</a>
</div>
</div>
<div class="content">
<div class="content_form">
<form action="http://www.baidu.com">
<input type="text" name="" id="">
<input type="submit" value="百度一下" >
</form>
</div>
<div>
<a href="#">百科</a>
<a href="#">文库</a>
<a href="#">hao123</a>
<a href="#">更多>></a>
</div>
</div>
<div class="footer">
<div>
<a href="#">把百度设为首页</a>
<a href="#">安装百度卫士</a>
</div>
<div>
<a href="#">加入百度推广</a>
｜
<a href="#">关于百度</a>
｜
<a href="#">About 百度</a>
</div>
<div>
@2019Baidu，使用百度前必读 京ICP证666号
</div>
</div>
</body>
</html>
web前端开发学习Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
原文地址：https://blog.51cto.com/14592820/2462759
时间： 2024-10-01 02:58:27