其实我是粘贴复制的，想知道大神写这种页面是不是不需要查阅什么文本之类的，直接盲打呢？
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="iconfont/camera.css">
<!-- 更换网页的图标为百度的大脚-->
<link rel="icon" sizes="any" mask="" href="//www.baidu.com/img/baidu_85beaf5496f291521eb75ba38eacbd87.svg">
<style>
* {
margin: 0;
padding: 0;
}
li {
float: right;
list-style: none;
margin-right: 19px;
text-decoration: underline;
font-weight: 700;
font: 12px/32px Arial;
}
.wrapper {
height: 100%;
float: right;
}
.wrapper li{
float: left;
}
/*
border:none===>把这个默认的边框去掉,然后用到边框的时候自己加上边框
outline:none====>把outline的显示去掉
*/
input{
border: none;
outline: none;
}
.top {
background-color: #848181;
height: 32px;
}
/*伪类选择器需要写清楚这个东西在哪里*/
/*.dot{*/
/* height: 10px;*/
/* width: 10px;*/
/* background-color: #ff0000;*/
/* position: relative;*/
/* border-radius: 1px;*/
/*}*/
.wrapper li:first-child a{
color: red;
font-size: 11px;
position: relative;
}
.wrapper li:first-child::after{
width: 4px;
height: 4px;
background-color: #ff0000;
/*content一定要加*/
content:'';
border-radius: 2px;
top:8px;
right: 389px;
position: absolute;
}
.center {
/*background-color: white;*/
height: 100%;
width: 100%;
background-color: rgb(64, 64, 64);
background-image: url("https://dss3.bdstatic.com/iPoZeXSm1A5BphGlnYG/skin/126.jpg?2");
text-align: center;
background-repeat: no-repeat;
position: absolute;
background-size: cover;
}
.bottom {
background-color: #000000;
height: 40px;
position: fixed;
bottom: 0;
width: 100%;
}
img {
width: 270px;
height: 129px;
}
.search input {
height: 36px;
width: 537px;
border: none;
box-sizing: border-box;
/*取消按钮和输入框之间的空隙*/
float: left;
}
.search .iconfont{
position: absolute;
right: 6px;
top: 2px;
font-size: 30px;
}
.center .search{
margin: 0 auto;
width: 641px;
}
.search .one{
/*这里要设置浮动，否则这个div.one默认的宽度就是其父对象search的宽度*/
float: left;
position: relative;
}
.search_content{
padding: 5px 50px 5px 7px;
text-indent: 10px;
}
div .search_button {
width: 104px;
font: 400 16px Arial;
}
#upload{
/*隐藏upload按钮，并且不占据位置*/
display: none;
/* visibility:hidden==>意思为能见度为0,即隐藏按钮，但是还是会占据空间 */
/* visibility: hidden;*/
}
a {
color: white;
}
.bottom li {
margin-right: 20px;
text-align: left;
font: 12px/32px Arial;
float: left;
color: #999;
text-decoration: none;
}
</style>
</head>
<body>
<div class="top">
<div class="wrapper">
<ul>
<li><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1" target="_blank">
抗击肺炎</a>
</li>
<li><a href="https://news.baidu.com/" target="_blank">
新闻</a>
</li>
<li><a href="https://www.hao123.com" target="_blank">
hao123</a>
</li>
<li><a href="https://map.baidu.com/" target="_blank">
地图</a>
</li>
<li><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">
视频</a>
</li>
<li><a href="https://tieba.baidu.com/index.html?traceid=" target="_blank">
贴吧</a>
</li>
<li><a href="http://xueshu.baidu.com/" target="_blank">
学术</a>
</li>
<li><a href="http://i.baidu.com/" target="_blank">
项炤程</a>
</li>
<li><a href="#" target="_blank">设置</a></li>
</ul>
</div>
</div>
<div class="center">
<img src="//www.baidu.com/img/superlogo_c4d7df0a003d3db9b65e9ef0fe6da1ec.png?where=super" alt="" id="baidu"><br>
<div class="search">
<div class="one">
<!--如果下面这里换行的话，会导致搜索框和按钮之间有缝隙，
因为换行会被解析成一个空格
-->
<input type="text" class="search_content">
<!-- <img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/soutu/img/camera_new_5606e8f.png"-->
<!-- alt="" id="photo">-->
<!-- <span class="iconfont camera"></span>-->
<label for="upload" class="iconfont camera"></label>
<input type="file" id="upload">
</div>
<form action="https://www.baidu.com">
<input type="submit" value="百度一下" class = 'search_button'>
</form>
</div>
</div>
<div class="bottom">
<ul >
<li><a href="">帮助中心</a></li>
<li><a href="">意见反馈</a></li>
<li><a href="">使用百度前必读</a></li>
<li><a href="">百度推广</a></li>
<li><a href="">About Baidu</a></li>
<li><a href="">关于百度</a></li>
<li><a href="">设为首页</a></li>
</ul>
</div>
<!--</html>-->
</body>
