1. 该篇适用于从零基础学习前端的小白
2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识
一、实战：将百度网站首页补全
上一篇零基础学前端（三）重点讲解 HTML-CSDN博客我们已经将顶部两侧内容已经写完。
1. 接下来我们的目标如下图：分析对应的标签已经写在下面图片（我将百度logo涂上马赛克，主要是担心图片违规怕被封掉）
<!-- 中间主体内容 -->
<div class="main">
<div class="logoBox">
<img class="logo" src="./img/logo.png" />
<div class="inputBox">
<input />
<button>百度一下</button>
</div>
</div>
</div><style>
/*================================== 主体内容 =======================================*/
.logoBox{
}
.logoBox .logo{
width: 206px;
height: 66px;
}
.inputBox{
}
/* 标签选择器：选中inputBox类下面的input */
.inputBox input{
width: 443px;
height: 42px;
border: 1px solid #ccc;
}
.inputBox button{
background-color: #4E6EF2; /* 设置背景颜色 */
color: #fff; /* 设置文字颜色 */
height: 44px;
border: none;
padding-left: 12px;
padding-right: 12px;
}
</style>做出来的效果图
2. 确定需要改进的问题
1. 那个缝隙不该存在，百度一下按钮，需要靠在 input输入框
2. 百度图片的logo 应该在输入框和按钮的中间
<style>
/* 设置整体居中 */
.logoBox{
display: flex;
flex-direction: column;
align-items: center;
}
/*让按钮贴近input输入框*/
.inputBox button{
margin-left: -10px; /*设置一个负值就方向贴近*/
}
</style>
3. 继续优化细节
我们可以看到
1. 按钮 和 输入框 贴近后，虽然高度是一样的，效果上还是有一点偏差
2. 输入框 和 按钮是有圆角的
<style>
/*让输入框 和 按钮 对其*/
.inputBox{
display: flex;
align-items: center;
}
</style><style>
.inputBox input{
border-radius: 5px 0 0 5px; /*设置圆角：4个值分别代表 左上角、右上角、右下角、左下角*/
}
.inputBox button{
border-radius: 0 5px 5px 0;
}
</style>效果图
二、目标：写百度热搜
这就是接下来我们要写得内容
<div class="hotSearch">
<div class="top">
<div class="leftBox">
<span class="title">百度热搜</span>
<span class="arrow">></span>
</div>
<div class="rightBox">
<img class="refresh" src="./img/refresh.png"/>
<span class="huan">换一换</span>
</div>
</div>
<ol class="info">
<li>杭州亚运会中国队开门红</li>
<li>打造“数字丝绸之路”</li>
<li>美国2009年就开始入侵华为服务器</li>
<li>亚运会今日赛程</li>
<li>12306回应节假日车票涨价</li>
<li>警方钓鱼演练321名大学生上钩</li>
</ol>
</div> /* ============== 热搜部分 =============== */
.hotSearch{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 30px;
}
.hotSearch .top{
display: flex;
justify-content: space-between;
align-items: center;
width: 512px;
}
.hotSearch .top .leftBox{
display: flex;
align-items: center;
cursor: pointer;
}
.hotSearch .top .leftBox .title{
font-weight: 700;
font-size: 14px;
margin-right: 2px;
}
.hotSearch .top .leftBox .arrow{
color: #626675;
}
.hotSearch .top .rightBox{
display: flex;
align-items: center;
cursor: pointer;
}
.hotSearch .top .rightBox .refresh{
width: 16px;
height: 16px;
}
.hotSearch .top .rightBox .huan{
font-size: 14px;
color: #626675;
margin-left: 2px;
}
.hotSearch .info{
font-size: 14px;
width: 512px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.hotSearch .info li{
width: 245px;
margin: 8px 0;
}
三、将代码上传到csdn，可以下载我的源码
https://download.csdn.net/download/tengyuxin/88359310
四、结束语
我个人认为初学时，学的内容逻辑简单、思路清晰最重要，所以我只是挑取核心部分，初学者理解后，可直接上手项目，这就是我的思想逻辑。
css知识有很多，我不建议初学者去事无巨细的学每个知识点，我的看法是，带着问题，以实践的方式先将我博客逻辑跑通，让你对前端有个整体观念（从基础到最后发布网站，别人可以访问），到时你自己补充剩余。
为了加深理解html和css，我又写了一篇HTML+CSS实战主要是模仿QQ首页的纯页面样式编写，来看看吧。
