<!DOCTYPE html> <!--申明文档类型html-->
<html> <!--html标签-->
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<style>
*{
margin: 0;
padding: 0;
}
.a{
width:475px;
height:24px;
float:right;
padding:18px 0;
}
.a>a{
font-size:13px;
padding-right:14px;
width:26px;
color:black;
line-height: 24px;
}
.a a:nth-child(1),a:nth-child(2),a:nth-child(3),a:nth-child(4),a:nth-child(5),a:nth-child(6){
font-weight: bold;
}
.a a:nth-child(9){
width:60px;
height:24px;
background:#3388FF;
padding:5px;
text-align: center;
color:#fff;
text-decoration:none;
}
.logo{
width:270px;
height:129px;
position: absolute;
left:665px;
top:85px;
}
#a{
width:100%;
height:240px;
position: relative;
overflow: hidden;/*规定元素超出区域如何显示*/
}
.c{
width:650px;
margin:0 auto;
overflow: hidden;
}
.c>input{
width:540px;
height:32px;
border:1px solid #3385FF;
float:left;
background: #FFF url("images/yuansu1.png") no-repeat scroll 97% 50%;
}
.c>button{
background:#3385FF;
width:100px;
height:34.5px;
border:0;
color:#fff;
font-size: 15px;
float:left;
}
#ma{
width:60px;
height:86px;
margin:260px auto 20px;
font-size: 13px;
text-align: center;
}
.ma{
width:60px;
height:60px;
}
#ma>p{
font-weight: bold;
}
.e{
text-align: center;
color:#999;
font-size: 13px;
margin-bottom:5px;
}
.e>a{
color:#999;
font-size: 13px;
margin-right:8px;
}
</style>
</head>
<body>
<div id="a">
<div class="a">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">登录</a>
<a href="#">设置</a>
<a href="#">更多产品</a>
</div>
<div>
<img class="logo" src="images/bd_logo1.png"/>
</div>
</div>
<div class="c">
<input type="text"/>
<button>百度一下</button>
</div>
<div id="ma">
<img class="ma" src="images/erweima.jpg">
<p>手机百度</p>
</div>
<p class="e">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">about baidu</a>
<a href="#">百度推广</a>
</p>
<p class="e">©2017 baidu <a href="#">使用百度前必读</a><a href="#">意见反馈</a> 京ICP证030173号 <a href="#">京公网安备11000002000001号</a></p>
</body>
</html>
纯HTML百度主页
原创
©著作权归作者所有:来自51CTO博客作者JackieDYH的原创作品,请联系作者获取转载授权,否则将追究法律责任
提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
百度云AI
在人工智能的浪潮中,人脸识别技术如同一颗璀璨的明珠,吸引着无数科技爱好者的目光。
百度云 java 人脸识别 -
百度分享
百度分享分享到:
百度分享代码 Esheocksie