登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 安全 ›前端速成之路——html、css

前端速成之路——html、css

精滂软 2025-6-1 00:09:18
项目一知识点

单表视图列表


  • 标题标签
    1. <h1>用户注册</h1>
    复制代码
  • 分割线与换行
    1. <hr> <br>
    复制代码
  • 表单提交

    • get:通过浏览器地址栏传递值
    • post:不通过浏览器地址栏传递值,通过发送请求的消息体传递值,没有大小限制
    1. [/code]
    2. [list]
    3. [*]文本框、密码框、单选、多选、下拉菜单、邮箱、日期、提交、重置、普通按钮
    4. [/list][code]   
    5.     <link rel="stylesheet" href="./styles/style.css"><input type="text" name="username" value=""
    6.    
    7.     <link rel="stylesheet" href="./styles/style.css">placeholder="请填写用户姓名" autocomplete="off"
    8.    
    9.     <link rel="stylesheet" href="./styles/style.css">required autofocus> <br>
    10.    
    11.     <link rel="stylesheet" href="./styles/style.css">
    12.    
    13.     <link rel="stylesheet" href="./styles/style.css"><input type="password" name="password"
    14.    
    15.     <link rel="stylesheet" href="./styles/style.css">name="password" autocomplete="off" required
    16.    
    17.     <link rel="stylesheet" href="./styles/style.css">placeholder="请填写用户密码"> <br>
    18.    
    19.     <link rel="stylesheet" href="./styles/style.css">
    20.    
    21.     <link rel="stylesheet" href="./styles/style.css">性别: <input type="radio" name="gender" value="0" checked>男
    22.    
    23.     <link rel="stylesheet" href="./styles/style.css"><input type="radio" name="gender" value="1">女 <br>
    24.    
    25.     <link rel="stylesheet" href="./styles/style.css">
    26.    
    27.     <link rel="stylesheet" href="./styles/style.css">爱好: <input type="checkbox" name="hobby" value="1">足球
    28.    
    29.     <link rel="stylesheet" href="./styles/style.css"><input type="checkbox" name="hobby" value="2" checked>游戏
    30.    
    31.     <link rel="stylesheet" href="./styles/style.css"><input type="checkbox" name="hobby" value="3">旅行
    32.    
    33.     <link rel="stylesheet" href="./styles/style.css"><input type="checkbox" name="hobby" value="4">购物 <br>
    34.    
    35.     <link rel="stylesheet" href="./styles/style.css">
    36.    
    37.     <link rel="stylesheet" href="./styles/style.css">住址:
    38.    
    39.     <link rel="stylesheet" href="./styles/style.css"><select name="address">
    40.    
    41.     <link rel="stylesheet" href="./styles/style.css">    <option value="1">济南</option>
    42.    
    43.     <link rel="stylesheet" href="./styles/style.css">    <option value="2" selected>青岛</option>
    44.    
    45.     <link rel="stylesheet" href="./styles/style.css">    <option value="3">淄博</option>
    46.    
    47.     <link rel="stylesheet" href="./styles/style.css">    <option value="4">德州</option>
    48.    
    49.     <link rel="stylesheet" href="./styles/style.css">    <option value="5">潍坊</option>
    50.    
    51.     <link rel="stylesheet" href="./styles/style.css"></select> <br>
    52.    
    53.     <link rel="stylesheet" href="./styles/style.css">
    54.    
    55.     <link rel="stylesheet" href="./styles/style.css">邮箱地址: <input type="email" name="email"
    56.    
    57.     <link rel="stylesheet" href="./styles/style.css">required placeholder="请填写邮箱地址"> <br>
    58.    
    59.     <link rel="stylesheet" href="./styles/style.css">
    60.    
    61.     <link rel="stylesheet" href="./styles/style.css">出生日期: <input type="date" name="birth"> <br>
    62.    
    63.     <link rel="stylesheet" href="./styles/style.css">
    64.    
    65.     <link rel="stylesheet" href="./styles/style.css"><input type="submit" value="注册">
    66.    
    67.     <link rel="stylesheet" href="./styles/style.css">
    68.    
    69.     <link rel="stylesheet" href="./styles/style.css"><input type="reset" value="取消">
    70.    
    71.     <link rel="stylesheet" href="./styles/style.css">
    72.    
    73.     <link rel="stylesheet" href="./styles/style.css"><input type="button" value="普通按钮">
    复制代码
  • 表头设置：页面编码、视口、标题
    1. <html lang="en">
    4. <head>
    5.    
    6.     <meta charset="UTF-8">
    7.    
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.    
    10.     <title>1:表单 锚 视图 列表</title>
    11. </head>
    复制代码
  • 关于本地超链接使用
    1.    
    2.    
    3.     五一节出游攻略
    4.     我也是五一节出游攻略
    5.    
    6.     我还是五一节出游攻略
    复制代码
  • 正常放置图片与设置图片的超链接
    1.     <img src="https://www.cnblogs.com/./assets/picture.jpg" alt="引入失败"
    2.     title="著名影片:共同警备区" width="200px">
    3.    
    4.    
    5.     <link rel="stylesheet" href="./styles/style.css"><img src="https://www.cnblogs.com/./assets/picture.jpg" alt="引入失败"
    6.    
    7.     <link rel="stylesheet" href="./styles/style.css">title="著名影片:共同警备区" width="200px">
    8.    
    复制代码
  • 有序列表和无序列表
    1.     <ul>
    2.    
    3.     <link rel="stylesheet" href="./styles/style.css"><li>列表项1</li>
    4.    
    5.     <link rel="stylesheet" href="./styles/style.css"><li>列表项2</li>
    6.    
    7.     <link rel="stylesheet" href="./styles/style.css"><li>列表项3</li>
    8.    
    9.     <link rel="stylesheet" href="./styles/style.css"><li>列表项4</li>
    10.    
    11.     <link rel="stylesheet" href="./styles/style.css"><li>列表项5</li>
    12.     </ul>
    13.     <ol>
    14.    
    15.     <link rel="stylesheet" href="./styles/style.css"><li>列表项1</li>
    16.    
    17.     <link rel="stylesheet" href="./styles/style.css"><li>列表项2</li>
    18.    
    19.     <link rel="stylesheet" href="./styles/style.css"><li>列表项3</li>
    20.    
    21.     <link rel="stylesheet" href="./styles/style.css"><li>列表项4</li>
    22.    
    23.     <link rel="stylesheet" href="./styles/style.css"><li>列表项5</li>
    24.     </ol>
    复制代码
Css引入方式


  • 内嵌式：直接将Css代码书写在 head 标签的 style 标签中，这种书写方式 初步的将结构和样式解耦,但是解耦不彻底 几乎没有复用性
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">h1{
    3.    
    4.     <link rel="stylesheet" href="./styles/style.css">    font-family:'方正静蕾简体','xiquezhaopaiti','楷体';
    5.    
    6.     <link rel="stylesheet" href="./styles/style.css">    /* 设置字体大小 google 浏览器最小可以设置的大小是 10px
    7.    
    8.     <link rel="stylesheet" href="./styles/style.css">    但是一般 小于12px 一律按照12px显示 */
    9.    
    10.     <link rel="stylesheet" href="./styles/style.css">    font-size:30px;
    11.    
    12.     <link rel="stylesheet" href="./styles/style.css">    /*  设置颜色 常用的方式存在以下三种
    13.    
    14.     <link rel="stylesheet" href="./styles/style.css">   
    15.     <link rel="stylesheet" href="./styles/style.css">1:直接使用 颜色的专有名词 支持潘通(Pantone)流行色
    16.    
    17.     <link rel="stylesheet" href="./styles/style.css">   
    18.     <link rel="stylesheet" href="./styles/style.css">    red blue green
    19.    
    20.     <link rel="stylesheet" href="./styles/style.css">   
    21.     <link rel="stylesheet" href="./styles/style.css">    coral 珊瑚橘
    22.    
    23.     <link rel="stylesheet" href="./styles/style.css">   
    24.     <link rel="stylesheet" href="./styles/style.css">    crimson 鲱鱼红
    25.    
    26.     <link rel="stylesheet" href="./styles/style.css">   
    27.     <link rel="stylesheet" href="./styles/style.css">    cornflowerblue 矢车菊蓝
    28.    
    29.     <link rel="stylesheet" href="./styles/style.css">   
    30.     <link rel="stylesheet" href="./styles/style.css">2:使用 色号 #ffffff - #000000
    31.    
    32.     <link rel="stylesheet" href="./styles/style.css">   
    33.     <link rel="stylesheet" href="./styles/style.css">    #ff770f 爱马仕橙
    34.    
    35.     <link rel="stylesheet" href="./styles/style.css">   
    36.     <link rel="stylesheet" href="./styles/style.css">    #663399 蕾贝卡紫
    37.    
    38.     <link rel="stylesheet" href="./styles/style.css">   
    39.     <link rel="stylesheet" href="./styles/style.css">    勃艮第红 #81001e
    40.    
    41.     <link rel="stylesheet" href="./styles/style.css">   
    42.     <link rel="stylesheet" href="./styles/style.css">    克莱因蓝 #002ea6
    43.    
    44.     <link rel="stylesheet" href="./styles/style.css">   
    45.     <link rel="stylesheet" href="./styles/style.css">    蒂芙尼蓝 #82d8cf
    46.    
    47.     <link rel="stylesheet" href="./styles/style.css">   
    48.     <link rel="stylesheet" href="./styles/style.css">3:使用三元色
    49.    
    50.     <link rel="stylesheet" href="./styles/style.css">   
    51.     <link rel="stylesheet" href="./styles/style.css">    rgb(r,g,b)
    52.    
    53.     <link rel="stylesheet" href="./styles/style.css">   
    54.     <link rel="stylesheet" href="./styles/style.css">    r|g|b:0-255的整数
    55.    
    56.     <link rel="stylesheet" href="./styles/style.css">    */
    57.    
    58.     <link rel="stylesheet" href="./styles/style.css">    color:coral;
    59.    
    60.     <link rel="stylesheet" href="./styles/style.css">    /* 设置文字阴影
    61.    
    62.     <link rel="stylesheet" href="./styles/style.css">    共四个参数 前两个表示阴影的偏移量 偏移量越大 阴影越明显
    63.    
    64.     <link rel="stylesheet" href="./styles/style.css">    第三个参数表示阴影的模糊程度 数字越小阴影越锐 数字越大阴影羽化越严重 */
    65.    
    66.     <link rel="stylesheet" href="./styles/style.css">    text-shadow: 10px 10px 5px silver;
    67.    
    68.     <link rel="stylesheet" href="./styles/style.css">}
    69.    
    70.     <link rel="stylesheet" href="./styles/style.css">div{
    71.    
    72.     <link rel="stylesheet" href="./styles/style.css">    background-color: cornflowerblue;
    73.    
    74.     <link rel="stylesheet" href="./styles/style.css">}
    复制代码
  • 外链式：使用外链式引入外部独立的 css 文件
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">
    复制代码
    1. @charset "utf-8";/*默认utf-8*/
    2. /* 渲染 段落元素 */
    3. p{
    4.     /* 设置行高 */
    5.     line-height: 20px;
    6.     /* 设置字体倾斜 */
    7.     font-style: italic;
    8.     /* 给字体添加下划线 */
    9.     text-decoration: underline;
    10. }
    12. div{
    13.     background-color: deeppink;
    14. }
    复制代码
  • 行内式：直接将css代码书写在标签内,这种书写方式严重违背结构和样式解耦的原则,但是由于其优先级极高,因此使用依然较多
    1.     点击下载 Cursor AI开发工具
    复制代码
  • 优先级==>  行内式>外联式、内嵌式  谁放在后面就听谁的
Css基本、复合选择器


  • 基本选择器：1、标记选择器        2、类别选择器        3、id选择器        4、属性选择器
    1. tagName{}
    2. .class{}
    3. #id{}
    4. [属性="属性值"]
    5. /*
    6. input[type="text"]{}
    7. */
    复制代码
  • 复合选择器：

    • 交集选择器
      1. tagName.class{}
      2. tagName#id{}
      复制代码
    • 并集选择器
      1. sel1,sel2,sel3,selN{}/*用逗号隔开，复合一个便套用*/
      复制代码
    • 后代选择器
      1. sel1 sel2 sel3 selN{}
      2. /*根据左祖先右后代的层级关系,精确获取具有特定祖先的的最右侧元素*/
      复制代码
    • 子辈选择器
      1. sel1 > sel2{}
      2. /*只能选取子元素,而不能选取后续的元素*/
      复制代码
    • 紧邻兄弟选择器
      1. sel1 + sel2{}
      2. 三个条件缺一不可a:向下选取b:互为兄弟c:必须紧邻
      复制代码
    • 兄弟选择器
      1. sel1 ~ sel2{}
      2. 俩条件缺一不可a:向下选取b:互为兄弟
      复制代码
    • 通配符选择器
      1. *{}
      2. /*表示选择所有元素,注意此选择器优先级最低 比标记选择器优先级低*/
      复制代码

Css伪类选择器


  • 伪类选择器:一般用来描述元素某一种或者多种状态下的样式

    • 用来设置锚元素默认的样式,注意此伪类仅适用与 a 锚元素
      1. a:link{}
      复制代码
    • 用来设置锚元素在访问之后的样式,注意此伪类仅适用与 a 锚元素
      1. a:visited{}
      复制代码
    • 鼠标滑过时的样式,注意此伪类任意元素可用
      1. a:hover{}
      复制代码
    • 鼠标点击元素左键还未松开时的样式,注意此伪类任意元素可用
      1. a:active{}
      复制代码

Css页面元素类型


  • span：行内元素：行内元素会在一行内显示，不会强制换行，并且其宽度和高度由内容决定，不能通过 width 和 height 属性来直接设置。
  • div：块级元素：块级元素会独占一行，并且可以通过 width 和 height 属性来设置其宽度和高度。
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">span {   
    3.     <link rel="stylesheet" href="./styles/style.css">    background-color: pink;   
    4.     <link rel="stylesheet" href="./styles/style.css">    /* 设置宽度 */   
    5.     <link rel="stylesheet" href="./styles/style.css">    width: 400px;   
    6.     <link rel="stylesheet" href="./styles/style.css">    /* 设置高度 */   
    7.     <link rel="stylesheet" href="./styles/style.css">    height: 300px;   
    8.     <link rel="stylesheet" href="./styles/style.css">    /* 设置内部文本对齐方式,默认是左对齐,这里更改为居中对齐 */   
    9.     <link rel="stylesheet" href="./styles/style.css">    text-align: center;   
    10.     <link rel="stylesheet" href="./styles/style.css">}   
    11.     <link rel="stylesheet" href="./styles/style.css">div {   
    12.     <link rel="stylesheet" href="./styles/style.css">    background-color: lightblue;   
    13.     <link rel="stylesheet" href="./styles/style.css">    /* 设置宽度 */   
    14.     <link rel="stylesheet" href="./styles/style.css">    width: 400px;   
    15.     <link rel="stylesheet" href="./styles/style.css">    /* 设置高度 */   
    16.     <link rel="stylesheet" href="./styles/style.css">    height: 300px;   
    17.     <link rel="stylesheet" href="./styles/style.css">    /* 设置内部文本对齐方式,默认是左对齐,这里更改为居中对齐 */   
    18.     <link rel="stylesheet" href="./styles/style.css">    text-align: center;   
    19.     <link rel="stylesheet" href="./styles/style.css">}/*---------分---------割---------线---------*/   
    20.     <link rel="stylesheet" href="./styles/style.css">    我是span我是span我是span我是span我是span我是span   
    21.     <link rel="stylesheet" href="./styles/style.css">我是span我是span我是span我是span我是span我是span   
    22.     <link rel="stylesheet" href="./styles/style.css">我是span我是span我是span我是span我是span我是span   
    23.     <link rel="stylesheet" href="./styles/style.css"><hr>   
    24.     <link rel="stylesheet" href="./styles/style.css">   
    25.     <link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div   
    26.     <link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div   
    27.     <link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div   
    28.     <link rel="stylesheet" href="./styles/style.css">   
    29.     <link rel="stylesheet" href="./styles/style.css">    我是div我是div我是div我是div我是div我是div   
    30.     <link rel="stylesheet" href="./styles/style.css">我是div我是div我是div我是div我是div我是div   
    31.     <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 高度
    1. margin-top:50px;
    2. margin-left:30px;
    3. margin-bottom:40px;
    4. margin-right:80px;
    5.     简化写法
    6. margin:上 右 下 左;
    7. margin:上 右左 下;
    8. margin:上下 右左;
    9. margin:上右下左;
    10. margin:50px 80px 40px 30px;/*其他同理*/
    复制代码
  • 重置css属性
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">/* 重置css 就是将一些默认值归零 设置一个空间位置默认都是0 因为一般默认是   
    3.     <link rel="stylesheet" href="./styles/style.css">有内外边距的值的 */   
    4.     <link rel="stylesheet" href="./styles/style.css">*{   
    5.     <link rel="stylesheet" href="./styles/style.css">    margin:0;   
    6.     <link rel="stylesheet" href="./styles/style.css">    padding:0;   
    7.     <link rel="stylesheet" href="./styles/style.css">}
    复制代码
  • 设置正文高度参照物
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">html,body{   
    3.     <link rel="stylesheet" href="./styles/style.css">    /* 在google 浏览器中认为 html为正文,而火狐认为 body为正文,两者我们使用 并集 提高兼容性 */   
    4.     <link rel="stylesheet" href="./styles/style.css">    height:100%;   
    5.     <link rel="stylesheet" href="./styles/style.css">}
    复制代码
  • 整体居中的三种方式

    • 使用像素
      1. margin:0 auto;
      2. width:800px;
      3. height:900px;
      4. /*元素必须是块级元素，并且要有明确的宽度。因为只有知道元素的宽度，浏览器才能计算出左右两边剩余的空间*/
      复制代码
    • 使用百分比
      1. margin:0 auto;
      2. width:80%;
      3. height:100%;
      4. /*此单位永远与父元素进行比较，如果没有父元素，则与body比较也就是浏览器的，注意要设置高度的参照物 否则高度会失效*/
      复制代码
    • 视口宽度
      1. margin:0 auto;
      2. width:80vw;
      3. height:100vh;
      复制代码

box-sizing


  • 盒子参数

    • 默认：box-sizing: content-box;
      此参数为默认,如果不写就是使用此规则
      元素的实际宽度 = width + padding*2 + border*2
      因此实际的宽度远远要大于width参数
    • box-sizing: border-box;
      实际宽度和高度就是 width 和 height

浮动与定位

浮动（float）是一种重要的 CSS 属性，它允许元素脱离正常的文档流，向左或向右移动，直到碰到包含它的元素或者另一个浮动元素为止。

  • float: left;从左往右排
浮动的方向只有左右，比较简单，那么定位则功能更为强大，可以将元素定位到页面中任意一个位置，定位分为以下四种

  • 相对定位：元素根据其原先所在位置的左上角进行定位，定位之后不改变元素原来的类型,原来的位置依然被占用
    1.                         .sub1{   
    2.     <link rel="stylesheet" href="./styles/style.css">   
    3.     <link rel="stylesheet" href="./styles/style.css">border:solid 2px crimson;   
    4.     <link rel="stylesheet" href="./styles/style.css">   
    5.     <link rel="stylesheet" href="./styles/style.css">/* 设置相对定位 */   
    6.     <link rel="stylesheet" href="./styles/style.css">   
    7.     <link rel="stylesheet" href="./styles/style.css">position: relative;   
    8.     <link rel="stylesheet" href="./styles/style.css">   
    9.     <link rel="stylesheet" href="./styles/style.css">/* 向下偏移 */   
    10.     <link rel="stylesheet" href="./styles/style.css">   
    11.     <link rel="stylesheet" href="./styles/style.css">top:300px;   
    12.     <link rel="stylesheet" href="./styles/style.css">   
    13.     <link rel="stylesheet" href="./styles/style.css">/* 向右偏移 */   
    14.     <link rel="stylesheet" href="./styles/style.css">   
    15.     <link rel="stylesheet" href="./styles/style.css">left:200px;   
    16.     <link rel="stylesheet" href="./styles/style.css">    }
    复制代码
  • 绝对定位：元素根据距离最近的定位过的祖先元素的左上角进行定位，定位之后元素漂浮在页面上,不再占满一行必须单独设置宽高,原来的位置
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">    .sub2{   
    3.     <link rel="stylesheet" href="./styles/style.css">   
    4.     <link rel="stylesheet" href="./styles/style.css">border:solid 2px coral;   
    5.     <link rel="stylesheet" href="./styles/style.css">   
    6.     <link rel="stylesheet" href="./styles/style.css">/* 设置绝对定位 */   
    7.     <link rel="stylesheet" href="./styles/style.css">   
    8.     <link rel="stylesheet" href="./styles/style.css">position: absolute;   
    9.     <link rel="stylesheet" href="./styles/style.css">   
    10.     <link rel="stylesheet" href="./styles/style.css">top:400px;   
    11.     <link rel="stylesheet" href="./styles/style.css">   
    12.     <link rel="stylesheet" href="./styles/style.css">left:400px;   
    13.     <link rel="stylesheet" href="./styles/style.css">    }
    复制代码
  • 固定定位：其实就是绝对定位,但是永远根据 body 定位
    1. position:fixed;
    复制代码
  • 静态定位：就是标准文本流
    1. position:static;
    复制代码
私货时间

其实只是把一些用法再写一遍，加强记忆。
还有一些同样重要的知识没有在正课讲的部分（我们很多时候是边做题边讲新知识，所以有些重点知识不在大纲里面）。
超链接样式
  1. a:link{
  2.     /* 链接字体颜色 */
  3.     color:#ff770f;
  4.     /* 链接阴影 */
  5.     text-shadow: 5px 5px 7px #2b2b2b;
  6. }
  7. /* 链接被访问过之后的样式 */
  8. a:visited{
  9.     /* 访问过后的颜色 */
  10.     color:#663399;
  11. }
  12. /* 鼠标滑过链接的样式 */
  13. a:hover{
  14.     /* 设置字体颜色 */
  15.     color:tomato;
  16.     /* 设置字体加粗 */
  17.     font-weight: 900;
  18. }
  19. /* 设置左键点击链接的样式 */
  20. a:active{
  21.     /* 左键点击时的颜色 */
  22.     color:crimson;
  23. }
复制代码
设置正文格式
  1. html,body{
  2.     /* 设置正文外边距为0 */
  3.     margin:0;
  4.     /* 设置正文内边距为0 */
  5.     padding:0;
  6.     /* 设置正文字体大小 */
  7.     font-size: 14px;
  8.     /* 设置正文字体 */
  9.     font-family: 'xiquezhaopaiti';
  10.     /* 设置高度百分比参照物 */
  11.     height:100%;
  12. }
复制代码
css重置（通配每个元素）
  1. *{
  2.     /* 设置每个元素外边距归零 */
  3.     margin:0;
  4.     /* 设置每个元素内边距归零 */
  5.     padding:0;
  6.     /* 去掉每个元素的边框 */
  7.     border:none;
  8.     /* 设置元素计算方式 */
  9.     box-sizing: border-box;
  10. /*重要！不配置这条会让本不该出现滚动条的页面出现滚动条*/
  12.     /* 去掉元素获取焦点时的边框 */
  13.     outline: none !important;
  14. }
复制代码
背景图片设置
  1.     /* 设置绝对定位 */        position: absolute;    /* 设置背景图 no-repeat 是指如果图片尺寸不合适不会重叠摆放 */    background: url("../assets/bg1.jpeg") no-repeat;    /* 设置背景图宽度和高度 */    background-size: 100vw 100vh;    /* 设置背景图固定在页面上不会随着缩放而改变 */    background-attachment: fixed;   
  2.     <link rel="stylesheet" href="./styles/style.css">/* 设置渐变色背景 */   
  3.     <link rel="stylesheet" href="./styles/style.css">background: linear-gradient(to right, #536976, #292e49);
复制代码
弹性盒子


  • 我们学习中，将设置为弹性盒子的容器，比作气球，先填充好固定了大小的容器，弹性容器就会根据他所在位置的空余空间大小进行“吹气”，直到填满所在空余部分
    1.     /* 开启弹性盒子 表格成为 item 项目 */
    2.     display: flex;
    3.     /* 设置主轴居中 */
    4.     justify-content: center;
    5.     /* 设置交叉轴 起始排列 是上中下 的 上 */
    6.     align-items: flex-start;
    复制代码
  • flex-direction决定了 主轴的方向，也就是排列方向，默认为从左向右排一排
    1. flex-direction: row;                                /*从左向右*/
    2. flex-direction: row-reverse;                /*从右向左*/
    3. flex-direction: column;                                /*从上向下*/
    4. flex-direction: column-reverse;                /*从下向上*/
    复制代码
  • flex:1;
    其完整格式为：flex:flex-grow flex-shrink flex-basis;
    1. flex-grow:默认是0 表示如果容器放大,则项目不随之放大,而如果更改为1
    2. 则容器放大项目随之放大
    3. flex-shrin:默认是1 表示如果容器缩小,则项目随之缩小,不会溢出容器,而如果
    4. 更改为0 则容器缩小项目不变 有可能溢出容器
    5. flex-basis:默认为 auto,用来设置项目的 width 宽度,注意一般在此设置这个参数
    6. 因为优先级较低
    复制代码
表格样式
  1. /* 设置表格边框如果为多条,合并为一根 */    border-collapse: collapse;        td,th{   
  2.     <link rel="stylesheet" href="./styles/style.css">/* 设置单元格边框 */   
  3.     <link rel="stylesheet" href="./styles/style.css">border:solid 1px #ddd;    }                /*-----分-----割-----线-----*/    .tb{   
  4.     <link rel="stylesheet" href="./styles/style.css">/* 向下偏移 100像素 */   
  5.     <link rel="stylesheet" href="./styles/style.css">margin-top: 100px;   
  6.     <link rel="stylesheet" href="./styles/style.css">/* 设置表格宽度 */   
  7.     <link rel="stylesheet" href="./styles/style.css">width:80%;   
  8.     <link rel="stylesheet" href="./styles/style.css">/* 显示表格阴影 */   
  9.     <link rel="stylesheet" href="./styles/style.css">box-shadow: 5px 5px 6px silver;   
  10.     <link rel="stylesheet" href="./styles/style.css">/* 设置内部文本居中对齐 */   
  11.     <link rel="stylesheet" href="./styles/style.css">text-align: center;   
  12.     <link rel="stylesheet" href="./styles/style.css">/* 设置表头 */   
  13.     <link rel="stylesheet" href="./styles/style.css">thead{   
  14.     <link rel="stylesheet" href="./styles/style.css">    background-color: coral;   
  15.     <link rel="stylesheet" href="./styles/style.css">    color:#f5f5f5;   
  16.     <link rel="stylesheet" href="./styles/style.css">}    }
复制代码
  1.    
  2.     <link rel="stylesheet" href="./styles/style.css">[table]   
  3.     <link rel="stylesheet" href="./styles/style.css">   
  4.     <link rel="stylesheet" href="./styles/style.css">   
  5.     <link rel="stylesheet" href="./styles/style.css">表格标题   
  6.     <link rel="stylesheet" href="./styles/style.css">   
  7.     <link rel="stylesheet" href="./styles/style.css">   
  8.     <link rel="stylesheet" href="./styles/style.css">   
  9.     <link rel="stylesheet" href="./styles/style.css">   
  10.     <link rel="stylesheet" href="./styles/style.css">[tr]   
  11.     <link rel="stylesheet" href="./styles/style.css">   
  12.     <link rel="stylesheet" href="./styles/style.css">   
  13.     <link rel="stylesheet" href="./styles/style.css">   
  14.     <link rel="stylesheet" href="./styles/style.css">   
  15.     <link rel="stylesheet" href="./styles/style.css">列1   
  16.     <link rel="stylesheet" href="./styles/style.css">   
  17.     <link rel="stylesheet" href="./styles/style.css">    列2   
  18.     <link rel="stylesheet" href="./styles/style.css">   
  19.     <link rel="stylesheet" href="./styles/style.css">    列3   
  20.     <link rel="stylesheet" href="./styles/style.css">   
  21.     <link rel="stylesheet" href="./styles/style.css">    列4   
  22.     <link rel="stylesheet" href="./styles/style.css">   
  23.     <link rel="stylesheet" href="./styles/style.css">[/tr]   
  24.     <link rel="stylesheet" href="./styles/style.css">   
  25.     <link rel="stylesheet" href="./styles/style.css">   
  26.     <link rel="stylesheet" href="./styles/style.css">   
  27.     <link rel="stylesheet" href="./styles/style.css">   
  28.     <link rel="stylesheet" href="./styles/style.css">   
  29.     <link rel="stylesheet" href="./styles/style.css">    [tr]   
  30.     <link rel="stylesheet" href="./styles/style.css">   
  31.     <link rel="stylesheet" href="./styles/style.css">    [td]列1[/td]   
  32.     <link rel="stylesheet" href="./styles/style.css">   
  33.     <link rel="stylesheet" href="./styles/style.css">    [td]列2[/td]   
  34.     <link rel="stylesheet" href="./styles/style.css">   
  35.     <link rel="stylesheet" href="./styles/style.css">    [td]列3[/td]   
  36.     <link rel="stylesheet" href="./styles/style.css">   
  37.     <link rel="stylesheet" href="./styles/style.css">    [td]列4[/td]   
  38.     <link rel="stylesheet" href="./styles/style.css">   
  39.     <link rel="stylesheet" href="./styles/style.css">[/tr]   
  40.     <link rel="stylesheet" href="./styles/style.css">   
  41.     <link rel="stylesheet" href="./styles/style.css">[tr]   
  42.     <link rel="stylesheet" href="./styles/style.css">   
  43.     <link rel="stylesheet" href="./styles/style.css">    [td]列1[/td]   
  44.     <link rel="stylesheet" href="./styles/style.css">   
  45.     <link rel="stylesheet" href="./styles/style.css">    [td]列2[/td]   
  46.     <link rel="stylesheet" href="./styles/style.css">   
  47.     <link rel="stylesheet" href="./styles/style.css">    [td]列3[/td]   
  48.     <link rel="stylesheet" href="./styles/style.css">   
  49.     <link rel="stylesheet" href="./styles/style.css">    [td]列4[/td]   
  50.     <link rel="stylesheet" href="./styles/style.css">   
  51.     <link rel="stylesheet" href="./styles/style.css">[/tr]   
  52.     <link rel="stylesheet" href="./styles/style.css">   
  53.     <link rel="stylesheet" href="./styles/style.css">[tr]   
  54.     <link rel="stylesheet" href="./styles/style.css">   
  55.     <link rel="stylesheet" href="./styles/style.css">    [td]列1[/td]   
  56.     <link rel="stylesheet" href="./styles/style.css">   
  57.     <link rel="stylesheet" href="./styles/style.css">    [td]列2[/td]   
  58.     <link rel="stylesheet" href="./styles/style.css">   
  59.     <link rel="stylesheet" href="./styles/style.css">    [td]列3[/td]   
  60.     <link rel="stylesheet" href="./styles/style.css">   
  61.     <link rel="stylesheet" href="./styles/style.css">    [td]列4[/td]   
  62.     <link rel="stylesheet" href="./styles/style.css">   
  63.     <link rel="stylesheet" href="./styles/style.css">[/tr]   
  64.     <link rel="stylesheet" href="./styles/style.css">   
  65.     <link rel="stylesheet" href="./styles/style.css">[tr]   
  66.     <link rel="stylesheet" href="./styles/style.css">   
  67.     <link rel="stylesheet" href="./styles/style.css">    [td]列1[/td]   
  68.     <link rel="stylesheet" href="./styles/style.css">   
  69.     <link rel="stylesheet" href="./styles/style.css">    [td]列2[/td]   
  70.     <link rel="stylesheet" href="./styles/style.css">   
  71.     <link rel="stylesheet" href="./styles/style.css">    [td]列3[/td]   
  72.     <link rel="stylesheet" href="./styles/style.css">   
  73.     <link rel="stylesheet" href="./styles/style.css">    [td]列4[/td]   
  74.     <link rel="stylesheet" href="./styles/style.css">   
  75.     <link rel="stylesheet" href="./styles/style.css">[/tr]   
  76.     <link rel="stylesheet" href="./styles/style.css">   
  77.     <link rel="stylesheet" href="./styles/style.css">    [/table]
复制代码
圣杯布局的元素（这个居然也要我背啊啊啊）


  • header：页眉
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">   
    3.     <link rel="stylesheet" href="./styles/style.css">    [size=6]   
    4.     <link rel="stylesheet" href="./styles/style.css">   
    5.     <link rel="stylesheet" href="./styles/style.css">[align=center] 3.png [/align]   
    6.     <link rel="stylesheet" href="./styles/style.css">   
    7.     <link rel="stylesheet" href="./styles/style.css">圣杯布局第一版   
    8.     <link rel="stylesheet" href="./styles/style.css">    [/size]
    10.    
    11.     <link rel="stylesheet" href="./styles/style.css">    欢迎您回来 XXX 先生|女士   
    12.     <link rel="stylesheet" href="./styles/style.css">
    复制代码
  • footer：页脚
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">   
    3.     <link rel="stylesheet" href="./styles/style.css">   
    4.     <link rel="stylesheet" href="./styles/style.css">   
    5.     <link rel="stylesheet" href="./styles/style.css">Copyright ©2008-2025 Etoak Corporation, All Rights Reserved.   
    6.     <link rel="stylesheet" href="./styles/style.css">
    复制代码
  • section：中间主体

    • aside：侧边栏
    • main：主要内容页面
    1.    
    2.     <link rel="stylesheet" href="./styles/style.css">   
    3.     <link rel="stylesheet" href="./styles/style.css">   
    4.     <link rel="stylesheet" href="./styles/style.css">   
    5.     <link rel="stylesheet" href="./styles/style.css">   
    6.     <link rel="stylesheet" href="./styles/style.css">   
    7.     <link rel="stylesheet" href="./styles/style.css">   
    8.     <link rel="stylesheet" href="./styles/style.css">   
    9.     <link rel="stylesheet" href="./styles/style.css">
    10. [list]   
    11.     <link rel="stylesheet" href="./styles/style.css">   
    12.     <link rel="stylesheet" href="./styles/style.css">   
    13. [*]表格测试   
    14.     <link rel="stylesheet" href="./styles/style.css">   
    15.     <link rel="stylesheet" href="./styles/style.css">   
    16. [*]侧边链接2   
    17.     <link rel="stylesheet" href="./styles/style.css">   
    18.     <link rel="stylesheet" href="./styles/style.css">   
    19. [*]侧边链接3   
    20.     <link rel="stylesheet" href="./styles/style.css">   
    21.     <link rel="stylesheet" href="./styles/style.css">   
    22. [*]侧边链接4   
    23.     <link rel="stylesheet" href="./styles/style.css">   
    24.     <link rel="stylesheet" href="./styles/style.css">   
    25. [*]侧边链接5   
    26.     <link rel="stylesheet" href="./styles/style.css">   
    27.     <link rel="stylesheet" href="./styles/style.css">
    28. [/list]   
    29.     <link rel="stylesheet" href="./styles/style.css">   
    30.     <link rel="stylesheet" href="./styles/style.css">   
    31.     <link rel="stylesheet" href="./styles/style.css">   
    32.     <link rel="stylesheet" href="./styles/style.css">   
    33.     <link rel="stylesheet" href="./styles/style.css">   
    34.     <link rel="stylesheet" href="./styles/style.css">   
    35.     <link rel="stylesheet" href="./styles/style.css">   
    36.     <link rel="stylesheet" href="./styles/style.css">   
    37.     <link rel="stylesheet" href="./styles/style.css">   
    38.     <link rel="stylesheet" href="./styles/style.css">   
    39.     <link rel="stylesheet" href="./styles/style.css">
    复制代码
文章页面


  • 大多情况应该是让其他页面留出容器空间直接引入嵌套的。
  1.    
  2.     <link rel="stylesheet" href="./styles/style.css">   
  3.     <link rel="stylesheet" href="./styles/style.css">   
  4.     <link rel="stylesheet" href="./styles/style.css">   
  5.     <link rel="stylesheet" href="./styles/style.css">文章标题   
  6.     <link rel="stylesheet" href="./styles/style.css">    文章主体
  7.    
  8.     <link rel="stylesheet" href="./styles/style.css">    文章页脚   
  9.     <link rel="stylesheet" href="./styles/style.css">   
复制代码
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
1.jpg
2.jpg

使用道具 举报
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
精滂软
2025-6-1 00:09:18

0

粉丝关注

14

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫