企业官网建设流程全解析

🔥keyipatience:个人主页

🎬作者简介：C/C++后端开发学习者

🌟专栏传送门：《c++》《linux》《c++高阶数据结构》《c++数据结构与算法》《前端学习》

⭐️patience is key in life

元素显示模式

一共 3 大类：块级、行内、行内块，核心看能不能宽高、占多少位置

1. 块级元素 block

特点：

1. 独占一行，后面元素自动换行
2. 可以设置 width、height、margin、padding
3. 默认宽度：撑满父容器 100%

常见标签：div、p、h1~h6、ul、li

display: block;

2. 行内元素 inline

特点：

1. 不独占一行，多个并排写在同一行
2. 不能设置宽高，宽高由文字内容决定
3. 只有水平方向 margin/padding 生效，垂直方向会有奇怪问题

常见标签：span、a、em

display: inline;

3. 行内块 inline-block

特点：

1. 不独占一行，可以多个并排
2. 能设置宽高、内外边距

常见标签：img、input

display: inline-block;

总结：

• block：独占一行，能设宽高
• inline：同行排列，不能设宽高
• inline-block：同行排列，能设宽高

一段代码看出3者区别：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> .block{ display:block; width:200px; height:80px; background:#6cf; } .inline{ display:inline; width:200px;/*无效*/ height:80px;/*无效*/ background:orange; } .inlineblock{ display:inline-block; width:200px; height:80px; background:#7f7; vertical-align: top; /* 关键！顶部对齐，消除错位 */ } </style> </head> <body> <div class="block">block块级1</div> <div class="block">block块级2（自动换行到下一行）</div> <br> <span class="inline">inline行内1</span> <span class="inline">inline行内2（并排，宽高失效）</span> <br> <div class="inlineblock">inline-block1</div> <div class="inlineblock">inline-block2（同一行，宽高生效）</div> </body> </html>

vertical-align

作用：行内 / 行内块元素（inline和inline-block)的垂直对齐

对象：inline和inline-block！！

inline-block是行内排版，浏览器默认按文字基线对齐，不是按盒子顶部对齐！ 两个绿色盒子高度一样，但是文字位置不同，基线位置不一样，所以上下错开。！block 没有这个问题。

基线：文字底部那条看不见的线。浏览器会把所有行内 / 行内块元素，对齐到这条基线。

可用的常用值

• baseline默认：基线对齐（文字底部那条看不见的线，绿色盒子错开的原因）

• top：元素顶部对齐
• middle：中线对齐
• bottom：底部对齐

使用 display 属性可以修改元素的显示模式. 可以把 div 等变成行内元素, 也可以把 a , span 等变成块级元素.

display: block 改成块级元素 [常用]这个时候改width,height就有效了

display: inline 改成行内元素 [很少用]

display: inline-block 改成行内块元素

eg：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* a{ display: block; } */ </style> </head> <body> <a href="#">链接1</a> <a href="#">链接2</a> </body> </html>

加上display: block后：

盒模型

盒子从内 → 外顺序：内容content→padding内边距→border边框→margin外边距

一段代码分清楚4个位置：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> .wrap{ margin:40px; /* 👉 最外面白色空白：margin外边距 */ border:8px solid black;/* 👉 黑色粗线：border边框 */ padding:40px; /* 👉 绿色区域：padding内边距 */ background:#2ecc71; width:300px; height:180px; box-sizing:border-box; } .content{ width:100%; height:100%; background:#3498db; /* 👉 蓝色区域：内容content，放文字 */ } </style> </head> <body> <div class="wrap"> <!--外层大盒子：绿色padding + 黑色border --> <div class="content">文字内容</div> <!--内层小盒子：蓝色内容区 --> </div> </div> </body> </html>

border 三条拆分属性

• border-width：边框粗细
• border-style：边框类型 solid 实线 /dashed 虚线 /dotted 点线
• border-color：边框颜色

简写：border:1px solid red;顺序随便写。

也可以单独修改四个方向的任意一个边框

border-top/bottom/left/right

边框会撑大盒子

情况 1：浏览器默认（不加 box-sizing）

你写代码：

div{ width:500px; height:250px; border:10px solid black; }

width:500px只代表蓝色内容区域，边框是额外加上去的，左右各加 10px 盒子实际宽度 = 500 + 10 +10 =520px边框会把盒子撑大！

就像画一个 500 宽的纸，然后在纸外面再贴一圈 10px 粗的黑边框，整体变宽了。

情况 2：加上 box-sizing:border-box

div{ width:500px; height:250px; border:10px solid black; box-sizing:border-box; }

width:500px是整个盒子最外边缘总宽度，包含 border+padding，不会往外变大。 盒子整体永远就是 500px，不会被边框撑大。

eg：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> .box{ width:200px; height:100px; border:10px solid red; background:#9cf; margin-bottom:30px; } .box2{ width:200px; height:100px; border:10px solid red; background:#9cf; box-sizing:border-box; } </style> </head> <body> <div class="box">盒子1：默认，被边框撑大</div> <div class="box2">盒子2：border-box，不会撑大</div> </body> </html>

对比展示：

两个盒子代码写的 width 都是 200px

1. 盒子 1：实际宽度 = 200 + 10*2 = 220px，更宽
2. 盒子 2：整体宽度固定 200px，边框占在内部

padding 内边距

padding：内容 和 边框中间的距离（盒子里面的留白）

分开写 4 个方向

• padding-top上边内边距
• padding-bottom下边内边距
• padding-left左边内边距
• padding-right右边内边距

padding: 5px; /* 四个方向全部 5px */ padding: 5px 10px; /* 上下5px，左右10px */ padding: 5px 10px 20px; /* 上5px，左右10px，下20px */ padding: 5px 10px 20px 30px;/* 上5 右10 下20 左30 顺时针 */

padding 也会撑大盒子！

div{ width:300px; height:200px; padding-top:5px; padding-left:10px; }

默认状态下： 原本盒子 300×200，加上 padding 之后，盒子变宽变大，变成 310×205。和 border 一样，box-sizing:border-box可以让 padding 不会撑大盒子

margin 外边距

margin：盒子外面的空白，用来控制盒子和别的盒子之间距离

四个单独写法：

• margin-top盒子上方外面距离
• margin-bottom盒子下方外面距离
• margin-left盒子左侧外面距离
• margin-right盒子右侧外面距离

margin简写规则和 padding 完全一样（顺时针：上 右 下 左）

margin: 10px; /* 四个方向外边距都是10px */ margin:10px 20px; /* 上下10px，左右20px */ margin:10px 20px 30px;/* 上10，左右20，下30 */ margin:10px 20px 30px 40px; /* 上10 右20 下30 左40 */

块级元素水平居中

margin:0 auto的条件：块级元素（block） +元素本身有确定宽度

.box{ width: 200px; /* 必须写宽度！！ */ margin: 0 auto; }

解释

1. margin:0 auto：左右外边距自动分配剩余空间
2. 前提条件：必须设置 width

如果不写 width，块默认占满整行，本身就没有多余空间可以居中

对比：text-align:center是让盒子里面的文字 / 行内元素居中，不能让这个块盒子居中。

去除浏览器默认样式

浏览器会给元素加上一些默认的样式, 尤其是内外边距. 不同浏览器的默认样式存在差别. 为了保证代码在不同的浏览器上都能按照统一的样式显示, 往往我们会去除浏览器默认样式. 使用通配符选择器即可完成这件事情.

* { marign: 0; padding: 0; }

弹性布局

初体验 创建一个 div, 内部包含三个 span

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Flex初体验</title> <style> div { width: 100%; height: 150px; background-color: red; /* 第2步打开弹性，取消注释看效果 */ /* display: flex; */ /* 第3步，打开这个 */ /* justify-content: space-around; */ /* 第4步，换成这个 */ /* justify-content: flex-end; */ } div>span { background-color: green; width: 100px; } </style> </head> <body> <div> <span>1</span> <span>2</span> <span>3</span> </div> </body> </html>

分步效果

1.初始（无 flex）span是行内元素，width:100px不生效，绿色只包住文字，三个紧贴

2.给 div 加上display:flex;父盒子开启弹性，子 span 直接变成弹性项目此时width:100px生效！span 拥有宽高，并排排在最左边。

变成弹性项目后，不再受行内元素限制，宽高可以生效。（效果和display inline-block)一样

3.再加justify-content: space-around;主轴分配空间：左右两边也有空白，每个元素两边都有相等空隙，三个绿色盒子均匀散开。

4.改成justify-content: flex-end;全部子元素跑到主轴右侧（右边对齐）

Flex 基础概念

flex 是 flexible box 的缩写. 意思为 "弹性盒子". 任何一个 html 元素, 都可以指定为 display:flex 完成弹性布局.

flex 布局的本质是给父盒子添加 display:flex 属性, 来控制子盒子的位置和排列方式.

基础概念:

1.被设置为 display:flex 属性的元素, 称为 flex container

2.它的所有子元素立刻称为了该容器的成员, 称为 flex item

3.flex item 可以纵向排列, 也可以横向排列, 称为 flex direction(主轴)

使用前，一定要确定主轴方向

• row默认：主轴水平，从左往右排
• column：主轴垂直，从上往下排

父盒子写了display:flex，子元素变成弹性项目 flex item这时子身上这 3 个属性直接不起任何作用：float、clear、vertical-align

1. float（浮动）失效就算子写float:left，浏览器直接忽略。 弹性盒子自有一套排列规则，不再使用浮动布局。
2. clear（清除浮动）失效clear 本来用来解决浮动带来的高度塌陷，弹性布局根本不用浮动，所以 clear 没用。
3. vertical-align 失效【重点！】vertical-align原本是给行内 / 行内块（inline和inline-blcock)用来上下对齐的。 一旦变成弹性项目，vertical-align 直接作废。 不能用 vertical-align 控制弹性子盒子垂直对齐 弹性布局垂直居中用父盒子的align-items: center

常用属性 justify-content

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>justify-content全部取值演示</title> <style> .wrap{ width:600px; height:160px; background:#cccccc; display:flex; /* 修改下面这一行，切换5个值看效果 */ justify-content: flex-start; } .item{ width:100px; height:100px; background:lightgreen; text-align:center; line-height:100px; } </style> </head> <body> <div class="wrap"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> </div> </body> </html>

space-between：

space-around：

align-items 讲解

主轴水平（默认flex-direction:row）时： justify-content →水平（主轴）align-items →垂直（侧轴 / 交叉轴）

align-items 没有 space-between / space-around！

对比：

1. align-items：单行弹性，控制一行内子元素交叉轴对齐
2. align-content：多行弹性（flex-wrap:wrap 换行后），控制多行整体分布，才有space-between/space-around

一段代码看4 个取值效果（align-items）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>align-items全部取值演示</title> <style> /* 父盒子：弹性容器 flex container */ .father{ width:500px; height:300px; background:#ccc; display:flex; /* 开启弹性布局，子元素变成弹性项目 */ justify-content:center; /* 主轴（水平）居中 */ /* 改这里切换4种效果：stretch / center / flex-start / flex-end */ /* align-items：控制【单行】子元素在交叉轴(垂直)上的对齐方式 */ align-items: stretch; } /* 子盒子：弹性项目 flex item */ .son{ width:80px; /* 去掉下面height，stretch拉伸效果才会出现 */ /* 如果子不设置height，stretch会把子高度拉伸填满父盒子 */ height:80px; background:orange; margin:0 5px; /上下不留空隙，左右各留 5px 空隙/ text-align:center; /* 文字水平居中 */ line-height:80px; /* 文字垂直居中，和盒子高度一样 */ } </style> </head> <body> <!-- 父容器father，里面3个子盒子 --> <div class="father"> <div class="son">1</div> <div class="son">2</div> <div class="son">3</div> </div> </body> </html>

注意上面的代码都先控制了 justify-content:center即水平居中;

1.align-items: stretch默认

子不写 height，自动拉高填满父盒子高度；子写 height 则拉伸失效 ✅ 测试方法：注释掉.son的height:80px;

无height：

有height：

2.align-items: center

子盒子在侧轴（垂直方向）居中，最常用垂直居中

3.align-items: flex-start

全部子盒子贴在父盒子顶部

4.align-items: flex-end

全部子盒子贴在父盒子底部

问题怎么将一张图片水平居中？

现在如果将图片水平居中就可以有3种方式

方法 1：父盒子text-align: center（最常用）

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <style> .father{ text-align:center; } </style> </head> <body> <div class="father"> <img src="test.jpg" alt=""> </div> </body> </html>

方法 2：图片设置display:block; margin:0 auto;

img默认是行内块 inline-block，自带图片本身的宽高（明确了width）

把图片转为块级元素，再用块居中方案

img{ display:block; margin:0 auto; }

方法 3：Flex 弹性布局（推荐，同时可以垂直居中）

父盒子开 flex，justify-content:center

.father{ display:flex; justify-content:center; }

link 标签

<link>是单标签，写在<head>里面，用来引入外部资源。 最常用：引入外部 CSS 样式文件和设置网页小图标

<link rel="属性" href="文件地址">

两个核心属性：

1.rel：relationship，当前引入的文件和这个 html 是什么关系

• stylesheet= 样式表
• 含义：href 指向的文件，是 CSS 样式表，浏览器读到就当成 CSS 加载，用来美化页面

• icon= 图标
• 含义：href 指向的图片，是网页标签页小图标（浏览器左上角那个小图标）

2.href：资源路径（本地文件 / 网络网址）

1. 引入外部 CSS（最常用）

<link rel="stylesheet" href="style.css">

2.设置网页小图标（favicon，浏览器标签左上角图标）

<link rel="icon" href="./favicon.ico">

广告板实现：

要求：

效果：

代码实现：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 最外层大盒子：广告板整体容器 */ .box{ width: 308px; /* 盒子宽度308px */ height: 204px; /* 盒子高度204px */ border: #d8dad8 solid 1px; /* 边框：颜色#d8dad8，实线，1px粗细（你原来写10px会很粗，改成1px） */ background-color: #fcfffc; /* 盒子背景色 */ } /* 标题区域 广告板 */ .title{ height: 40px; /* 标题盒子高度40px */ border-bottom: 2px dotted #e8ebe8; /* 下边框：圆点虚线，颜色#e8ebe8 */ padding-left:20px; /* 文字距离左边20px（内边距） */ color:#9e9d9a; /* 标题文字颜色 */ font-size:18px; /* 标题文字大小18px */ line-height:40px; /* 行高等于高度，文字垂直居中 */ } /* 正文内容区域 */ .item{ font-size:16px; /* 正文字号16px */ color:#898b76; /* 正文文字颜色 */ padding-left: 25px; /* 文字距离左侧25px */ line-height: 28px; /* 行高28px，控制每行文字间距 */ padding-top: 10px; /* 内容距离标题下方，上方内边距10px */ } </style> </head> <body> <!-- 广告板外层盒子 --> <div class="box"> <!-- 标题 --> <div class="title">广告板</div> <!-- 正文内容 --> <div class="item"> 赔钱清仓甩卖, 全场一律八折优惠!<br> 赔钱清仓甩卖, 全场一律八折优惠!<br> 赔钱清仓甩卖, 全场一律八折优惠!<br> 赔钱清仓甩卖, 全场一律八折优惠! </div> </div> </body> </html>

热榜显示：

效果展示：

代码：

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <!-- 兼容旧版IE浏览器 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 视口设置，适配移动端 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>百度热榜</title> <!-- 引入阿里图标库css文件，提供刷新字体图标 --> <link rel="stylesheet" href="https://at.alicdn.com/t/c/font_5242802_2yx3j8n7y97.css"> <style> /* 全局清除样式，重置默认边距，统一盒模型 */ * { margin: 0; padding: 0; box-sizing: border-box; } table { width: 536px; border-collapse: collapse; /* 合并表格边框，消除单元格之间缝隙 */ } /* 表头单元格样式 */ th { font-size: 20px; font-weight: bold; padding-bottom:10px; } /* 第一列：热榜标题，占表格宽度80%，文字左对齐 */ .col-1 { width: 80%; text-align: left; } /* 第二列：热度，占表格宽度20%，文字居中 */ .col-2 { width: 20%; text-align: center; } /* "换一换"链接样式 */ .change { color: #0055db; text-decoration: none; /* 取消a标签默认下划线 */ font-size:20px; } /* 鼠标悬浮在换一换链接，添加下划线 */ .change:hover { text-decoration: underline; } /* 阿里字体图标样式 */ .iconfont { font-size:20px; /* iconfont图标是特殊字体，每一个图标对应一个文字字符，所以用font-size控制大小 */ vertical-align: middle; /* 和同行文字垂直居中对齐 */ margin-left:4px; /* 图标和前面文字拉开一点距离 */ } /* 表格内容单元格 */ td { font-size:18px; padding:15px 0; /* 上下内边距，撑开行高 */ border-bottom: 2px solid #f3f3f3; /* 底部灰色分割线 */ } /* 排名序号方块通用样式，行内块可以设置宽高 */ .num { display:inline-block; width:20px; height:20px; color:#fff; /* 序号文字白色 */ text-align:center; /* 文字水平居中 */ line-height:20px; /* 行高等于盒子高度，文字垂直居中 */ margin-right:8px; /* 序号方块 和 标题文字 间隔8px */ } /* 第1名红色背景 */ .num1 { background-color:#f54545; } /* 第2名橙色背景 */ .num2 { background-color:#ff8547; } /* 第3名黄色背景 */ .num3 { background-color:#ffac38; } /* 第四名及以后蓝色背景 */ .num-other { background-color:#8eb9f5; } /* 热榜标题链接 */ .title-link { color:#0055db; text-decoration:none; } /* 鼠标悬浮标题，出现下划线 */ .title-link:hover { text-decoration:underline; } /* 热度数字文字 */ .hot { color:#000; } </style> </head> <body> <!-- 热榜表格整体 --> <table> <!-- 表头一行 --> <tr> <th class="col-1">百度热榜</th> <th class="col-2"> <!-- 换一换文字 + 刷新字体图标 --> <a href="#" class="change">换一换<i class="iconfont icon-shuaxin"></i></a> </th> </tr> <!-- 第1条热榜 --> <tr> <td class="col-1"> <span class="num num1">1</span> <a href="#" class="title-link">全国秋季招聘正式启动</a> </td> <td class="col-2 hot">474万</td> </tr> <!-- 第2条热榜 --> <tr> <td class="col-1"> <span class="num num2">2</span> <a href="#" class="title-link">多地调整中小学放学时间</a> </td> <td class="col-2 hot">474万</td> </tr> <!-- 第3条热榜 --> <tr> <td class="col-1"> <span class="num num3">3</span> <a href="#" class="title-link">油价新一轮调价窗口开启</a> </td> <td class="col-2 hot">474万</td> </tr> <!-- 第4条热榜 --> <tr> <td class="col-1"> <span class="num num-other">4</span> <a href="#" class="title-link">国产手机发布全新系统</a> </td> <td class="col-2 hot">474万</td> </tr> </table> </body> </html>