零基础学前端（四）3. 重点讲解 CSS：实战补全百度网站首页

news2024/12/24 18:47:40

1. 该篇适用于从零基础学习前端的小白

2. 初学者不懂代码得含义也要坚持模仿逐行敲代码，以身体感悟带动头脑去理解新知识

3. 初学者切忌，不要眼花缭乱，不要四处找其它文档，要坚定一个教授者的方式，将其学通透，才是好的学习方式。

4. 本篇css我不会讲具体样式如何写，因为这些小细节，你只需搜索自己便可以学会。我侧重于css的核心概念

（盒子模型---认识元素的构成、选择器---找到被操作的元素、flex布局---操作元素位置摆放）

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

上一篇零基础学前端（三）重点讲解 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>

效果图