HTML5综合例子——百度网页

原创于 2025-10-28 10:00:00 发布 · 1.1k 阅读

24 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #前端 #html #综合例子 #css

H5 专栏收录该内容

46 篇文章

订阅专栏

大家好，我是阿赵。
之前学习了很多HTML5的CSS布局的知识。接下来做一个简单的网页例子练手。
百度首页应该是一个比较简单的例子，所以可以先拿这个作为例子做一下。
在这里插入图片描述

一、例子说明

因为这个例子只是使用CSS布局的练手，而百度的网页本身是带有很多功能性的内容的，比如搜索、AI、热点新闻、点击跳转链接等。这些功能很多都是需要编写JavaScript脚本去实现的。所以这个例子会忽略这些功能上的东西，只做布局的实现。
需要注意的是，实际开发中，现在应该已经很少做这种静态页面的布局，基本上布局都是通过JS代码从服务器拿数据然后动态生成。那么我们为什么还需要联系这种静态的CSS布局呢？答案很简单，因为就算我们使用JS代码去输出动态布局，它所使用的还是静态CSS布局的这些方法，只是变成通过代码字符串拼接出来而已。所以如果不懂静态布局，其实也不能动态去生成的。
然后这个网页里面用到的一些图片素材，有大部分都是可以直接从这个网页里面直接下载到的：
在这里插入图片描述

有些图标是使用了字体图标，我本地没有，所以我是直接截图成图片来使用了。有些图片是使用了svg格式的，这个虽然好像我们不能直接编辑，但通过代码调用是可以直接显示的，所以我们可以忽略，具体svg格式是什么可以自行百度一下。
资源方面的问题下面就不再重复了，会都放到img文件夹，直接调用。
然后关于布局的像素和颜色问题，推荐使用一个工具，叫做：FastStone Capture
在这里插入图片描述

它带有很多截图和检测功能，比如比较常用的是丈量像素和拾取颜色：
在这里插入图片描述

在这里插入图片描述

二、布局分析

这个网页虽然简单，但要做出来也要经过一定的分析和细化。
从总体入手，通过盒子模型分析，看看这个网页是由哪几部分组成：
在这里插入图片描述

所以接下来就要根据这个布局，一步一步的细化。

三、整体框架搭建

假设我们已经新建好了网页的文件，然后把美术资源都放在了img文件夹。接下来就可以新建一个index.html文件来做这个过程了。
根据上面步骤的分析，可以直接在body写出代码：

<body>
  <div id="topheader">
    <div id="topLeft">
    </div>
    <div id="topRight">
    </div>
  </div>
  <div id="center">
    <div id="center1">
    </div>
    <div id="center2">
    </div>
    <div id="center3">
    </div>
    <div id="center4">
    </div>
  </div>
  <div id="bottom">
    <div id="bottomCenter">
    </div>
    <div id="bottomRight">
    </div>
  </div>
</body>

这时候由于都是空的div，所以运行是看不到任何内容的，根据习惯，先把这些div用大小和颜色进行填充，让它们变成盒子显示。在head里面加入style标签：

  <style>
    html {
      font-size: 50px;
    }

    a {
      text-decoration: none;
      color: #222;
    }

    a:hover {
      color: #00f;
    }

    #topheader {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      background-color: #cfc8c8;
    }

    #topLeft {
      width: 400px;
      height: 50px;
      background-color: #6b86e7;
    }

    #topRight {
      width: 100px;
      height: 50px;
      background-color: #6b86e7;
    }

    #center {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #f5f5f5;
    }

    #center1 {
      width: 540px;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
      background-color: #f19898;
    }

    #center2 {
      width: 800px;
      height: 100px;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
      background-color: #c3acf0;
    }

    #center3 {
      width: 800px;
      height: 100px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #b9b5c2;
    }

    #center4 {
      width: 760px;
      height: 300px;
      margin-top: 20px;
      background-color: #dde0ee;
    }

    #bottom {
      width: 100%;
      height: 25px;
      position: fixed;
      bottom: 0px;
      background-color: #f59797;
    }

    #bottomCenter {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      background-color: #c2b9f3;
    }

    #bottomRight {
      width: 46px;
      height: 90px;
      position: fixed;
      right: 24px;
      bottom: 56px;
      background-color: #d8c0fd;
    }
  </style>

这时候，可以运行看看了：
在这里插入图片描述

现在看看，大概已经有了各个部分的结构了，接下来只需要逐个部分去实现具体的内容和效果就可以了。
说明：
1、 html的font-size设置为50px，这是按照习惯，当设计稿是750px，然后把页面分成15份时的做法，是做rem的习惯。不过这里并不打算用rem作为布局，只是一个习惯。
2、关于a和a:hover的两个设置，也是处于习惯，先把超链接的下划线去掉，还有一些习惯上的初始化也可以做的比如padding和margin的初始化，不过这里就没写了。
3、盒子之间大部分都是用了flex布局。这个布局写起来会比较的简单，只需要在父级设置display为flex，然后设置横向还是竖向排列就可以了。
4、现在盒子的颜色并不重要，只是为了能让自己看出不同的部位而已，到最后基本都要修改和去掉的。

四、顶部

接下来开始做顶部的部分了。又来分析一下，顶部实际上分为了2个部分：
导航栏
在这里插入图片描述

导航栏都是一些文字的展示，中间有一个ai的图标，点击后会调转超链接。
登录栏
在这里插入图片描述

只有2个选项，一个是设置，另外一个是登录。
所以接下来就逐个来实现了：

1、导航栏

由于是一行显示，所以按道理可以用span就能搞定了，当然也可以用div然后flex布局。
这里就简单一点，直接span：

  <span class="topLeftSpan"><a href="https://www.baidu.com">新闻</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">hao123</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">地图</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">贴吧</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">视频</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">图片</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">网盘</a></span>
  <span class="topLeftSpan"><a href="https://www.baidu.com">文库</a></span>
  <span class="topLeftSpan" id="topLeftAI"><a href="https://www.baidu.com"></a></span>
  <span class=" topLeftSpan"><a href="https://www.baidu.com">更多</a></span>

说明：

超链接a具体的href是什么不重要，因为我们只是做布局。所以这里都写了百度首页的地址，以下所有用到超链接的地方都这样。
定义了一个叫做topLeftSpan的类，这是为了在css里面可以统一的设置这些span里面的样式。
然后由于中间有一个代表ai的图片，所以在ai的那个span里面指定多了一个id，用于特别修改这个ai的图片的。
现在的显示是这样的：

由于html的字体设置了50px，这些新增的内容也还没指定css样式，所以看起来会比较奇怪。
于是开始写它们的css样式了。

    #topheader {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
    }

    #topLeft {
      height: 50px;
      display: flex;
    }

    .topLeftSpan {
      display: inline-block;
      width: 42px;
      height: 45px;
      font-size: 13px;
      text-align: center;
      line-height: 45px;
      margin-left: 10px;
    }

    #topLeftAI {
      background-image: url(img/ai.png);
      background-repeat: no-repeat;
      background-size: 24px 14px;
      background-position: center;
	}

这里把之前设置的背景颜色去掉了，写了topLeftSpan和topLeftAI的样式，现在的显示是这样的：
在这里插入图片描述

2、登录栏

接下来做右上角的登录栏，这里只有2个元素，所以简单一点使用一个span和一个按钮来实现：

<div id="topRight">
  <span class="topLeftSpan"><a href="https://www.baidu.com">设置</a></span>
  <button id="loginBtn">登录</button>
</div>

在没写css布局前，是这样显示的：
在这里插入图片描述

由于设置使用了topLeftSpan，所以直接有了之前设置的样式，但整体的位置和登录的按钮还是不对，所以还需要继续写css样式。

#topRight {
  height: 50px;
  display: flex;
}

#loginBtn {
  background-color: #4e6ef2;
  color: white;
  border: none;
  border-radius: 5px;
  width: 50px;
  height: 26px;
  margin-top: 10px;
  text-align: center;
  margin-left: 25px;
}

首先把右上角的位置给改了，删除了背景颜色，然后给登录按钮设置了底色和圆角，设置了居中和颜色，就得到了这个效果：
在这里插入图片描述

到了现在，顶部基本上做好了：
在这里插入图片描述

五、中部

接下来开始做中间部分，根据之前的分析，逐个部分去做：

1、中1

中间的第一个部分主要是显示这个百度的logo：
在这里插入图片描述

所以直接加一个div用于显示logo的：

<div id="center1">
  <div id="logo"></div>
</div>

指定了一个id叫做logo，专门显示logo，所以css应该指定一个背景图片：

#logo {
  width: 270px;
  height: 129px;
  background-image: url(img/logo.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

这时候的效果是：
在这里插入图片描述

由于之前框架布局的背景颜色，影响了有透明通道的logo，所以要把背景颜色去掉：

#center {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#center1 {
  width: 540px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

现在看起来就比较正常了：
在这里插入图片描述

2、中2

中间第二部分，主要是搜索框：
在这里插入图片描述

然后框里面还有一些其他的内容，于是我们先把框画出来：

#center2 {
  width: 800px;
  height: 100px;
  border: 1px;
  border-color: #8c6cff;
  border-style: solid;
  border-radius: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
}

现在的显示是：
在这里插入图片描述

接下来需要做的是加入这么几个元素：输入文字的框、左边的问AI按钮，右边的附件、图片和百度一下按钮，于是在里面建立对应的input、div和button

<div id="center2">
  <div id="center2-1">
    <input type="text" autocomplete="off" placeholder="请输入搜索内容">
  </div>
  <div id="center2-2">
    <div id="center2-2left">
      <button id="center2-2left-btn"></button>
    </div>
    <div id="center2-2right">
      <button id="center2-2right-btn1"></button>
      <button id="center2-2right-btn2"></button>
      <button id="center2-2right-btn3">百度一下</button>
    </div>
  </div>
</div>

由于没有写css布局，所以现在的显示是：
在这里插入图片描述

接下来给这些内容写css样式：

#center2-1 {
  width: 100%;
  height: 40px;
}

#center2-1 input {
  width: 95%;
  height: 50%;
  font-size: 15px;
  border: none;
  outline: none;
  padding-left: 10px;
  transform: translate(10px, -30px);
}

#center2-2 {
  width: 100%;
  height: 50px;
  transform: translateY(-20px);
  display: flex;
  justify-content: space-between;
}

#center2-2left {
  width: 400;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#center2-2left-btn {
  width: 100px;
  height: 49px;
  background-image: url(img/askAI.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  outline: none;
  transform: translate(10px, 20px);
  background-color: #00000000;
  cursor: pointer;
}

#center2-2right {
  width: 200px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translate(0px, 20px);
}

#center2-2right-btn1 {
  width: 30px;
  height: 30px;
  background-image: url(img/fujian.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  outline: none;
  background-color: #00000000;
  cursor: pointer;
}

#center2-2right-btn2 {
  width: 30px;
  height: 30px;
  background-image: url(img/tupian.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border: none;
  outline: none;
  background-color: #00000000;
  cursor: pointer;
  margin-left: 10px;
}

#center2-2right-btn3 {
  width: 110px;
  height: 47px;
  border: none;
  outline: none;
  border-radius: 20px;
  background-color: #5d71f5;
  cursor: pointer;
  font-size: 18px;
  color: white;
  margin-left: 10px;
}

现在的显示效果是：
在这里插入图片描述

3、中3

中间第3部分显示的是一个快速搜索列栏：
在这里插入图片描述

这里有几个看起来像按钮的东西，可以点击，里面有文字也有图标，所以我打算使用一个叫做center3-Item的类来统一管理这些组件，然后通过center3-Icon来管理显示的图标，并且用center3-1Text来管理这里面出现的文字，于是写出结构：

<div id="center3">
  <div class="center3-Item" id="center3-1">
    <div class="center3-1Text" id="center3-1-1">复杂问题就找文心助手</div>
    <div id="center3-1-2"></div>
    <div id="center3-1-3"></div>
  </div>
  <div class="center3-Item" id="center3-2">
    <div class="center3-Icon" id="center3-2-1"></div>
    <div class="center3-1Text" id="center3-2-2">AI生图</div>
  </div>
  <div class="center3-Item" id="center3-3">
    <div class="center3-Icon" id="center3-3-1"></div>
    <div class="center3-1Text" id="center3-3-2">AI写作</div>
  </div>
  <div class="center3-Item" id="center3-4">
    <div class="center3-Icon" id="center3-4-1"></div>
    <div class="center3-1Text" id="center3-4-2">AI PPT</div>
  </div>
  <div class="center3-Item" id="center3-5">
    <div class="center3-Icon" id="center3-5-1"></div>
    <div class="center3-1Text" id="center3-5-2">生成视频</div>
  </div>
  <div class="center3-Item" id="center3-6">
    <div class="center3-Icon" id="center3-6-1"></div>
    <div class="center3-1Text" id="center3-6-2">更多</div>
    <div class="redPoint"></div>
  </div>
</div>

现在的显示是这样：
在这里插入图片描述

接下来写控制的css样式了：

#center3 {
  width: 800px;
  height: 100px;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center3-1Text {
  margin-top: 10px;
}


.center3-Item {
  height: 38px;
  margin: 0 10px;
  font-size: 14px;
  color: #222;
  cursor: pointer;
  background-color: #f6f7fe;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 0px 10px;
}

.center3-Item:hover {
  background-color: #e6e7f0;
  color: #4e6ef4;
}

#center3-1-2 {
  width: 25px;
  height: 26px;
  background-image: url(img/shouzhi.png);
  transform: translateY(8px);
}

#center3-1-3 {
  width: 70px;
  height: 26px;
  background-image: url(img/askAI2.png);
  transform: translateY(8px);
}

.center3-Icon {
  width: 18px;
  height: 18px;
  background-size: 18px;
  transform: translateY(11px);
  margin-right: 5px;
}

#center3-2-1 {
  background-image: url(img/aitu.png);
}

#center3-3-1 {
  background-image: url(img/aiwrite.png);
}

#center3-4-1 {
  background-image: url(img/aippt.png);
}

#center3-5-1 {
  background-image: url(img/aivedio.svg);
}

#center3-6-1 {
  background-image: url(img/aimore.svg);
}

.redPoint {
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
  position: absolute;
  transform: translate(30px, -1px);
}

说明：

由于在center3-Icon里面指定了图标的大小和位置，所以可以根据id在后面逐个icon指定图片
最后的红点其实就是画了个div，然后用50%的border半径来模拟的
现在显示的样子是：

4、中4

中间第4部分是一个新闻热点的列表：
在这里插入图片描述

这个结构看起来有点复杂，实际上也可以根据盒子拆分，拆成上下2部分，上面部分是百度热搜和换一换，下面是列表。

<div id="center4">
  <div id="center4-1">
  </div>
  <div id="center4-2">
  </div>
</div>

css布局：

#center4-1 {
  width: 100%;
  height: 50px;
  background-color: #bbc6f5;
}

#center4-2 {
  width: 100%;
  height: 200px;
  background-color: #d6dbf9;
}

现在显示是：
在这里插入图片描述

先做上面的部分：

  <div id="center4-1">
    <div id="center4-1-1">
      <div id="center4-1-1-1"></div>
      <div id="center4-1-1-2"></div>
    </div>
    <div id="center4-1-2">
      <div id="center4-1-2-1"></div>
      <div id="center4-1-2-2">换一换</div>
    </div>
  </div>

布局：

#center4 {
  width: 760px;
  height: 300px;
  margin-top: 20px;
}

#center4-1 {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

#center4-1-1 {
  width: 100px;
  height: 50px;
  display: flex;
  justify-content: flex-start;
}

#center4-1-1-1 {
  width: 56px;
  height: 14px;
  background-image: url(img/baidureshou.png);
  background-size: 100% 100%;
}

#center4-1-1-2 {
  width: 18px;
  height: 18px;
  background-image: url(img/jiantou.png);
  background-size: 100% 100%;
  transform: translateY(-3px);
}

#center4-1-2 {
  width: 70px;
  height: 50px;
  display: flex;
  justify-content: space-between;
}

#center4-1-2-1 {
  width: 18px;
  height: 18px;
  background-image: url(img/shuaxin.png);
}

#center4-1-2-2 {
  width: 50px;
  height: 18px;
  font-size: 14px;
  color: #9195A3;
  transform: translateY(-2px);
}

现在的显示是：
在这里插入图片描述

接下来处理列表部分，总共有10条新闻标题，然后第一条是置顶的，然后后面3条分别是第1 、2 、3名，需要单独显示颜色，剩下的就是固定统一颜色。然后后面除了有文字以外，还有一个热或者新的标签。
先做列表，定义一个叫做center4-2-Item的类作为显示新闻的条目的控制：

  <div id="center4-2">
    <div class="center4-2-Item">顶</div>
    <div class="center4-2-Item">1</div>
    <div class="center4-2-Item">2</div>
    <div class="center4-2-Item">3</div>
    <div class="center4-2-Item">4</div>
    <div class="center4-2-Item">5</div>
    <div class="center4-2-Item">6</div>
    <div class="center4-2-Item">7</div>
    <div class="center4-2-Item">8</div>
    <div class="center4-2-Item">9</div>
  </div>

做了10个item，然后写css：

#center4-2 {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.center4-2-Item {
  font-size: 10px;
  width: 360px;
  height: 30px;
  display: inline-block;
  margin: 0px 5px 5px 0px;
  font-size: 24px;
  color: #222;
  cursor: pointer;
  background-color: #f6f7fe;
}

这时候就可以看到列表了：
在这里插入图片描述

接下来的事情就比较简单了，根据一条的内容来实现css样式就行了。如果是实际功能的网页，这里不应该写死新闻标题，应该是动态获取的，这里我们就先忽略这个问题，先写死：

<div id="center4-2">
        <div class="center4-2-Item">
          <div id="center4-2-1-1"></div>
          <div class="center4-2-Text">在赓续传承中推动文化进步</div>
        </div>
        <div class="center4-2-Item">
          <div id="center4-2-2-1" class="center4-2-Number">1</div>
          <div class="center4-2-Text">记者违规拍摄新武器并播出导致涉密</div>
          <div class="tagNew">新</div>
        </div>
        <div class="center4-2-Item">
          <div id="center4-2-3-1" class="center4-2-Number">2</div>
          <div class="center4-2-Text">中方回应美禁止中国航班飞越饿领空</div>
          <div class="tagHot">热</div>
        </div>
        <div class="center4-2-Item">
          <div id="center4-2-4-1" class="center4-2-Number">3</div>
          <div class="center4-2-Text">看民政工作交出暖心成绩单</div>
        </div>
        <div class="center4-2-Item">
          <div class="center4-2-Number">4</div>
          <div class="center4-2-Text">高通被立案调查</div>
          <div class="tagHot">热</div>
        </div>
        <div class="center4-2-Item">
          <div class="center4-2-Number">5</div>
          <div class="center4-2-Text">委内瑞拉：美国可能很快动武</div>
          <div class="tagNew">新</div>
        </div>
        <div class="center4-2-Item">
          <div class="center4-2-Number">6</div>
          <div class="center4-2-Text">中国65岁以上老年人口达2.2亿</div>
          <div class="tagNew">新</div>
        </div>
        <div class="center4-2-Item">
          <div class="center4-2-Number">7</div>
          <div class="center4-2-Text">趵突泉锦鲤胖成"猪鲤"</div>
          <div class="tagHot">热</div>
        </div>
        <div class="center4-2-Item">
          <div class="center4-2-Number">8</div>
          <div class="center4-2-Text">路边这种小果子别捡别吃</div>
          <div class="tagNew">新</div>
        </div>
        <div class="center4-2-Item">
          <div class="center4-2-Number">9</div>
          <div class="center4-2-Text">北方为何雨这么多 还要下多久</div>
          <div class="tagNew">新</div>
        </div>
      </div>

注意，最后做了2个类，分别是tagHot和tagNew，是用于显示“热”和“新”这两个标签的。
然后写css样式：

#center4-2 {
  width: 100%;
  height: 200px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.center4-2-Item {
  font-size: 10px;
  width: 360px;
  height: 30px;
  display: inline-block;
  margin: 0px 5px 5px 0px;
  font-size: 24px;
  color: #222;
  cursor: pointer;
  display: flex;
}

#center4-2-1-1 {
  width: 18px;
  height: 18px;
  background-image: url(img/top.png);
  transform: translate(-4px, 3px);
}

.center4-2-Number {
  font-size: 18px;
  color: #9198BB;
  margin-right: 10px;
}

#center4-2-2-1 {
  color: #FE2D46;
}

#center4-2-3-1 {
  color: #FF6600;
}

#center4-2-4-1 {
  color: #FAA90E;
}

.center4-2-Text {
  font-size: 16px;
}

.center4-2-Text:hover {
  text-decoration: underline;
  color: #4e6ef4;
}

.tagNew {
  width: 18px;
  height: 18px;
  background-color: #FF455B;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  border-radius: 3px;
  margin-left: 10px;
  transform: translateY(3px);
}

.tagHot {
  width: 18px;
  height: 18px;
  background-color: #FF6600;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 18px;
  border-radius: 3px;
  margin-left: 10px;
  transform: translateY(3px);
}

在这里插入图片描述

现在大部分的内容都已经做好了，只剩下底部了。

六、底部

好的，最后把底部也做一下，底部内容不多，只有两个部分。

1、底部信息

在这里插入图片描述

底部信息就是这一列文字了。如果说有什么特殊，就是有些文字是超链接，有些不是。
简单点处理，只做了这些文字，最后的图标和向上的箭头就不做了。

   <div id="bottomCenter">
     <span class="bottomSpan"><a href="https://www.baidu.com">关于百度</a></span>
     <span class="bottomSpan"><a href="https://www.baidu.com">About Baidu</a></span>
     <span class="bottomSpan"><a href="https://www.baidu.com">使用百度前必读</a></span>
     <span class="bottomSpan"><a href="https://www.baidu.com">帮助中心</a></span>
     <span class="bottomSpan"><a href="https://www.baidu.com">企业推广</a></span>
     <span class="bottomSpan"><a href="https://www.baidu.com">京公网安备11000002000001号</a></span>
     <span class="bottomSpan"><a href="https://www.baidu.com">京ICP证030173号</a></span>
     <span class="bottomSpan">京公网安备11010802020772号互联网新闻信息服务许可证11220180008</span>
     <span class="bottomSpan">网络文化经营许可证： 京网文〔2023〕1034-029号</span>
     <span class="bottomSpan"><a href="https://www.baidu.com">信息网络传播视听节目许可证 0110516</a></span>
     <span class="bottomSpan">互联网宗教信息服务许可证编号：京（2022）0000043</span>
</div>

这里定义了一个bottomSpan的类来控制这些内容的样式：

#bottom {
  width: 100%;
  height: 25px;
  position: fixed;
  bottom: 0px;
}

#bottomCenter {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
}

.bottomSpan {
  font-size: 11.25px;
  color: #bbbbbb;
  margin-right: 10px;
}

.bottomSpan a {
  font-size: 11.25px;
  color: #bbbbbb;
}

#bottomRight {
  width: 46px;
  height: 90px;
  position: fixed;
  right: 24px;
  bottom: 56px;
  background-color: #d8c0fd;
}

现在的显示是：
在这里插入图片描述

2、右下角按钮

右下角就只有2个可以点击的图标：
在这里插入图片描述

<div id="bottomRight">
  <div id="bottomRight-1"></div>
  <div id="bottomRignt-2"></div>
</div>

然后写css样式，把背景变成圆角，然后加上两个图标：

#bottomRight {
  width: 46px;
  height: 90px;
  position: fixed;
  right: 24px;
  bottom: 56px;
  background-color: #fbfbfb;
  border-radius: 20px;
}

#bottomRight-1 {
  width: 20px;
  height: 20px;
  background-image: url(img/fuzhu.png);
  background-size: 100% 100%;
  margin: 12px auto 0 auto;
  cursor: pointer;
}

#bottomRignt-2 {
  width: 24px;
  height: 24px;
  background-image: url(img/qcode.png);
  background-size: 100% 100%;
  margin: 20px auto 0 auto;
  cursor: pointer;
}

到这一步，整个页面粗略算是做好了：
在这里插入图片描述

其实还缺一些细节的地方，有兴趣的朋友可以发现一下，然后再修改一下。

完整的html文件如下：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 50px;
    }

    a {
      text-decoration: none;
      color: #222;
    }

    a:hover {
      color: #00f;
    }

    #topheader {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
    }

    #topLeft {
      height: 50px;
      display: flex;
    }

    .topLeftSpan {
      display: inline-block;
      width: 42px;
      height: 45px;
      font-size: 13px;
      text-align: center;
      line-height: 45px;
    }

    #topLeftAI {
      background-image: url(img/ai.png);
      background-repeat: no-repeat;
      background-size: 55% 35%;
      background-position: center;
    }

    #topRight {
      height: 50px;
      display: flex;
    }

    #loginBtn {
      background-color: #4e6ef2;
      color: white;
      border: none;
      border-radius: 5px;
      width: 50px;
      height: 26px;
      margin-top: 10px;
      text-align: center;
      margin-left: 25px;
    }

    #center {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #center1 {
      width: 540px;
      height: 160px;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

    #logo {
      width: 270px;
      height: 129px;
      background-image: url(img/logo.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    #center2 {
      width: 800px;
      height: 100px;
      border: 1px;
      border-color: #8c6cff;
      border-style: solid;
      border-radius: 20px;
      margin-top: 20px;
      display: flex;
      flex-direction: column;
    }

    #center2-1 {
      width: 100%;
      height: 40px;
    }

    #center2-1 input {
      width: 95%;
      height: 50%;
      font-size: 15px;
      border: none;
      outline: none;
      padding-left: 10px;
      transform: translate(10px, -30px);
    }

    #center2-2 {
      width: 100%;
      height: 50px;
      transform: translateY(-20px);
      display: flex;
      justify-content: space-between;
    }

    #center2-2left {
      width: 400;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    #center2-2left-btn {
      width: 100px;
      height: 49px;
      background-image: url(img/askAI.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: none;
      outline: none;
      transform: translate(10px, 20px);
      background-color: #00000000;
      cursor: pointer;
    }

    #center2-2right {
      width: 200px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      transform: translate(0px, 20px);
    }

    #center2-2right-btn1 {
      width: 30px;
      height: 30px;
      background-image: url(img/fujian.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: none;
      outline: none;
      background-color: #00000000;
      cursor: pointer;
    }

    #center2-2right-btn2 {
      width: 30px;
      height: 30px;
      background-image: url(img/tupian.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      border: none;
      outline: none;
      background-color: #00000000;
      cursor: pointer;
      margin-left: 10px;
    }

    #center2-2right-btn3 {
      width: 110px;
      height: 47px;
      border: none;
      outline: none;
      border-radius: 20px;
      background-color: #5d71f5;
      cursor: pointer;
      font-size: 18px;
      color: white;
      margin-left: 10px;
    }

    #center3 {
      width: 800px;
      height: 100px;
      margin-top: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .center3-1Text {
      margin-top: 10px;
    }


    .center3-Item {
      height: 38px;
      margin: 0 10px;
      font-size: 14px;
      color: #222;
      cursor: pointer;
      background-color: #f6f7fe;
      border-radius: 10px;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: flex-start;
      padding: 0px 10px;
    }

    .center3-Item:hover {
      background-color: #e6e7f0;
      color: #4e6ef4;
    }

    #center3-1-2 {
      width: 25px;
      height: 26px;
      background-image: url(img/shouzhi.png);
      transform: translateY(8px);
    }

    #center3-1-3 {
      width: 70px;
      height: 26px;
      background-image: url(img/askAI2.png);
      transform: translateY(8px);
    }

    .center3-Icon {
      width: 18px;
      height: 18px;
      background-size: 18px;
      transform: translateY(11px);
      margin-right: 5px;
    }

    #center3-2-1 {
      background-image: url(img/aitu.png);
    }

    #center3-3-1 {
      background-image: url(img/aiwrite.png);
    }

    #center3-4-1 {
      background-image: url(img/aippt.png);
    }

    #center3-5-1 {
      background-image: url(img/aivedio.svg);
    }

    #center3-6-1 {
      background-image: url(img/aimore.svg);
    }

    .redPoint {
      width: 8px;
      height: 8px;
      background-color: red;
      border-radius: 50%;
      position: absolute;
      transform: translate(30px, -1px);
    }

    #center4 {
      width: 760px;
      height: 300px;
      margin-top: 20px;
    }

    #center4-1 {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
    }

    #center4-1-1 {
      width: 100px;
      height: 50px;
      display: flex;
      justify-content: flex-start;
    }

    #center4-1-1-1 {
      width: 56px;
      height: 14px;
      background-image: url(img/baidureshou.png);
      background-size: 100% 100%;
    }

    #center4-1-1-2 {
      width: 18px;
      height: 18px;
      background-image: url(img/jiantou.png);
      background-size: 100% 100%;
      transform: translateY(-3px);
    }

    #center4-1-2 {
      width: 70px;
      height: 50px;
      display: flex;
      justify-content: space-between;
    }

    #center4-1-2-1 {
      width: 18px;
      height: 18px;
      background-image: url(img/shuaxin.png);
    }

    #center4-1-2-2 {
      width: 50px;
      height: 18px;
      font-size: 14px;
      color: #9195A3;
      transform: translateY(-2px);
    }

    #center4-2 {
      width: 100%;
      height: 200px;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
    }

    .center4-2-Item {
      font-size: 10px;
      width: 360px;
      height: 30px;
      display: inline-block;
      margin: 0px 5px 5px 0px;
      font-size: 24px;
      color: #222;
      cursor: pointer;
      display: flex;
    }

    #center4-2-1-1 {
      width: 18px;
      height: 18px;
      background-image: url(img/top.png);
      transform: translate(-4px, 3px);
    }

    .center4-2-Number {
      font-size: 18px;
      color: #9198BB;
      margin-right: 10px;
    }

    #center4-2-2-1 {
      color: #FE2D46;
    }

    #center4-2-3-1 {
      color: #FF6600;
    }

    #center4-2-4-1 {
      color: #FAA90E;
    }

    .center4-2-Text {
      font-size: 16px;
    }

    .center4-2-Text:hover {
      text-decoration: underline;
      color: #4e6ef4;
    }

    .tagNew {
      width: 18px;
      height: 18px;
      background-color: #FF455B;
      color: white;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      border-radius: 3px;
      margin-left: 10px;
      transform: translateY(3px);
    }

    .tagHot {
      width: 18px;
      height: 18px;
      background-color: #FF6600;
      color: white;
      font-size: 12px;
      text-align: center;
      line-height: 18px;
      border-radius: 3px;
      margin-left: 10px;
      transform: translateY(3px);
    }

    #bottom {
      width: 100%;
      height: 25px;
      position: fixed;
      bottom: 0px;
    }

    #bottomCenter {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
    }

    .bottomSpan {
      font-size: 11.25px;
      color: #bbbbbb;
      margin-right: 10px;
    }

    .bottomSpan a {
      font-size: 11.25px;
      color: #bbbbbb;
    }

    #bottomRight {
      width: 46px;
      height: 90px;
      position: fixed;
      right: 24px;
      bottom: 56px;
      background-color: #fbfbfb;
      border-radius: 20px;
    }

    #bottomRight-1 {
      width: 20px;
      height: 20px;
      background-image: url(img/fuzhu.png);
      background-size: 100% 100%;
      margin: 12px auto 0 auto;
      cursor: pointer;
    }

    #bottomRignt-2 {
      width: 24px;
      height: 24px;
      background-image: url(img/qcode.png);
      background-size: 100% 100%;
      margin: 20px auto 0 auto;
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="topheader">
    <div id="topLeft">
      <span class="topLeftSpan"><a href="https://www.baidu.com">新闻</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">hao123</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">地图</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">贴吧</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">视频</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">图片</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">网盘</a></span>
      <span class="topLeftSpan"><a href="https://www.baidu.com">文库</a></span>
      <span class="topLeftSpan" id="topLeftAI"><a href="https://www.baidu.com"></a></span>
      <span class=" topLeftSpan"><a href="https://www.baidu.com">更多</a></span>
    </div>
    <div id="topRight">
      <span class="topLeftSpan"><a href="https://www.baidu.com">设置</a></span>
      <button id="loginBtn">登录</button>
    </div>
  </div>
  <div id="center">
    <div id="center1">
      <div id="logo"></div>
    </div>
    <div id="center2">
      <div id="center2-1">
        <input type="text" autocomplete="off" placeholder="请输入搜索内容">
      </div>
      <div id="center2-2">
        <div id="center2-2left">