当前位置：首页 > news >正文

【H2O2|全栈】关于CSS（5）如何制作一个搜索网页的首页？

news 2024/11/15 17:53:14

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>

至此，底部的工作也已经完成了，去除背景色，完整效果如下：