<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度首页2</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
font-size: 12px;
color: #666666;
}
a{
color: #666;
font-size: 13px;
}
header{
height:50px;
width: 100%;
position: relative;
}
.aside_pic{
display: block;
width: 36px;
height: 36px;
background-image: url(bd_aside.png);
margin: 0 auto;
}
.aside_pic2{
background-position: -36px 0;
}
.aside_pic3{
background-position: -74px 0;
}
.aside_pic4{
background-position: -112px 0;
}
.aside_pic5{
background-position: -144px 0;
}
.link{
float: right;
margin-top: 20px;
}
.link a{
display: inline-block;
margin-right:15px;
font-size: 13px;
color:#333;
font-weight: bold;
line-height: 24px;
}
.nav_1{
padding:0 10px;
float: right;
position: relative;
}
.nav_1 p{
width: 60px;
/*height: 24px;*/
line-height: 24px;
text-align: center;
color: white;
background-color:dodgerblue;
font-size: 13px;
margin-bottom: 10px;
}
.nav_2{
display:none;
position: absolute;
left: 0;
top: 24px;
text-align: center;
}
.nav_1 .nav_2 a{
text-align: center;
border-bottom: #dadada 1px solid;
padding: 10px;
}
.nav_1:hover .nav_2{
display: block;
background-color: #f6f6f6;
}
.nav_1:hover p{
color:#666;
background-color: #f6f6f6;
}
#content{
width: 100%;
height: 450px;
text-align: center;
}
#content .logo img{
width:300px;
}
.search{
width: 640px;
height: 40px;
margin: 25px auto;
position: relative;
}
#search_txt{
width: 540px;
height:40px;
border: 1px solid #666666;
box-sizing: border-box;
float: left;
}
#search_btn{
width: 100px;
height: 40px;
color: white;
text-align: center;
line-height: 40px;
font-size: 20px;
background-color: #3384fe;
box-sizing: border-box;
float: left;
}
.search span{
position: absolute;
width: 18px;
height: 16px;
background: url(camera_new_5606e8f.png) no-repeat;
left: 510px;
top: 11px;
}
.code{
width: 60px;
height: 60px;
background: url("2weima_efde696.png") no-repeat;
margin: 170px auto;
position: relative;
}
.code p{
margin-top: 25px;
position: absolute;
bottom: -20px;
left: 4px;
}
.footer{
text-align: center;
margin-top: 30px;
}
.footer p{
margin-top: 10px;
}
</style>
</head>
<body>
<header>
<div>
<a href="JavaScript:">糯米</a>
<a href="JavaScript:">新闻</a>
<a href="JavaScript:">HAO123</a>
<a href="JavaScript:">地图</a>
<a href="JavaScript:">视频</a>
<a href="JavaScript:">贴吧</a>
<a href="JavaScript:">登录</a>
<a href="JavaScript:">设置</a>
<div id="nav">
<p>更多产品</p>
<div>
<a href="JavaScript:">
<span class="aside_pic aside_pic1"></span>
音乐
</a>
<a href="JavaScript:">
<span class="aside_pic aside_pic2"></span>
音乐
</a>
<a href="JavaScript:">
<span class="aside_pic aside_pic3"></span>
音乐
</a>
<a href="JavaScript:">
<span class="aside_pic aside_pic4"></span>
音乐
</a>
<a href="JavaScript:">
<span class="aside_pic aside_pic5"></span>
音乐
</a>
</div>
</div>
</div>
</header>
<div id="content">
<div><img src="bd_logo1.png"></div>
<div>
<span></span>
<input type="text" id="search_txt">
<input type="submit" id="search_btn" value="百度一下">
</div>
<div>
<p><strong>手机百度</strong></p>
</div>
</div>
<div>
<p>
<a href="JavaScript:">把百度设为首页</a>
<a href="JavaScript:">关于百度</a>
<a href="JavaScript:">About Baidu</a>
<a href="JavaScript:">百度推广</a>
</p>
<p>
©2016 Baidu
<a href="JavaScript:">使用百度前必读</a>
<a href="JavaScript:">意见反馈</a>
京ICP证030173号
<a href="JavaScript:">京公网安备11000002000001号</a>
</p>
</div>
</body>
</html>代码中有四个图片 这里我把图片原地址贴出来-------------------------------------------------------------------------bd_aside.png //第28行原图片地址：https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/logos/bdbri_icons_0a62ce1.png -------------------------------------------------------------------------camera_new_5606e8f.png //第126行原图片地址：https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/camera_new_5606e8f.png -----------------------------------------------------------------------------------------2weima_efde696.png //第133行原图片地址：https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png -------------------------------------------------------------------bd_logo1.png //第194行原图片地址：https://www.baidu.com/img/bd_logo1.png -------------------------------------------------------------------------------我这里的中间百度logo一直无法居中，但是logo图片的父元素content我也设置了text-align:cengter;了啊 搞了半天还是没明白希望有好心人帮忙解答！不胜感激！
目前暂无任何回答
- 0 回答
- 1 关注
- 112 浏览
添加回答
举报
0/150
提交
取消