HTML+CSS 實現百度首頁
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
<link rel="stylesheet" type="text/css" href="./baidu.css"/>
</head>
<body>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下，你就知道</title>
</head>
<body>
<!-- 頭部導航部分 -->
<div id="header">
<div id="header-left-top">
<a href="http://news.baidu.com/">新聞</a>
<a href="https://www.hao123.com/">hao123</a>
<a href="https://map.baidu.com/@13252088,2915197,13z">地圖</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top">視頻</a>
<a href="https://tieba.baidu.com/index.html">貼吧</a>
<a href="https://xueshu.baidu.com/">學術</a>
<a href="https://www.baidu.com/more/">更多</a>
</div>
<div id="header-right-top">
<a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1" id="u1">抗擊疫情</a>
<a href="" id="u2">設置</a>
<a href="" id="u3">登錄</a>
</div>
</div>
<!-- 主題部分 -->
<div id="body">
<div id="logo"></div>
<div id="search_box">
<input type="text" id="search_input"/ >
<div id="photo"></div>
<input type="button" id="search_button" value="百度一下"/ >
</div>
<div id="hot-search-title">
<a href="" id="bai-du-re-ban">百度熱榜</a>
<a href="" id="huan-yi-huan"></a>
</div>
<!-- 百度熱板內容 -->
<ul id="hot-search-content-wrapper">
<div class="left-content">
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E9%A6%99%E6%B8%AF%E5%B0%86%E5%9C%A8%E8%AF%BE%E7%A8%8B%E4%B8%AD%E5%90%91%E5%AD%A6%E7%94%9F%E4%BB%8B%E7%BB%8D%E5%9B%BD%E5%AE%89%E6%B3%95&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="a">
<li class="content1">
<span id="img-1">1</span>
<span class="text">香港將在課程中向學生介紹國安法</span>
<span id="re"></span>
</li>
</a>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E5%8C%97%E4%BA%AC%E7%8E%B0%E6%9C%8939%E4%B8%AA%E4%B8%AD%E9%A3%8E%E9%99%A9%E5%9C%B0%E5%8C%BA&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="a">
<li class="content1">
<span id="img-2">2</span>
<span class="text">北京現有30箇中風險地區</span>
</li>
</a>
<a href="https://www.baidu.com/s?cl=3&tn=baidutop10&fr=top1000&wd=%E7%BE%8E%E5%9B%BD%E5%8D%95%E6%97%A5%E6%96%B0%E5%A2%9E%E7%A1%AE%E8%AF%8A%E8%B6%854%E4%B8%87%E4%BE%8B&rsv_idx=2&rsv_dl=fyb_n_homepage&hisfilter=1" class="a">
<li class="content1">
<span id="img-3">3</span>
<span class="text">英國單日新增確診超4萬例</span>
</li>
</a>
</div>
<div class="right-content">
<a href="" class="a">
<li class="content1">
<span class="img-4">4</span>
<span class="text">被頂替者苟晶懷疑自己早被選中</span>
</li>
</a>
<a href="" class="a">
<li class="content1">
<span class="img-4">5</span>
<span class="text">易烊千璽談回鍋肉</span>
</li>
</a>
<a href="" class="a">
<li class="content1">
<span class="img-4">6</span>
<span class="text">北京老鄭州燴麪館又有兩員工確診</span>
</li>
</a>
</div>
</ul>
</div>
</body>
</html>
</body>
</html>
CSS
#header{
height: 60px;
/* border: 6px solid red; */
position: relative;
}
#header-left-top{
position: absolute;
left: 0;
top: 0;
/* z-index: 100; */
height: 60px;
padding-left: 24px;
/* border: 1px solid red; */
}
a{
text-decoration: none;
margin-right: 31px;
margin-top: 19px;
display: inline-block;
position: relative;
font-size: 13px;
}
#header-right-top{
position: absolute;
right: 0;
top: 0;
height: 60px;
padding-right: 24px;
/* border: 1px solid red; */
}
#u1{
color: red;
/* border: #FF0000 1px solid; */
}
#u3{
border-radius: 20%;
height: 24px;
width: 48px;
background-color: #4e71f2;
text-align: center;
line-height: 24px;
}
#body{
width: 654px;
height: 1000px;
position: relative;
left: 440px;
/* border: 6px solid red; */
}
#logo{
position: absolute;
left:192px ;
height: 129px;
width: 270px;
/* border: 1px solid red; */
background-image: url(./bd_logo1.png);
background-color: aliceblue;
background-size: 270px 129px;
}
#search_box{
position: absolute;
top: 130px;
width:654px;
height:44px;
/* border: 1px solid red; */
}
#search_input{
width:547px;
height:38px;
border:2px solid darkgray;
float:left;
/* background-color: #A9A9A9; */
border-top-left-radius: 10px;
border-bottom-left-radius:10px;
}
#search_button{
width:102px;
height:100%;
font-size:15px;
background-color:#4e6ef2;
color:white;
font-family:"Microsoft YaHei";
border:0px;/*縮小文本框和按鈕框的距離*/
float:left;
border-top-right-radius: 10px;
border-bottom-right-radius:10px;
}
#photo{
width:28px;
height:20px;
position: absolute;
top: 10px;
left: 515px;
background-image: url(./photo.PNG);
background-size: 28px 20px;
}
#hot-search-title{
width: 654px;
height: 24px;
position: absolute;
/* background-color: greenyellow; */
top: 215px;
/* border:2px solid darkgray; */
}
#bai-du-re-ban{
position: absolute;
margin: 0;
left: 2px;
font-size: 15px;
float: left;
}
#huan-yi-huan{
position: absolute;
margin: 0;
right: 0px;
float: left;
height: 25px;
width: 59px;
background-image: url(./huan-yi-huan.PNG);
background-size: 59px 25px;
}
#hot-search-content-wrapper{
position: absolute;
margin: 0;
width: 620px;
height: 200px;
left: -1px;
top: 240px;
/* background-color: #4E71F2; */
}
.left-content{
position: absolute;
width: 310px;
height: 200px;
left: 1px;
/* background-color: red; */
}
.right-content{
position: absolute;
width: 310px;
height: 200px;
padding-left: 20px;
margin-left: 60px;
right: 1px;
/* background-color: red; */
}
.content1{
list-style-type: none;
width: 268px;
height: 15px;
margin-top: 15px;
}
.a{
margin: 0;
}
.text{
margin-left:30px;
font-size: 15px;
}
#re{
position: absolute;
/* margin-left: 100px; */
right: -20px;
width: 20px;
height: 20px;
background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/mark-icon-3@1x-fdb050afea.png);;
}
#img-1{
position: absolute;
/* background-color: red; */
width: 20px;
height: 20px;
text-align: center;
background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_1@1x-d1e660cf3b.png);
}
#img-2{
position: absolute;
/* background-color: red; */
width: 20px;
height: 20px;
text-align: center;
background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png);
}
#img-3{
position: absolute;
/* background-color: red; */
width: 20px;
height: 20px;
text-align: center;
background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_3@1x-676616abe1.png);
}
.img-4{
position: absolute;
/* background-color: red; */
width: 20px;
height: 20px;
text-align: center;
background-image: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_4@1x-8cffd4622f.png);
}
