目录
CSS基础知识
前言
准备工作
简单网页的组成部分
案例
浏览器的窗口大小
划分主要部分
固定定位
头部导航（左侧）
头部导航（右侧）
LOGO
编辑搜索框
热搜标题
热搜内容
文字简介
资源
预告和回顾
后话
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.widthscreen.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】