1. This article is suitable for beginners who are learning front-end from scratch.
2. Beginners who don’t understand the meaning of code should insist on imitating and typing code line by line, and use physical insights to drive their minds to understand new knowledge.
1. Practical combat: Complete the homepage of Baidu website
In the previous article, Learning the Front-End from Zero Basics (3) Focusing on HTML-CSDN Blog, we have already written the content on both sides of the top.
1. Next, our goal is as follows: analyze the corresponding tags that have been written in the picture below (I painted the Baidu logo with mosaic, mainly because I am worried that the picture violates the rules and will be blocked)
<!-- 中间主体内容 -->
<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>The renderings made
2. Identify issues that need improvement
1. That gap should not exist. When Baidu clicks the button, it needs to lean against the input box.
2. The logo of Baidu pictures should be between the input box and the button
<style>
/* 设置整体居中 */
.logoBox{
display: flex;
flex-direction: column;
align-items: center;
}
/*让按钮贴近input输入框*/
.inputBox button{
margin-left: -10px; /*设置一个负值就方向贴近*/
}
</style>
3. Continue to optimize details
We can see that
1. After the button and the input box are close to each other, although the height is the same, there is still a slight deviation in the effect.
2. The input box and the button have rounded corners.
<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>renderings
2. Goal: Write Baidu Hot Search
This is what we are going to write next
<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;
}
3. Upload the code to csdn, you can download my source code
https://download.csdn.net/download/tengyuxin/88359310
4. Conclusion
I personally think that when you are a beginner, the most important thing is to learn content with simple logic and clear ideas, so I just select the core parts. After beginners understand it, they can start the project directly. This is my thinking logic.
There is a lot of css knowledge. I don’t recommend beginners to learn every knowledge point in detail. My opinion is to run through the logic of my blog in a practical way with questions to give you an overall idea of the front-end. (From the basics to the final published website, others can access it), and you will make up the rest by yourself .
In order to deepen my understanding of html and css, I wrote another HTML+CSS practical article, which mainly imitates the pure page style of QQ homepage. Let’s take a look.