前端第二次作业:
制作百度界面:
https://www.baidu.com/
要求:
模仿制作,相似度达99%。
仿照https://www.runoob.com/css/css-tutorial.html
1、源代码
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="baidu.css">
</head>
<body>
<!--头部开始-->
<div class="header">
<ul class="left">
<li class="li_1"><a href="http://news.baidu.com" target="_blank">新闻</a></li>
<li class="li_1"><a href="https://www.hao123.com?src=from_pc" target="_blank">hao123</a></li>
<li class="li_1"><a href="http://map.baidu.com" target="_blank">地图</a></li>
<li class="li_1"><a href="http://tieba.baidu.com/" target="_blank">贴吧</a></li>
<li class="li_1"><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a></li>
<li class="li_1"><a href="http://image.baidu.com/" target="_blank">图片</a></li>
<li class="li_1"><a href="https://pan.baidu.com?from=1026962h" target="_blank">网盘</a></li>
<li class="li_1" id="more_list">
<div id="more_wrap"> <a href="http://www.baidu.com/more/" target="_blank">更多</a>
<div id="more_box">
<ul>
<li class="more_li">
<img src="images/zhidao.png" alt="">
<div class="tag_more">知到</div>
</li>
<li class="more_li">
<img src="images/baike.png" alt="">
<div class="tag_more">百科</div>
</li>
<li class="more_li">
<img src="images/fanyi.png" alt="">
<div class="tag_more">翻译</div>
</li>
<li class="more_li">
<img src="images/jiankang.png" alt="">
<div class="tag_more">健康</div>
</li>
<li class="more_li">
<img src="images/wenku.png" alt="">
<div class="tag_more">文库</div>
</li>
<li class="more_li">
<img src="images/xueshu.png" alt="">
<div class="tag_more">学术</div>
</li>
<li class="more_li">
<img src="images/yinyue.png" alt="">
<div class="tag_more">音乐</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
<div class="right">
<div id="more_li">
<span class="r_btn1"><a href="">设置</a></span>
<div id="more_menu">
<ul>
<li><a href="">搜索设置</a></li>
<li><a href="">高级搜索</a></li>
<li><a href="">关闭预测</a></li>
<li><a href="">隐私设置</a></li>
<li><a href="">关闭热搜</a></li>
</ul>
</div>
</div>
<a class="r_btn2" href="">登录</a>
</div>
</div>
<!--头部结束-->
<!--主体部分开始-->
<div class="box">
<div>
<div>
<img src="images/baidu_logo.png" alt="百度logo" title="百度一下,你就知道" class="imges">
</div>
<form action="http://www.baidu.com/" target="_blank">
<span>
<input type="text"></input>
<input type="submit" id="submit_size" value="百度一下" /></input>
</span>
</form>
<!-- 百度热搜和换一换 -->
<div class="isindex-wrap">
<div class="hotandchange">
<div class="hotserch">
百度热搜
<span class="r">></span>
</div>
<div class="change">
<span><img src="images/转换.png" class="changeimg"></span>
<span><a href="" class="changeA">换一换</a></span>
</div>
</div>
</div>
</div>
<!-- 热搜内容 -->
<div>
<div class="baiduhot">
<div class="left-hot">
<ul>
<li class="title-content-title">
<span class="top1">1</span>
<a href="https://www.baidu.com/s?wd=%E4%B8%8A%E6%B5%B7%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F88%2B770+%E6%97%A0%E6%AD%BB%E4%BA%A1%E7%97%85%E4%BE%8B&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">上海新增本土88+770 无死亡病例</a>
<span class="re">热</span>
</li>
<li class="title-content-title">
<span class="top2">2</span>
<a href="https://www.baidu.com/s?wd=520&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">520</a>
<span class="xin">新</span>
</li>
<li class="title-content-title">
<span class="top3">3</span>
<a class="title-content c-link c-font-medium c-line-clamp1 tag-width" href="https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD%E9%98%9F%E6%AD%A3%E5%BC%8F%E9%80%92%E8%A1%A5%E4%B8%9C%E4%BA%AC%E5%A5%A5%E8%BF%90%E6%8E%A5%E5%8A%9B%E9%93%9C%E7%89%8C&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">中国队正式递补东京奥运接力铜牌</a>
<span class="re">热</span>
</li>
</ul>
</div>
<div class="right-hot">
<ul>
<li class="title-content-title1">
<span class="other-top">4</span>
<a href="https://www.baidu.com/s?wd=%E4%B8%93%E5%AE%B6%E5%9B%9E%E5%BA%94%E4%B8%8D%E5%BB%BA%E8%AE%AE%E6%8E%8F%E7%A9%BA6%E4%B8%AA%E9%92%B1%E5%8C%85%E5%87%91%E9%A6%96%E4%BB%98&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">专家回应不建议掏空6个钱包凑首付</a>
<span class="xin">新</span>
</li>
<li class="title-content-title1">
<span class="other-top">5</span>
<a href="https://www.baidu.com/s?wd=%E9%83%91%E5%B7%9E%E4%B8%80%E8%80%81%E5%B8%88%E6%BC%8F%E6%8E%8915%E5%90%8D%E8%80%83%E7%94%9F%E9%AB%98%E8%80%83%E6%8A%A5%E5%90%8D&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">郑州一老师漏掉15名考生高考报名</a>
<span class="re">热</span>
</li>
<li class="title-content-title1">
<span class="other-top">6</span>
<a href="https://www.baidu.com/s?wd=%E8%81%94%E5%90%88%E5%9B%BD%EF%BC%9A17%E4%BA%BF%E4%BA%BA%E6%88%96%E9%9D%A2%E4%B8%B4%E7%B2%AE%E9%A3%9F%E5%8D%B1%E6%9C%BA&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">联合国:17亿人或面临粮食危机</a>
<span class="re">热</span>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--主体部分结束-->
<!--底部开始-->
<div class="bottom">
<div class="bottom_l">
<ul>
<li><a href="https://home.baidu.com/" target="_blank">关于百度</a></li>
<li><a href="http://ir.baidu.com" target="_blank">About Baidu</a></li>
<li><a href="https://www.baidu.com/duty" target="_blank">使用百度前必读</a></li>
<li><a href="https://help.baidu.com/" target="_blank">帮助中心</a></li>
<li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001"
target="_blank">京公网安备11000002000001号</a></li>
<li><a href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a></li>
<li><span>©2022Baidu</span></li>
<li><span>互联网药品信息服务资格证书 (京)-经营性-2017-0020</span></li>
<li><a href="http://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</li>
</ul>
</div>
</div>
<!--底部结束-->
</body>
</html>
CSS:
/* 清除默认效果 */
* {
padding: 0;
margin: 0;
color: #222;
}
a {
text-decoration: none;
}
/* 头部导航 */
a:hover {
color: #4e71f2;
}
li {
list-style: none;
}
.header {
height: 60px;
line-height: 60px;
text-align: center;
}
/* 左侧导航栏 */
.header .left {
float: left;
position: absolute;
left: 0px;
top: 0px;
z-index: 100;
padding-left: 24px;
}
.header .li_1 {
float: left;
font: 13px/23px Arial, sans-serif;
color: #222;
position: relative;
margin-right: 24px;
margin-top: 19px;
/* display: inline-block; */
}
/* 右侧导航栏 */
.header .right {
position: absolute;
right: 0px;
top: 0px;
z-index: 100;
height: 60px;
padding-right: 24px;
padding-left: 200px;
float: right;
}
.right #more_li {
color: #222;
position: relative;
margin-right: 24px;
display: inline-block;
font-size: 13px;
}
.header .right .r_btn1 {
display: inline-block;
vertical-align: top;
cursor: pointer;
}
.right #more_menu {
display: none;
position: absolute;
top: 48px;
width: 84px;
line-height: 23px;
text-align: center;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .15);
border-radius: 12px;
}
.right #more_menu li {
margin-top: 9px;
}
#more_li:hover #more_menu {
display: block;
}
.header .right .r_btn2 {
display: inline-block;
margin-top: 19px;
background-color: #4e71f2;
padding-left: 2px;
font-size: 14px;
height: 24px;
width: 48px;
color: #fff;
line-height: 24px;
border-radius: 6px;
}
#more_wrap {
position: relative;
display: block;
}
#more_box {
display: none;
position: absolute;
right: -12px;
top: 30px;
width: 300px;
height: 223px;
line-height: 15px;
text-align: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
border-radius: 12px;
background-color: #fff;
/*box-shadow: 10 10;*/
}
#more_box li {
margin-left: 18px;
}
#more_list:hover #more_box {
display: block;
}
#more_box img {
height: 42px;
width: 42px;
border: 1px solid rgba(0, 0, 0, .03);
border-radius: 12px;
}
.tag_more {
width: 42px;
text-align: center;
}
.more_li {
float: left;
line-height: 24px;
margin-left: 12px;
margin-right: 12px;
margin-top: 16px;
}
/* 主体部分 */
.box {
width: 654px;
height: 44px;
margin: 200px auto 100px;
position: relative;
}
/* 输入框 */
input {
outline: none;
border: 2px solid #a7aab5;
height: 44px;
width: 550px;
box-sizing: border-box;
text-indent: 0px;
font-size: 16px;
border-radius: 10px 0 0 10px;
}
/* 输入框聚焦 */
input:focus {
color: #000;
background-color: #fff;
border-color: #4e6ef2 !important;
height: 90px;
border-radius: 10px 0 10px 10px;
}
/* 百度一下 */
#submit_size {
height: 44px;
width: 108px;
border: none;
color: white;
box-sizing: border-box;
background-color: #4e6ef2;
position: absolute;
left: 550px;
border-radius: 0 10px 10px 0;
cursor: pointer;
}
/* 百度图标 */
.imges {
text-align: center;
display: inline-block;
width: 270px;
height: 129px;
margin-left: -135px;
position: absolute;
top: -140px;
left: 327px;
}
/* 百度热搜和换一换 */
.isindex-wrap {
width: 654px;
height: 24px;
margin-top: 45px;
position: relative;
text-align: left;
}
.hotandchange {
font-size: 14px;
width: 654px;
height: 24px;
text-align: left;
}
.hotserch {
position: relative;
float: left;
font-weight: bold;
line-height: 24px;
}
.r {
color: #8a8a8a;
}
.changeimg {
color: #8a8a8a;
width: 16px;
height: 16px;
}
.change {
position: relative;
color: #8a8a8a;
float: right;
}
.changeA {
color: #8a8a8a;
}
.baiduhot div {
width: 50%;
overflow: hidden;
float: left;
line-height: 32px;
}
.title-content-title {
margin-right: 20px;
float: left;
height: 36px;
line-height: 36px;
font-size: 16px;
}
.title-content-title1 {
margin-left: 20px;
float: left;
height: 36px;
line-height: 36px;
font-size: 16px;
}
.right-hot {
float: right;
line-height: 20px;
}
.top1 {
color: #fe2d46;
}
.top2 {
color: #f60;
}
.top3 {
color: #faa90e;
}
.other-top {
background: 0 0;
color: #9195a3;
}
.re {
display: inline-block;
width: 16px;
height: 16px;
background-color: rgb(255, 102, 0);
color: aliceblue;
font-size: 12px;
text-align: center;
border-radius: 4px;
line-height: 16px;
}
.xin {
display: inline-block;
width: 16px;
height: 16px;
background-color: rgb(255, 69, 91);
color: aliceblue;
font-size: 12px;
text-align: center;
border-radius: 4px;
line-height: 16px;
}
.shang {
background-color: rgba(38, 90, 246, 0.84);
display: inline-block;
width: 16px;
height: 16px;
color: aliceblue;
font-size: 12px;
text-align: center;
border-radius: 4px;
line-height: 16px;
}
/* 底部 */
.bottom {
width: 100%;
height: 40px;
position: fixed;
bottom: 0;
background-color: #fbfbfb;
line-height: 40px;
font-size: 12px;
}
.bottom_l li a {
float: left;
padding-left: 14px;
color: #9195a3;
}
.bottom_l li a:hover {
color: #222;
}
.bottom_l li span {
float: left;
padding-left: 14px;
color: #9195a3;
}
2、效果图