静态页面练习——百度搜索页面。前端萌新,个人练习记录帖。
实现效果如下:
html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>百度搜索页面</title>
<link rel="stylesheet" href="css/index.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<!--第一部分-->
<div class="head">
<span>新闻</span>
<span>hao123</span>
<span>地图</span>
<span>贴吧</span>
<span>视频</span>
<span>图片</span>
<a href="https://www.baidu.com/">登录</a>
</div>
<!--第二部分-->
<div class="search">
<div class="img-box">
<img src="images/baidu.png" alt="Baidu">
</div>
<div class="search-box">
<input type="input">
<a href="#">百度一下</a>
</div>
</div>
<!--第三部分-->
<div class="add">
<div class="qr-code">
<img src="images/download.png" alt="下载百度">
<p>下载百度app</p>
</div>
<div>
<p>有事搜一搜</p>
</div>
</div>
<!--第四部分-->
<div class="bottom">
<p>
©2022 Baidu 互联网药品信息服务资格证书 (京)-经营性-2017-0020
</p>
</div>
</body>
</html>
css代码如下:
1.base.css
*{
margin: 0;
padding: 0;
}
a{
text-decoration: none;
}
2.index.css
.head{
margin-top: 19px;
margin-left: 10px;
text-align: left;
font-size: 13px;
text-decoration: underline;
}
.head span{
margin-right: 15px;
color: #333333;
font-weight: bolder;
cursor: pointer; /*手型鼠标*/
}
.head span:hover{
color: #03C;
}
.head a{
float: right;
margin-right: 20px;
padding: 5px;
color: white;
background-color: #436CE4;
border-radius: 10px;
}
.search{
margin-top: 25px;
text-align: center;
}
.img-box{
margin-bottom: 20px;
}
.search-box{
width: 622px;
height: 36px;
margin: 30px auto;
}
.search-box input{
float: left;
width: 482px;
height: 36px;
padding-left: 10px;
border: none;
outline: none;
color: #999999;
}
input[type=input] {
width: 492px;
padding: 0px;
margin: 0px;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=input]:focus{
border: 2px solid #555;
background-color: lightblue;
}
.search-box a{
float: left;
width: 130px;
height: 37px;
border: none;
line-height: 36px;
text-align: center;
font-size: 18px;
font-weight: bold;
color: white;
background-color: blue;
}
.add{
margin-top: 90px;
text-align: center;
font-size: 14px;
color: #999999;
}
.add img{
width: 90px;
height: 90px;
text-align: center;
}
.qr-code p{
color: #333333;
font-size: 16px;
}
.bottom{
margin-top: 70px;
text-align: center;
font-size: 10px;
color: #999999;
}