前端第三次作业
源代码:
html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/ >
</head>
<body>
<!--百度导航栏 开始 -->
<div class="baidu_nav">
<!--nav导航栏标签-->
<nav class="top_nav">
<a href="javascript:void (0)" class="jiacu">新闻</a>
<a href="javascript:void (0)" class="jiacu">hao123</a>
<a href="javascript:void (0)" class="jiacu">地图</a>
<a href="javascript:void (0)" class="jiacu">视频</a>
<a href="javascript:void (0)" class="jiacu">贴吧</a>
<a href="javascript:void (0)" class="jiacu">学术</a>
<a href="javascript:void (0)">登陆</a>
<a href="javascript:void (0)">设置</a>
<a href="javascript:void (0)" class="more_product">更多产品</a>
</nav>
</div>
<!--百度顶部导航栏 结束-->
<!--百度中间部分 开始-->
<div class="middle">
<div class="logo"></div>
<div class="search_box">
<input type="text" class="search_input"/ >
<input type="button" class="search_button" value="百度一下"/ >
<!--百度中间部分 结束-->
<!--百度底部部分 开始-->
<div class="bottom">
<ul>
<li class="ewm">
<img src="image/ewm.png" width="60" height="60"/ >
</li>
<li class=phone_bd>百度</li>
</ul>
<div class="lj_bd">
<p>
<a href="javascript:void (0)">把百度设为主页</a>
<a href="javascript:void (0)">关于百度</a>
<a href="javascript:void (0)">About Baidu</a>
<a href="javascript:void (0)">百度推广</a>
</p>
<p class="bottom_bottom">
<a>©2018 Baidu</a>
<a href="javascript:void (0)">使用百度前必读 意见反馈</a>
<a>京ICP证030173号</a>
<span class="icon"></span>
<a href="javascript:void (0)">京公网安备11000002000001号</a>
<span class="icon icon_1"></span>
</p>
</div>
</div>
<!--百度底部部分 结束-->
</body>
<html>
css:
*{
margin:0 auto;
padding:0px;
}
.baidu_nav{
width:100%;
height:24px;
margin-top:19px;
}
.top_nav{
height:24px;
float:right;
}
.top_nav a{
display:block;
line-height:24px;
padding:0px 9px;
font-size:13px;
color:black;
float:left;
}
.top_nav a:hover{
color:#00c;
}
.jiacu{
font-weight:bold;
}
.more_product{
display:block;
width:60px;
height:24px;
background-color:#38f;
text-decoration:none;
color:white!important;
float:left;
}
.middle{
width:100%;
height:191px;
margin-top:50px;
}
.logo{
height:129px;
width:270px;
background-image: url("../image/bd_logo1.png");
background-size: 270px 129px;
}
.search_box{
width:641px;
height:37px;
margin-top:20px;
}
.search_input{
width:539px;
height:34px;
border:1px solid darkgray;
float:left;
}
.search_button{
width:100px;
height:37px;
font-size:15px;
background-color:#3385ff;
color:white;
font-family:"Microsoft YaHei";
border:0px;
float:left;
}
.search_button:hover{
background-color:#2d78f4;
}
.bottom{
width:640px;
height:200px;
margin-top:150px;
}
.ewm{
width:60px;
height:60px;
}
.phone_bd{
text-align:center;
width:60px;
height:23px;
color:#666;
font-size:12px;
font-weight:bold;
}
.lj_bd{
width:100%;
height:46px;
}
.lj_bd p{
width:640px;
text-align: center;
font-size: 12px;
color:#999;
margin-top:10px;
}
.lj_bd p a{
padding:0px 10px;
font-size: 12px;
color:#999;
}
.bottom_bottom{
width:640px;
height:17px;
}
.bottom_bottom a{
display:block;
float:left;
}
.icon{
display:block;
width:14px;
height:17px;
background-image:url("../image/icon.png");
float:left;
background-position:-600px -96px;
}
.icon_1{
background-position:-623px -96px;
}
效果图: