零基础学前端（五）HTML+CSS实战：模仿百度网站首页

淩亂°似流年 2024-04-22 15:18 67阅读 0赞

> 1. 该篇适用于从零基础学习前端的小白
> 
> 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

##  ##

## 一、实战：将百度网站首页补全 ##

上一篇[零基础学前端（三）重点讲解 HTML-CSDN博客][HTML-CSDN]我们已经将顶部两侧内容已经写完。

### 1. 接下来我们的目标如下图：分析对应的标签已经写在下面图片（我将百度logo涂上马赛克，主要是担心图片违规怕被封掉） ###

![dd8b838146cc47bfba453d5ca83efaad.png][]

<div class="main">
            <div class="logoBox">
                <img class="logo" src="./img/logo.png" />
                <div class="inputBox">
                    <input  />
                    <button>百度一下</button>
                </div>
            </div>
        </div>

做出来的效果图

![40123b2ca5294707b784f0c4cb36558d.png][]

### 2. 确定需要改进的问题 ###

> 1. 那个缝隙不该存在，百度一下按钮，需要靠在 input输入框
> 
> 2. 百度图片的logo 应该在输入框和按钮的中间

![3f20bd98d558429daef1be090791f5de.png][]

### 3. 继续优化细节 ###

> 我们可以看到  
> 1. 按钮 和 输入框 贴近后，虽然高度是一样的，效果上还是有一点偏差  
> 2. 输入框 和 按钮是有圆角的

效果图

![df49712947f34fff94a214a7a322c0f8.png][]

## 二、目标：写百度热搜 ##

这就是接下来我们要写得内容

![ad715a10374a4d9f8c5e3683c82ce33b.png][]

<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;
            }

![3a9c80ec3a4b40c29bf78f2c8477b45c.png][]

##  ##

## 三、将代码上传到csdn，可以下载我的源码 ##

[https://download.csdn.net/download/tengyuxin/88359310][https_download.csdn.net_download_tengyuxin_88359310]

##  ##

## 四、结束语 ##

> 我个人认为初学时，学的内容逻辑简单、思路清晰最重要，所以我只是挑取核心部分，初学者理解后，可直接上手项目，这就是我的思想逻辑。  
> 
> 
> css知识有很多，我不建议初学者去事无巨细的学每个知识点，我的看法是，带着问题，以实践的方式先将我博客逻辑跑通，让你对前端有个整体观念（从基础到最后发布网站，别人可以访问），到时你自己补充剩余**。**

为了加深理解html和css，我又写了一篇HTML+CSS实战主要是模仿QQ首页的纯页面样式编写，来看看吧。

[HTML-CSDN]: https://blog.csdn.net/tengyuxin/article/details/132870805
[dd8b838146cc47bfba453d5ca83efaad.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/e0df07a811a647248a90141d576fa4a5.png
[40123b2ca5294707b784f0c4cb36558d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/659d9660ed98484888f1a55e6983dbfd.png
[3f20bd98d558429daef1be090791f5de.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/b5363b6752604a529cc8fd5e2220cae9.png
[df49712947f34fff94a214a7a322c0f8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/6b8ac5b4f0bf456c958b4c553ea2dcbd.png
[ad715a10374a4d9f8c5e3683c82ce33b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/606f979203a3400d9c9dd05577f72485.png
[3a9c80ec3a4b40c29bf78f2c8477b45c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/22/5a4940e4ce044daba2a599f08b0bdbf8.png
[https_download.csdn.net_download_tengyuxin_88359310]: https://download.csdn.net/download/tengyuxin/88359310