Correcting teacher:天蓬老师
Correction status:qualified
Teacher's comments:仿得不错, 其实百度并不好做的, 科技含量很高, 现在只是仿的静态页面而已
< !DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 引入css样式 -->
<link rel="stylesheet" href="css/index.css" />
<!-- 引入图标 -->
<link rel="stylesheet" href="css/iconfont.css">
<title>仿百度</title>
</head>
<body>
<!-- 页眉 -->
<header>
<ul class="header-left">
<li><a href="#" target="_blank">新闻</a></li>
<li><a href="#" target="_blank">hao123</a></li>
<li><a href="#" target="_blank">地图</a></li>
<li><a href="#" target="_blank">视频</a></li>
<li><a href="#" target="_blank">贴吧</a></li>
<li><a href="#" target="_blank">学术</a></li>
<li><a href="#" target="_blank">更多</a></li>
</ul>
<div class="header-right">
<a href="">抗击疫情</a>
<span>设置</span>
<a href="">登录</a>
</div>
</header>
<!-- 中间 -->
<div class="logo">
<a href=""><img src="logo1.png" alt=""></a>
</div>
<div class="search">
<span class="iconfont icon-xiangji1 zx" ></span>
<input type="text" name="" />
<a href="">百度一下</a>
</div>
<!-- 榜单区 -->
<div class="hot-head">
<a href="" class="hot-title">百度热搜榜</a>
<a href="" class="hot-change">
<span class="iconfont icon-zhuanhuan- zh"></span>
<span>换一换</span>
</a>
</div>
<div class="hot-list">
<div class="hot-left">
<ul>
<li>
<span class="iconfont icon-1_square_solid number1"></span>
<a href="">90后姑娘熬夜战疫胖了十几斤</a>
<span class="iconfont icon-re1 re1" ></span>
</a>
</li>
<li>
<span class="iconfont icon-2_square_solid number2"></span>
<a href="#">大碗宽面的姐姐们评论张萌</a>
<span class="iconfont icon-xin1 xin1"></span>
</li>
<li>
<span class="iconfont icon-3_square_solid number3"></span>
<a href="#">教育部给本科教学打分</a>
</li>
</ul>
</div>
<div class="hot-right">
<ul>
<li>
<span class="iconfont icon-4_square_solid number4"></span>
<a href="">全国人大代表申纪兰逝世</a>
</a>
</li>
<li>
<span class="iconfont icon-5_square_solid number4"></span>
<a href="#">北京新增14例确诊病例</a>
</li>
<li>
<span class="iconfont icon-6_square_solid number4"></span>
<a href="#">快乐大本营选常驻新人</a>
</li>
</ul>
</div>
</div>
<!-- 页脚 -->
<footer>
<div class="footer-left">
<a href="" target="_blank">设为首页</a>
<a href="" target="_blank">关于百度</a>
<a href="" target="_blank">About Baidu</a>
<a href="" target="_blank">百度营销</a>
<a href="" target="_blank">使用百度前必读</a>
<a href="" target="_blank">意见反馈</a>
<a href="" target="_blank">帮助中心</a>
</div>
<div class="footer-right">
<span>©2020 Baidu (京)-经营性-2017-0020</span>
<a href="">京公网安备11000002000001号</a>
<span>京ICP证030173号</span>
</div>
</footer>
</body>
</html>
* {
/* 初始化样式 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 去a标签除下划线 */
a {
text-decoration: none;
font-size: 13px;
color: #222;
}
li {
list-style: none;
}
/* 设置为弹性容器,并垂直排列 */
html,
body {
display: flex;
flex-direction: column;
height: 100%;
}
/* 头部区域 */
header {
display: flex;
min-width: 1265px;
height: 60px;
align-items: center;
/* 水平方向靠两边排列 */
justify-content: space-between;
}
/* 左边部分 */
header > .header-left {
display: flex;
/* 居中对齐 */
align-items: center;
height: 60px;
/* 左外边距20px */
margin-left: 20px;
}
header > .header-left > li > a {
padding: 0 15px;
}
header > .header-left > li > a:hover {
color: #4e71f2;
}
/* 右边部分 */
header > .header-right {
display: flex;
/* 居中对齐 */
align-items: center;
height: 60px;
/* 左外边距20px */
margin-right: 23px;
}
header > .header-right > a,
span {
padding: 3px 14px;
font-size: 13px;
}
header > .header-right > a:first-of-type {
color: #f63051;
}
header > .header-right > a:first-of-type:hover {
color: #4e71f2;
}
header > .header-right > a:last-of-type {
background-color: #4e71f2;
border-radius: 6px;
height: 25px;
color: #eef2fe;
margin: 0 10px;
}
header > .header-right > span:hover {
color: #4e71f2;
}
/* logo部分 */
.logo {
display: flex;
align-content: center;
margin: 0 auto;
}
.logo > a > img {
height: 129px;
width: 270px;
}
/* 搜索区 */
.search {
display: flex;
justify-content: center;
line-height: 44px;
position: relative;
}
.search > input {
width: 546px;
height: 44px;
border: 2px solid #a7aab5;
border-right: none;
border-radius: 10px 0 0 10px;
}
/* 定位后通过反向高度和内边距撑开到想要的位置 */
.search > span {
position: absolute;
/* border: 1px solid red; */
padding-left: 400px;
top: -25%;
}
/* 设置照相机图标大小颜色 */
.search > .zx {
font-size: 25px;
color: #a7aab5;
}
.search > a {
height: 44px;
width: 108px;
text-align: center;
background-color: #4e6ef2;
color: #eef2fe;
font-size: 17px;
border-radius: 0 15px 15px 0;
}
/* 鼠标悬停样式 */
.search > a:hover {
background-color: #4662d9;
}
.search > .zx:hover {
color: #4e6ef2;
}
.search > input:hover {
border: 2px solid #626675;
border-right: none;
}
/* 热搜区 */
.hot-head {
width: 654px;
display: flex;
/* 主轴为水平靠两端边对齐排列 */
justify-content: space-between;
margin: 25px auto;
}
.hot-head > a:first-of-type {
font-size: 14px;
}
.hot-head > a > span:last-of-type {
font-size: 13px;
color: #9195a3;
/* 字体变细 */
font: 400;
}
.hot-head > a > .zh {
font-size: 16px;
color: #9195a3;
margin-right: -28px;
}
/* 列表区 */
.hot-list {
display: flex;
width: 654px;
height: 100%;
margin: 5px auto;
}
/* 右边 */
.hot-list > .hot-left {
display: flex;
flex-grow: 1;
margin-right: 50px;
}
.hot-list > .hot-left > ul > li {
padding-top: 10px;
}
.hot-list > .hot-left > ul > li > a {
font-size: 14px;
line-height: 20px;
text-align: center;
}
/* 左边 */
.hot-list > .hot-right {
display: flex;
flex-grow: 1;
}
.hot-list > .hot-right > ul > li {
padding-top: 10px;
}
.hot-list > .hot-right > ul > li > a {
font-size: 14px;
line-height: 20px;
text-align: center;
}
/* 鼠标悬停样式 */
.hot-list > .hot-left > ul > li > a:hover {
color: #4e6ef2;
}
.hot-list > .hot-right > ul > li > a:hover {
color: #4e6ef2;
}
/* 图标样式 */
.hot-list > .hot-left > ul > li > .number1 {
color: #fcd533;
}
.hot-list > .hot-left > ul > li > .re1 {
color: #faab06;
}
.hot-list > .hot-left > ul > li > .number2 {
color: #b9d5f3;
}
.hot-list > .hot-left > ul > li > .xin1 {
color: #ff4589;
}
.hot-list > .hot-left > ul > li > .number3 {
color: #ead1bb;
}
.hot-list > .hot-right > ul > li > .number4 {
color: #9195a3;
}
/* 页脚区 */
footer {
display: flex;
min-width: 1265px;
height: 40px;
align-items: center;
justify-content: space-between;
background-color: #fafafa;
}
/* 页脚区 */
footer > .footer-left {
margin-left: 14px;
}
footer > .footer-left > a {
font-size: 12px;
color: #9e95ad;
padding: 13px;
}
footer > .footer-right {
margin-right: 14px;
}
footer > .footer-right > a,
span {
font-size: 12px;
color: #9e95ad;
padding: 13px;
}
/* 鼠标悬停样式 */
footer > .footer-left > a:hover {
color: #000;
}
footer > .footer-right > a:hover {
color: #000;
}
总结:flex布局可以快速让页面向两边靠边对齐。弹性布局中定位使用不太掌握。目前只能写简单页面,复杂的还要多学习下。多后面要多练习写几个其他网页,争取让自己多熟练一点。页面小小,代码不少。要想掌握,还需练好。