前端速成之路——html、css
项目一知识点单表视图列表
[*]标题标签
<h1>用户注册</h1>
[*]分割线与换行
<hr> <br>
[*]表单提交
[*]get:通过浏览器地址栏传递值
[*]post:不通过浏览器地址栏传递值,通过发送请求的消息体传递值,没有大小限制
[*]文本框、密码框、单选、多选、下拉菜单、邮箱、日期、提交、重置、普通按钮
<link rel="stylesheet" href="./styles/style.css"><input type="text" name="username" value=""
<link rel="stylesheet" href="./styles/style.css">placeholder="请填写用户姓名" autocomplete="off"
<link rel="stylesheet" href="./styles/style.css">required autofocus> <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"><input type="password" name="password"
<link rel="stylesheet" href="./styles/style.css">name="password" autocomplete="off" required
<link rel="stylesheet" href="./styles/style.css">placeholder="请填写用户密码"> <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">性别: <input type="radio" name="gender" value="0" checked>男
<link rel="stylesheet" href="./styles/style.css"><input type="radio" name="gender" value="1">女 <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">爱好: <input type="checkbox" name="hobby" value="1">足球
<link rel="stylesheet" href="./styles/style.css"><input type="checkbox" name="hobby" value="2" checked>游戏
<link rel="stylesheet" href="./styles/style.css"><input type="checkbox" name="hobby" value="3">旅行
<link rel="stylesheet" href="./styles/style.css"><input type="checkbox" name="hobby" value="4">购物 <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">住址:
<link rel="stylesheet" href="./styles/style.css"><select name="address">
<link rel="stylesheet" href="./styles/style.css"> <option value="1">济南</option>
<link rel="stylesheet" href="./styles/style.css"> <option value="2" selected>青岛</option>
<link rel="stylesheet" href="./styles/style.css"> <option value="3">淄博</option>
<link rel="stylesheet" href="./styles/style.css"> <option value="4">德州</option>
<link rel="stylesheet" href="./styles/style.css"> <option value="5">潍坊</option>
<link rel="stylesheet" href="./styles/style.css"></select> <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">邮箱地址: <input type="email" name="email"
<link rel="stylesheet" href="./styles/style.css">required placeholder="请填写邮箱地址"> <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">出生日期: <input type="date" name="birth"> <br>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"><input type="submit" value="注册">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"><input type="reset" value="取消">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"><input type="button" value="普通按钮">
[*]表头设置：页面编码、视口、标题
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>1:表单 锚 视图 列表</title>
</head>
[*]关于本地超链接使用
五一节出游攻略
我也是五一节出游攻略
我还是五一节出游攻略
[*]正常放置图片与设置图片的超链接
<img src="https://www.cnblogs.com/./assets/picture.jpg" alt="引入失败"
title="著名影片:共同警备区" width="200px">
<link rel="stylesheet" href="./styles/style.css"><img src="https://www.cnblogs.com/./assets/picture.jpg" alt="引入失败"
<link rel="stylesheet" href="./styles/style.css">title="著名影片:共同警备区" width="200px">
[*]有序列表和无序列表
<ul>
<link rel="stylesheet" href="./styles/style.css"><li>列表项1</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项2</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项3</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项4</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项5</li>
</ul>
<ol>
<link rel="stylesheet" href="./styles/style.css"><li>列表项1</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项2</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项3</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项4</li>
<link rel="stylesheet" href="./styles/style.css"><li>列表项5</li>
</ol>
Css引入方式
[*]内嵌式：直接将Css代码书写在 head 标签的 style 标签中，这种书写方式 初步的将结构和样式解耦,但是解耦不彻底 几乎没有复用性
<link rel="stylesheet" href="./styles/style.css">h1{
<link rel="stylesheet" href="./styles/style.css"> font-family:'方正静蕾简体','xiquezhaopaiti','楷体';
<link rel="stylesheet" href="./styles/style.css"> /* 设置字体大小 google 浏览器最小可以设置的大小是 10px
<link rel="stylesheet" href="./styles/style.css"> 但是一般 小于12px 一律按照12px显示 */
<link rel="stylesheet" href="./styles/style.css"> font-size:30px;
<link rel="stylesheet" href="./styles/style.css"> /*设置颜色 常用的方式存在以下三种
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">1:直接使用 颜色的专有名词 支持潘通(Pantone)流行色
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> red blue green
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> coral 珊瑚橘
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> crimson 鲱鱼红
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> cornflowerblue 矢车菊蓝
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">2:使用 色号 #ffffff - #000000
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> #ff770f 爱马仕橙
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> #663399 蕾贝卡紫
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 勃艮第红 #81001e
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 克莱因蓝 #002ea6
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 蒂芙尼蓝 #82d8cf
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">3:使用三元色
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> rgb(r,g,b)
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> r|g|b:0-255的整数
<link rel="stylesheet" href="./styles/style.css"> */
<link rel="stylesheet" href="./styles/style.css"> color:coral;
<link rel="stylesheet" href="./styles/style.css"> /* 设置文字阴影
<link rel="stylesheet" href="./styles/style.css"> 共四个参数 前两个表示阴影的偏移量 偏移量越大 阴影越明显
<link rel="stylesheet" href="./styles/style.css"> 第三个参数表示阴影的模糊程度 数字越小阴影越锐 数字越大阴影羽化越严重 */
<link rel="stylesheet" href="./styles/style.css"> text-shadow: 10px 10px 5px silver;
<link rel="stylesheet" href="./styles/style.css">}
<link rel="stylesheet" href="./styles/style.css">div{
<link rel="stylesheet" href="./styles/style.css"> background-color: cornflowerblue;
<link rel="stylesheet" href="./styles/style.css">}
[*]外链式：使用外链式引入外部独立的 css 文件
<link rel="stylesheet" href="./styles/style.css">@charset "utf-8";/*默认utf-8*/
/* 渲染 段落元素 */
p{
/* 设置行高 */
line-height: 20px;
/* 设置字体倾斜 */
font-style: italic;
/* 给字体添加下划线 */
text-decoration: underline;
}
div{
background-color: deeppink;
}
[*]行内式：直接将css代码书写在标签内,这种书写方式严重违背结构和样式解耦的原则,但是由于其优先级极高,因此使用依然较多
点击下载 Cursor AI开发工具
[*]优先级==>行内式>外联式、内嵌式谁放在后面就听谁的
Css基本、复合选择器
[*]基本选择器：1、标记选择器 2、类别选择器 3、id选择器 4、属性选择器
tagName{}
.class{}
#id{}
[属性="属性值"]
/*
input{}
*/
[*]复合选择器：
[*]交集选择器
tagName.class{}
tagName#id{}
[*]并集选择器
sel1,sel2,sel3,selN{}/*用逗号隔开，复合一个便套用*/
[*]后代选择器
sel1 sel2 sel3 selN{}
/*根据左祖先右后代的层级关系,精确获取具有特定祖先的的最右侧元素*/
[*]子辈选择器
sel1 > sel2{}
/*只能选取子元素,而不能选取后续的元素*/
[*]紧邻兄弟选择器
sel1 + sel2{}
三个条件缺一不可a:向下选取b:互为兄弟c:必须紧邻
[*]兄弟选择器
sel1 ~ sel2{}
俩条件缺一不可a:向下选取b:互为兄弟
[*]通配符选择器
*{}
/*表示选择所有元素,注意此选择器优先级最低 比标记选择器优先级低*/
Css伪类选择器
[*]伪类选择器:一般用来描述元素某一种或者多种状态下的样式
[*]用来设置锚元素默认的样式,注意此伪类仅适用与 a 锚元素
a:link{}
[*]用来设置锚元素在访问之后的样式,注意此伪类仅适用与 a 锚元素
a:visited{}
[*]鼠标滑过时的样式,注意此伪类任意元素可用
a:hover{}
[*]鼠标点击元素左键还未松开时的样式,注意此伪类任意元素可用
a:active{}
Css页面元素类型
[*]span：行内元素：行内元素会在一行内显示，不会强制换行，并且其宽度和高度由内容决定，不能通过 width 和 height 属性来直接设置。
[*]div：块级元素：块级元素会独占一行，并且可以通过 width 和 height 属性来设置其宽度和高度。
<link rel="stylesheet" href="./styles/style.css">span {
<link rel="stylesheet" href="./styles/style.css"> background-color: pink;
<link rel="stylesheet" href="./styles/style.css"> /* 设置宽度 */
<link rel="stylesheet" href="./styles/style.css"> width: 400px;
<link rel="stylesheet" href="./styles/style.css"> /* 设置高度 */
<link rel="stylesheet" href="./styles/style.css"> height: 300px;
<link rel="stylesheet" href="./styles/style.css"> /* 设置内部文本对齐方式,默认是左对齐,这里更改为居中对齐 */
<link rel="stylesheet" href="./styles/style.css"> text-align: center;
<link rel="stylesheet" href="./styles/style.css">}
<link rel="stylesheet" href="./styles/style.css">div {
<link rel="stylesheet" href="./styles/style.css"> background-color: lightblue;
<link rel="stylesheet" href="./styles/style.css"> /* 设置宽度 */
<link rel="stylesheet" href="./styles/style.css"> width: 400px;
<link rel="stylesheet" href="./styles/style.css"> /* 设置高度 */
<link rel="stylesheet" href="./styles/style.css"> height: 300px;
<link rel="stylesheet" href="./styles/style.css"> /* 设置内部文本对齐方式,默认是左对齐,这里更改为居中对齐 */
<link rel="stylesheet" href="./styles/style.css"> text-align: center;
<link rel="stylesheet" href="./styles/style.css">}/*---------分---------割---------线---------*/
<link rel="stylesheet" href="./styles/style.css"> 我是span我是span我是span我是span我是span我是span
<link rel="stylesheet" href="./styles/style.css">我是span我是span我是span我是span我是span我是span
<link rel="stylesheet" href="./styles/style.css">我是span我是span我是span我是span我是span我是span
<link rel="stylesheet" href="./styles/style.css"><hr>
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div
<link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div
<link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 我是div我是div我是div我是div我是div我是div
<link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div
<link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div
[*]display:none;
<link rel="stylesheet" href="./styles/style.css"> 隐藏自己，隐藏后原位置不保留
[*]visibility:hidden; 隐藏自己，隐藏后原位置保留
[*]opacity:0;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 隐藏自己，隐藏后原位置保留
[*]overflow:hidden; 溢出部分隐藏,原位置不保留的属性
Css盒子模型
<img alt="盒子模型" loading="lazy">
[*]14个元素：
[*]margin:外边距 * 4、padding:内边距 * 4、border:边框 * 4、width 宽度、height 高度
margin-top:50px;
margin-left:30px;
margin-bottom:40px;
margin-right:80px;
简化写法
margin:上 右 下 左;
margin:上 右左 下;
margin:上下 右左;
margin:上右下左;
margin:50px 80px 40px 30px;/*其他同理*/
[*]重置css属性
<link rel="stylesheet" href="./styles/style.css">/* 重置css 就是将一些默认值归零 设置一个空间位置默认都是0 因为一般默认是
<link rel="stylesheet" href="./styles/style.css">有内外边距的值的 */
<link rel="stylesheet" href="./styles/style.css">*{
<link rel="stylesheet" href="./styles/style.css"> margin:0;
<link rel="stylesheet" href="./styles/style.css"> padding:0;
<link rel="stylesheet" href="./styles/style.css">}
[*]设置正文高度参照物
<link rel="stylesheet" href="./styles/style.css">html,body{
<link rel="stylesheet" href="./styles/style.css"> /* 在google 浏览器中认为 html为正文,而火狐认为 body为正文,两者我们使用 并集 提高兼容性 */
<link rel="stylesheet" href="./styles/style.css"> height:100%;
<link rel="stylesheet" href="./styles/style.css">}
[*]整体居中的三种方式
[*]使用像素
margin:0 auto;
width:800px;
height:900px;
/*元素必须是块级元素，并且要有明确的宽度。因为只有知道元素的宽度，浏览器才能计算出左右两边剩余的空间*/
[*]使用百分比
margin:0 auto;
width:80%;
height:100%;
/*此单位永远与父元素进行比较，如果没有父元素，则与body比较也就是浏览器的，注意要设置高度的参照物 否则高度会失效*/
[*]视口宽度
margin:0 auto;
width:80vw;
height:100vh;
box-sizing
[*]盒子参数
[*]默认：box-sizing: content-box;
此参数为默认,如果不写就是使用此规则
元素的实际宽度 = width + padding*2 + border*2
因此实际的宽度远远要大于width参数
[*]box-sizing: border-box;
实际宽度和高度就是 width 和 height
浮动与定位
浮动（float）是一种重要的 CSS 属性，它允许元素脱离正常的文档流，向左或向右移动，直到碰到包含它的元素或者另一个浮动元素为止。
[*]float: left;从左往右排
浮动的方向只有左右，比较简单，那么定位则功能更为强大，可以将元素定位到页面中任意一个位置，定位分为以下四种
[*]相对定位：元素根据其原先所在位置的左上角进行定位，定位之后不改变元素原来的类型,原来的位置依然被占用
.sub1{
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">border:solid 2px crimson;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">/* 设置相对定位 */
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">position: relative;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">/* 向下偏移 */
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">top:300px;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">/* 向右偏移 */
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">left:200px;
<link rel="stylesheet" href="./styles/style.css"> }
[*]绝对定位：元素根据距离最近的定位过的祖先元素的左上角进行定位，定位之后元素漂浮在页面上,不再占满一行必须单独设置宽高,原来的位置
<link rel="stylesheet" href="./styles/style.css"> .sub2{
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">border:solid 2px coral;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">/* 设置绝对定位 */
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">position: absolute;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">top:400px;
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">left:400px;
<link rel="stylesheet" href="./styles/style.css"> }
[*]固定定位：其实就是绝对定位,但是永远根据 body 定位
position:fixed;
[*]静态定位：就是标准文本流
position:static;
私货时间
其实只是把一些用法再写一遍，加强记忆。
还有一些同样重要的知识没有在正课讲的部分（我们很多时候是边做题边讲新知识，所以有些重点知识不在大纲里面）。
超链接样式
a:link{
/* 链接字体颜色 */
color:#ff770f;
/* 链接阴影 */
text-shadow: 5px 5px 7px #2b2b2b;
}
/* 链接被访问过之后的样式 */
a:visited{
/* 访问过后的颜色 */
color:#663399;
}
/* 鼠标滑过链接的样式 */
a:hover{
/* 设置字体颜色 */
color:tomato;
/* 设置字体加粗 */
font-weight: 900;
}
/* 设置左键点击链接的样式 */
a:active{
/* 左键点击时的颜色 */
color:crimson;
}设置正文格式
html,body{
/* 设置正文外边距为0 */
margin:0;
/* 设置正文内边距为0 */
padding:0;
/* 设置正文字体大小 */
font-size: 14px;
/* 设置正文字体 */
font-family: 'xiquezhaopaiti';
/* 设置高度百分比参照物 */
height:100%;
}css重置（通配每个元素）
*{
/* 设置每个元素外边距归零 */
margin:0;
/* 设置每个元素内边距归零 */
padding:0;
/* 去掉每个元素的边框 */
border:none;
/* 设置元素计算方式 */
box-sizing: border-box;
/*重要！不配置这条会让本不该出现滚动条的页面出现滚动条*/
/* 去掉元素获取焦点时的边框 */
outline: none !important;
}背景图片设置
/* 设置绝对定位 */ position: absolute; /* 设置背景图 no-repeat 是指如果图片尺寸不合适不会重叠摆放 */ background: url("../assets/bg1.jpeg") no-repeat; /* 设置背景图宽度和高度 */ background-size: 100vw 100vh; /* 设置背景图固定在页面上不会随着缩放而改变 */ background-attachment: fixed;
<link rel="stylesheet" href="./styles/style.css">/* 设置渐变色背景 */
<link rel="stylesheet" href="./styles/style.css">background: linear-gradient(to right, #536976, #292e49);弹性盒子
[*]我们学习中，将设置为弹性盒子的容器，比作气球，先填充好固定了大小的容器，弹性容器就会根据他所在位置的空余空间大小进行“吹气”，直到填满所在空余部分
/* 开启弹性盒子 表格成为 item 项目 */
display: flex;
/* 设置主轴居中 */
justify-content: center;
/* 设置交叉轴 起始排列 是上中下 的 上 */
align-items: flex-start;
[*]flex-direction决定了 主轴的方向，也就是排列方向，默认为从左向右排一排
flex-direction: row; /*从左向右*/
flex-direction: row-reverse; /*从右向左*/
flex-direction: column; /*从上向下*/
flex-direction: column-reverse; /*从下向上*/
[*]flex:1;
其完整格式为：flex:flex-grow flex-shrink flex-basis;
flex-grow:默认是0 表示如果容器放大,则项目不随之放大,而如果更改为1
则容器放大项目随之放大
flex-shrin:默认是1 表示如果容器缩小,则项目随之缩小,不会溢出容器,而如果
更改为0 则容器缩小项目不变 有可能溢出容器
flex-basis:默认为 auto,用来设置项目的 width 宽度,注意一般在此设置这个参数
因为优先级较低
表格样式
/* 设置表格边框如果为多条,合并为一根 */ border-collapse: collapse; td,th{
<link rel="stylesheet" href="./styles/style.css">/* 设置单元格边框 */
<link rel="stylesheet" href="./styles/style.css">border:solid 1px #ddd; } /*-----分-----割-----线-----*/ .tb{
<link rel="stylesheet" href="./styles/style.css">/* 向下偏移 100像素 */
<link rel="stylesheet" href="./styles/style.css">margin-top: 100px;
<link rel="stylesheet" href="./styles/style.css">/* 设置表格宽度 */
<link rel="stylesheet" href="./styles/style.css">width:80%;
<link rel="stylesheet" href="./styles/style.css">/* 显示表格阴影 */
<link rel="stylesheet" href="./styles/style.css">box-shadow: 5px 5px 6px silver;
<link rel="stylesheet" href="./styles/style.css">/* 设置内部文本居中对齐 */
<link rel="stylesheet" href="./styles/style.css">text-align: center;
<link rel="stylesheet" href="./styles/style.css">/* 设置表头 */
<link rel="stylesheet" href="./styles/style.css">thead{
<link rel="stylesheet" href="./styles/style.css"> background-color: coral;
<link rel="stylesheet" href="./styles/style.css"> color:#f5f5f5;
<link rel="stylesheet" href="./styles/style.css">} }
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">表格标题
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">列1
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列2
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列3
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列4
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列1
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列2
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列3
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列4
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列1
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列2
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列3
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列4
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列1
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列2
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列3
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列4
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列1
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列2
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列3
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 列4
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 圣杯布局的元素（这个居然也要我背啊啊啊）
[*]header：页眉
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">圣杯布局第一版
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css"> 欢迎您回来 XXX 先生|女士
<link rel="stylesheet" href="./styles/style.css">
[*]footer：页脚
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">Copyright ©2008-2025 Etoak Corporation, All Rights Reserved.
<link rel="stylesheet" href="./styles/style.css">
[*]section：中间主体
[*]aside：侧边栏
[*]main：主要内容页面
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
[*]表格测试
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
[*]侧边链接2
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
[*]侧边链接3
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
[*]侧边链接4
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
[*]侧边链接5
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
文章页面
[*]大多情况应该是让其他页面留出容器空间直接引入嵌套的。
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">
<link rel="stylesheet" href="./styles/style.css">文章标题
<link rel="stylesheet" href="./styles/style.css"> 文章主体
<link rel="stylesheet" href="./styles/style.css"> 文章页脚
<link rel="stylesheet" href="./styles/style.css">
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]