映像素材のニーズをクリックするか、私に私的な手紙に問い合わせて、コメント
レンダリング：
HTMLソース：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="bar">
<ul>
<li><a class="more" href="#">更多产品</a></li>
<li><a class="set" href="#">设置</a> </li>
<li><a class="log" href="#">登录</a> </li>
<li><a class="learning" href="#">学术</a> </li>
<li><a class="post" href="#">贴吧</a> </li>
<li><a class="video" href="#">视频</a> </li>
<li><a class="map" href="#">地图</a> </li>
<li><a class="hao" href="#">hao123</a> </li>
<li><a class="news" href="#">新闻</a> </li>
</ul>
</div>
<div class="du">
<img src="img/logo.png" alt="">
<div class="text">
<input type="text">
<button>百度一下</button>
</div>
</div>
<div class="tail">
<img src="img/ma.png" alt=""><br>
<p>百度</p>
<div class="foot">
<a href="#">把百度设为主页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
<a href="#">百度推广</a><br>
<span>
©2019 Baidu
<a href="#">使用百度前必读</a>
<a href="#">意见反馈</a>
京ICP证030173号
<img class="img" src="img/gps.png" alt="">
</span>
<span>
<a href="#">京公网安备11000002000001号</a>
<img class="img" src="img/police.png" alt="">
</span>
</div>
</div>
</body>
</html>
CSSのソース
/* 通用样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 导航栏 */
.bar {
height:65px;
}
.bar ul li{
list-style: none;
float:right;
margin-right:13px;
margin-top:18px;
}
.bar ul li a {
font-size:13px;
}
.more {
display:block;
width:60px;
height:24px;
background-color:rgb(51,136,255);
color:white;
text-align:center;
padding-top:2px;
margin-left:9px;
text-decoration: none;
}
.set,
.log {
display:block;
height:24px;
color:black;
text-align:center;
padding-top:3px;
margin-left:7px;
}
.learning,
.post,
.video,
.map,
.hao,
.news {
display:block;
height:24px;
color:black;
font-weight:bolder;
text-align:center;
padding-top:3px;
margin-left:7px;
}
/* 搜索框 */
.du {
text-align:center;
margin-top:42px;
}
.text {
margin-top:40px;
}
.text input {
width:540px;
height:36px;
border:1px solid rgb(194,194,194);
background-image: url(../img/cam1.png);
background-repeat:no-repeat;
background-position:510px 10px;
}
.text input :hover {
background-image: url(../img/cam2.png);
}
.text button {
width:100px;
height:36px;
font-size:16px;
color:white;
background-color:rgb(51,133,255);
border:none;
/*border:rgb(51,133,255);*/
margin-left:-5px;
position: relative;
top:2px;
}
/* 底部样式 */
.tail {
margin-top:200px;
text-align:center;
font-size:12px;
color:rgb(153,153,153);
}
.tail p {
font-weight:bolder;
color:rgb(102,102,102);
margin-top:2px;
}
.foot {
margin-top:23px;
}
.foot a {
color:rgb(153,153,153);
}
.img1,
.img2 {
display: inline-block;
overflow: hidden;
position: relative;
}
.img1 {
background-position: -600px -96px;
position: relative;
top: 5px;
}
.img2 {
background-position: -623px -96px;
position: relative;
top: 3px;
}