一. 直接訪問的地址
39.106.162.75/baidu.html
二.完整代碼
<!DOCTYPE html>
<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>