【H2O2|全栈】关于CSS（5）如何制作一个搜索网页的首页？
目录
CSS基础知识
前言
本系列博客将分享层叠样式表（CSS）有关的知识点。
本期补充网页布局的相关内容，以及网页的基本组成部分。我会演示如何制作一个简单的百度搜索首页出来。
因为现在的网页还比较简单，所以本期暂时用不着定位的知识，我会使用一些其他的技巧来弥补没有定位属性带来的问题。
不是专业的科普博主，主打一个分享知识，写的不好，多多包涵（嘿嘿）。
准备工作
软件：【参考版本】Visual Studio Code
推荐VS插件（扩展包）：Open in browser, Live Preview, Live Server
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
简单网页的组成部分
一个简单的网页通常由头部（header）、主体（main）以及底部（footer）组成。头部中通常还会包含头部导航（head-nav）和轮播图（banner），主体也会按照功能划分不同的模块，而底部可能会有一些文字简介和链接。
虽然，现在制作网页一般使用模版来制作，但是在这里我们还是需要了解一下基本的网页制作过程。
案例
浏览器的窗口大小
想要获取浏览器的窗口大小，可以利用浏览器的控制台，输入指定代码实现。
右键打开检查，找到控制台：
输入下面两行代码，分别对应浏览器窗口的宽和高;
screen.width
screen.height以我的电脑为例，在Chrome浏览器的控制台输入上面的代码，显示的窗口尺寸如下：
知道这个尺寸之后，我们对自己制作的页面的最大边界就心中有数了。
划分主要部分
今天我们的案例是仿照百度的首页制作一个简单的搜索首页，最简单的百度首页如下：
*其实完全做的一样也不是不可能，但是我们做的稍微简单一点~*
这个网页简单到只有三个最基础的部分，也就是下面图示的三个部分：
那么，在HTML中首先就要对应下面这一段代码：
<div class="header-wrap"></div>
<div class="main-wrap"></div>
<div class="footer-wrap"></div>wrap是组成的网页的大盒子的最外层，它不设置宽度和高度，因此它默认的宽度为100%，高度由内容撑开。它的作用是帮助我们的内容水平居中。
接下来，我们来设置和内容占据的宽高一致的盒子，用来确定内容的具体位置。
对应的HTML代码如下：
<div class="header-wrap">
<div class="header">
</div>
</div>
<div class="main-wrap">
<div class="main">
</div>
</div>
<div class="footer-wrap">
<div class="footer">
</div>
</div>这里有一个思想，那就是相同功能的代码，我们可以使用同一个选择器包起来，也就是代码复用的思想。
来到CSS部分，首先，使用通配符预设样式，这里暂时先将margin和padding的默认值都设置为0，便于后面调整元素的边距参数：
* {
margin: 0;
padding: 0;
}然后，创建居中和初始宽度格式化的选择器format：
.format {
margin: 0 auto;
width: 654px;
}可能有朋友会有疑问，这个宽度的初始值是什么呢？
其实，它是你自己认为合适的内容宽度大小，一般是设计好的。我这里用的是像素，当然最好是用em（依据父元素字体大小设置）。
然后，把这个选择器加到我们的内容盒子中：
<div class="header-wrap">
<div class="header format">
</div>
</div>
<div class="main-wrap">
<div class="main format">
</div>
</div>
<div class="footer-wrap">
<div class="footer format">
</div>
</div>现在，内容盒子的宽度已经被格式化选择器设定好了，我们还需要设置每个内容盒子自己的高度。
特别的，对于我们头部和底部部分的宽度，它和其他主体部分的宽度明显不同，我们还需要单独给它设置自己的宽度，即自动填满整个浏览器的宽度。
参考数值如下：
.header {
width: 100%;
min-width: 1000px;
min-height: 60px;
}
.main {
height: 2000px;
}
.footer {
width: 100%;
height: 40px;
}其中主体的内容高度暂时随意设置就好，只要能容下所有的内容即可。
设置最小尺寸实际上是为了保证在缩放页面发生变形的时候，盒子缩到一定大小之后就不会被压缩了，保证了其中的内容不会被盒子的变形而“挤出去”。
需要注意的是，其实这里有一个东西我们不得不用到定位的知识，那就是我们的底部区域。所以这里扩展一下固定定位的知识。
固定定位
定位使用的属性是position，直译为位置，用于设置指定元素所处的位置。
还记得我们在HTML入门章节中说的书签的实现吗，里面就用到了定位。
固定定位的属性值为fixed，它可以让特定内容固定在窗口的某个位置，而不是随滚动条的滚动而改变位置。
此外，我们还需要知道和定位相关的四个属性：
| 属性 | 含义 |
|---|---|
| top | 到父元素顶部的距离 |
| bottom | 到父元素底部的距离 |
| left | 到父元素左侧的距离 |
| right | 到父元素右侧的距离 |
对于固定定位而言，所谓父元素就是整个可视窗口。因此，无论怎么拉动滚动条，设置了固定定位的元素总是相对窗口静止的。
=========================================================================
在了解了固定定位有关的知识后，我们将底部的文字简介内容区域添加如下设置：
position: fixed;
bottom: 0;
left: 0;为了方便观看每个区域的大小，可以暂时给各个部分添加背景色，在该区域内容全部完成之后，再将背景色去除或更改为实际需要的背景色。
目前的界面效果如下：
然后，就是具体地看每一个内容对应的小盒子里面的内容了。
头部导航（左侧）
参考的最小尺寸为580px*60px。
由于盒子里的链接离左侧边界还有一点距离，所以加入一个左侧内边距24px。
最重要的是，盒子是始终靠左的，所以还要加入一个向左浮动的效果。
头部导航左侧盒子的HTML代码如下（记得放在header盒子里）：
<div class="header-nav-left"></div>CSS代码如下：
.header-nav-left {
min-width: 580px;
min-height: 60px;
padding-left: 24px;
background: #d1339f;
float: left;
}然后就是放置我们的锚链接标签了。
设置所有a标签的默认文字装饰为none，用于去除下划线。
然后设置所有a标签（等下右侧盒子还要用到）在访问前和访问后的字体颜色都为#222，鼠标悬浮时和激活时字体颜色为#315efb（这个随意，我用的是百度的字体颜色）。
a标签的字体大小设置为13px，行高统一设置为23px。
设置a标签的CSS代码如下：
a {
line-height:23px;
font-size: 13px;
text-decoration: none;
}
a:link,
a:visited {
color: #222;
}
a:hover,
a:active {
color: #315efb;
}然后，为每一个a标签的外侧都分别套一个盒子，用于给a标签确定具体的位置。这个盒子需要被设置为inline-block。
参考的尺寸为margin-top：19px，margin-right：24px。
特别的，还要单独为“更多”所在的盒子设置一个padding-bottom，用于把下方内容撑开。
设置锚链接盒子的CSS代码如下：
.header-nav-left div {
display: inline-block;
margin-top: 19px;
margin-right: 24px;
background: #2cc868;
}
.more {
padding-bottom: 19px;
}这下我们就可以运行起来看看效果了，如果诸位的步骤与我相同，那么出来的应该是这个效果：
链接到的具体网页自己复制一下就好，至于“更多”的悬浮菜单效果，在未来的补充章节里会实现，这里只把总体效果做出来即可。
头部导航（右侧）
接下来制作头部导航右侧的部分，这里包含一个设置的链接和一个登录的按钮。
如法炮制，先把右侧的大盒子的样式设置好。不过注意这一次的盒子左侧还有一个padding，用于给盒子撑起一个最小的宽度。
CSS代码如下：
.header-nav-right {
min-width: 370px;
min-height: 60px;
padding-left: 200px;
padding-right: 24px;
background: #d1339f;
float: right;
}然后，还是要把右侧大盒子里的wrap盒子都设置为inline-block。
对于“设置”的锚链接，样式大致与左边的那十个锚链接样式相同，只不过链接外包裹的盒子需要调节为左侧外边距。
对应的CSS代码如下：
.setting-wrap {
margin-top: 19px;
margin-left: 24px;
}登录按钮本身的尺寸为48px*24px，设置为块标签向右浮动。激活前底色设置为#4e6ef2，激活后底色设置为#315efb。按钮的边框可以设置为none。
这里需要用到border-radius给按钮四个角都设置一个向内移动5px的圆角。
然后给按钮的外面套上一个盒子用于给按钮定位，这个盒子的外边距为上18px，左32px。
不要忘记使用cursor属性为鼠标悬浮设置一个小手图标的效果，属性值为pointer。
最后使用clear盒子（一个设置了clear：both的盒子）把浮动样式给清除即可。
对应的CSS代码如下：
.login-btn-wrap {
margin-top: 18px;
margin-left: 32px;
}
.login-btn {
display: inline-block;
width: 48px;
height: 24px;
background-color: #4e6ef2;
border: none;
border-radius: 5px;
color: #fff;
font-size: 13px;
}
.login-btn:hover {
background-color: #315efb;
cursor: pointer;
}到此，我们就可以把除了按钮颜色以外的所有顶部背景色去除了，效果如下：
LOGO
这个部分相对来说比较简单，相对定位、图片链接等暂时先不做。
注意，还是要用一个大盒子top-logo来包住图片logo，只不过这个大盒子和外面的main内容盒子等宽，作用主要是限定缩放大小和图片居中。
实现的CSS代码如下：
.top-logo {
min-height: 130px;
max-height: 150px;
text-align: center;
}
.logo {
content: url("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png");
width: 270px;
height: 129px;
}这一步实现之后的效果如下：
搜索框
接下来就是制作搜索框了，搜索框其实也分三个部分，输入框、小相机图标和搜索按钮，搜索按钮的搜索功能暂时不实现，这里只实现样式效果。
输入框的尺寸为512px*16px，内部填充为上下12px，左右16px。圆角程度为左上和左下10px。边框粗细为2px，实线，颜色为#c4c7ce。
去掉输入框的右侧，即右边框设置为none。
特别的，在选中这个输入框时，我们还需要让它变为蓝色，设置outline-color属性值为#4e6ef2。
在鼠标悬浮到输入框的上方时，设置颜色为#a7aab5。
然后设置小相机图标，它的雪碧图如下：
利用雪碧图找到灰色小相机，调整图片大小为24px*20px，外边距为上下0，左-40px，右20px，显示出来。并且在鼠标悬浮时，切换为蓝色小相机。
最后是搜索按钮，关于按钮的设置方式其实和上面的登录按钮差不多，就不展开讲了。
完整的搜索框的CSS代码如下：
.search-wrap {
text-align: center;
padding-top: 10px;
}
.search-wrap div {
display: inline-block;
}
.sl-text {
width: 512px;
height: 16px;
vertical-align: middle;
padding: 12px 16px;
border: 2px solid #c4c7ce;
border-right: none;
border-radius: 10px 0 0 10px;
outline-color: #4e6ef2;
}
.sl-text:hover {
border-color: #a7aab5;
}
.camera {
width: 24px;
height: 20px;
margin: 0 20px 0 -40px;
vertical-align: middle;
background-image: url("camera.png");
background-position: 0 -48px;
}
.camera:hover {
background-position: 0 -72px;
}
.sr-btn {
width: 108px;
height: 44px;
line-height: 45px;
margin-left: -15px;
vertical-align: middle;
background-color: #4e6ef2;
border: none;
border-radius: 0 10px 10px 0;
color: #fff;
font-size: 17px;
font-weight: 400;
cursor: pointer;
}这里盒子可能有点多，所以也给出完整的搜索框HTML代码：
<div class="search-wrap">
<div class="search-left">
<input class="sl-text" type="text">
</div>
<div class="camera"></div>
<div class="search-right">
<input class="sr-btn" type="button" value="百度一下">
</div>
</div>到目前位置，我们的百度网页的样子如下：
热搜标题
热搜的那个字体其实可以在字体库里面找，感兴趣的可以自己去找一下。字体大小为14px，如果使用默认字体最好设置一下字体粗细为700。
看到左边标题的那个小箭头了吗，那其实是一个引入的字体图标，我们可以在阿里矢量图标库里面找到我们需要的向右箭头，按照网站提供的引入方式引入，这里就不详细说如何引入了。调整大小为15px*14px，或者按照字体大小直接调整为14px。
我使用的四个图标为：
我使用的是直接下载png的方式，这种方式兼容性比较好，注意要选择正确的颜色的图标。
至于悬浮上去改变颜色，就多下几个对应颜色的图标，然后用hover样式来做就好，这里就不做这个了。
对应的CSS代码为：
.hot-search-wrap {
margin-top: 45px;
}
.hot-search-wrap span {
display: inline-block;
vertical-align: middle;
font: 14px Arial, sans-serif;
font-weight: 700;
}
.hot-search {
float: left;
}
.change {
color: #626675;
float: right;
}
.my-icon {
width: 16px;
height: 16px;
background-size: cover;
}
#right-arrow {
background-image: url("images/右箭头-copy.png");
}
#change-circle {
background-image: url("images/04转换-copy.png");
}对应的HTML代码为：
<div class="hot-search-wrap">
<div class="hot-search">
<span>百度热搜</span>
<span class="my-icon" id="right-arrow"></span>
</div>
<div class="change">
<span class="my-icon" id="change-circle"></span>
<span>换一换</span>
</div>
<div class="clear"></div>
</div>热搜内容
热搜内容这一块可以使用表格来做，制作一个4*3的表格，设置它的宽度为654px，不显示边框，然后调节一下每个单元格的边距即可。
对应的CSS代码如下：
table {
width: 654px;
}
table,td {
vertical-align: middle;
border-collapse: collapse;
border: 1px solid #fff;
padding: 5px;
}
table img {
width: 16px;
height: 16px;
text-align: center;
vertical-align: middle;
}
.type {
width: 16px;
text-align: center;
}
.padding-line {
padding-right: 40px;
}对应的表格HTML代码如下：
<table>
<tr>
<td class="type"><img src="./images/置顶.png" alt=""></td>
<td class="padding-line">置顶新闻</td>
<td class="type rank-3">3</td>
<td class="padding-line">新闻xxxxxx</td>
</tr>
<tr>
<td class="type rank-1">1</td>
<td class="padding-line">新闻xxxxxx<img class="hot-tag" src="./images/热搜疾病.png" alt="">
</td>
<td class="type rank">4</td>
<td class="padding-line">新闻xxxxxx</td>
</tr>
<tr>
<td class="type rank-2">2</td>
<td class="padding-line">新闻xxxxxx</td>
<td class="type rank">5</td>
<td class="padding-line">新闻xxxxxx</td>
</tr>
</table>到此，我们主体部分的内容就全部完成了，去除背景颜色，效果如下：
文字简介
终于到了最后的部分，最底部的文字简介了，这里在缩放之后的效果和百度可能不太一样，但是基本实现就好了。
和顶部一样，同样是使用锚链接来做，不过这里的内容全部居中即可。
锚链接字体大小为12px，默认和访问后的字体颜色为#bbb，鼠标悬浮和激活时字体颜色为#222。
锚链接外侧套的盒子高度为39px，内容垂直居中，右侧外边距为14px。
我并没有把底部所有的标签都做了，想做的可以自己添加，不用更改样式。
底部的CSS代码如下：
.intro {
margin: 0 17px;
text-align: center;
}
.intro div {
display: inline-block;
height: 39px;
margin-top: 8px;
margin-right: 14px;
}
.intro a:link,.intro a:visited {
color: #bbb;
}
.intro a:hover,.intro a:active {
color: #222;
}对应的HTML代码如下：
<div class="intro">
<div class="i-a"><a href="">关于百度</a></div>
<div class="i-a"><a href="">About Baidu</a></div>
<div class="i-a"><a href="">使用百度前必读</a></div>
<div class="i-a"><a href="">帮助中心</a></div>
<div class="i-a"><a href="">企业推广</a></div>
</div>至此，底部的工作也已经完成了，去除背景色，完整效果如下：
资源
本期的网页资源我已经上传在CSDN网站上了，后续可能会和其他项目一起分享到百度网盘中，分享完之后，我会给出下载地址。
预告和回顾
对于百度网页来说，后面会更新一个使用定位制作的版本，比如搜索框里的小相机，可以使用绝对定位来移动到指定位置；并且会讲解图片遮罩变色的原理，以达到鼠标悬浮图标变色的效果。
对CSS感兴趣的朋友，可以看下面的CSS专栏，当前为第五期：
专栏 | CSS入门
http://t.csdnimg.cn/4bvCJ当然，也欢迎对全栈项目感兴趣的朋友查看我的其他专栏，有些专栏已经完结，可以放心查阅。
后话
在全栈领域，博主也只不过是一个普通的萌新而已。本系列的博客主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
==期待与你在下一期博客中再次相遇==
——疑似有点缺氧的【H2O2】
原文地址：https://blog.csdn.net/ZC13786305863/article/details/142257528
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！