HTML 学习笔记

HTML 学习笔记

目录

章 节 对应文件
第一章 HTML (一)块级标签 块级标签.html
(二)行级标签 行级标签.html
(三)综合应用:表单 exercise.html / exercise2.html / exercise3.html
(四)HTML5 新增元素 exercise4.html / layout.html
第二章 CSS美化页面 (五)CSS 选择器与样式引入 CSS exercise1.html / CSS/login.css
(六)CSS 常用样式 CSS exercise2.html / CSS/style.css
(七)盒子模型与浮动 CSS exercise3.html / CSS/style2.css
(八)定位、列表样式与伪类 CSS exercise4.html / CSS/position.css / login.html
第三章 CSS3及页面布局 (九)CSS3 新特性 CSS/CSS3.html
(十)变形与过渡 tranform.html / transition.html
(十一)媒体查询 media.html
(十二)网格布局 grad.html
(十三)flex 弹性布局 CSS/flex.html

第一章 HTML

(一)块级标签

文件: 块级标签.html

<!--声明文档类型为HTML5-->
<!DOCTYPE html>
<!--html网页应该在html标签间完成-->
<html lang="en">
<!--头部信息-->
<head>
    <!--网页元数据 字符集为UTF-8  支持中文-->
    <meta charset="UTF-8">
    <!--网页标题-->
    <title>第一次测试学习</title>
</head>
<!--HTML标签都是一种容器-->
<body>
<!--网页标题-->
    <h1>一级标题</h1>
    <!--标签自闭合-->
    <hr>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

    <h1>这是什么</h1>
    <hr>
    <p>
        段落标签
    </p>
    <hr>
    <h1>这是什么</h1>
<!--Unordered List 无序列表-->
    <ul>
<!--List Item 列表项-->
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ul>
<!--Ordered List 可选type-->
    <ol type="A">
<!--List Item 列表项-->
        <li>第一项</li>
        <li>第二项</li>
        <li>第三项</li>
    </ol>
<hr>
<hr>
    <h1>表格标题</h1>
<hr>
<!--表格的每一个元素都有边框-->
    <table border="1">
        <!---->
        <caption><h1>薪资表</h1></caption>
        <!--表头-->
        <thead>
            <tr>
        <!--table row-->
                <td>姓名</td>
                <td>薪资</td>
            </tr>
        </thead>
        <tbody>
        <!--网页的字体部分-->
            <tr>
                <td>张三</td>
                <td>20000</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>15000</td>
            </tr>
        </tbody>
        <!--脚注:主要用于信息统计-->
        <tfoot>
            <tr>
                <td>平均薪资</td>
                <td>17500</td>
            </tr>
        <tr>
            <td>总薪资</td>
            <td>35000</td>
        </tr>
        </tfoot>
    </table>

<hr>
    <!--不规则表格-->
    <table border="1">
        <caption><h1>成绩信息表</h1></caption>
        <thead>
        <tr>
            <!--rowspan 行的范围 2表示2行 默认为1 colspan 列-->
            <td rowspan="2" colspan="1">姓名</td>
            <td rowspan="1" colspan="5">成绩</td>

        </tr>
        <tr>
            <td rowspan="1" colspan="1">6月</td>
            <td rowspan="1" colspan="1">7月</td>
            <td rowspan="1" colspan="1">8月</td>
            <td rowspan="1" colspan="1">9月</td>
            <td rowspan="1" colspan="1">10月</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>60</td>
            <td>70</td>
            <td>80</td>
            <td>90</td>
            <td>100</td>
        </tr>
        </tbody>
    </table>
<div>
    这是没有边距的行 也是块级元素
</div>
        <!--表单用来采集数据 然后发送数据-->
    <form action="块级标签.html" method="get">
        <!--按钮-->
        <input type="submit" value="提交">
    </form>
</body>
</html>

要点:

  • HTML 是 Hyper Text Markup Language 的简称,即超文本标记语言,是一种用于创建网页的标准标记语言,运行在浏览器上,由浏览器来解析执行。
  • 基本结构:<!DOCTYPE html> 定义文档类型为 HTML5 文档;<html> 整个文档内容只能定义在该标签对之间;<head> 头部信息;<meta charset="utf-8"> 定义字符集编码为 utf-8,支持中文;<title> 定义文档显示的标题;<body> 主体内容部分。
  • 标签一般成对出现,分别叫开放标签和闭合标签。
  • 块级标签特征:① 总是在新行上开始;② 高度、行高以及外边距和内边距都可控制;③ 宽度缺省是它的容器的 100%;④ 可以容纳内联元素和其他块元素。
  • 常用块级标签:h1~h6 标题、hr 水平线、p 段落、ul/li 无序列表、ol/li 有序列表(可选 type)、table 表格、div 层标签、form 表单。
  • 表格:border 表示单元格边框大小;caption 表格标题;thead 表头;tbody 主体;tfoot 尾部,主要用于信息统计;rowspan 跨行、colspan 跨列(默认为 1)。
  • 表单用来采集数据然后发送数据:action 指请求资源,method 指请求方式;type 为 submit 的按钮可以提交表单。

(二)行级标签

文件: 行级标签.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>行级标签学习</title>
</head>
<body>
    <h1>图像标签</h1>
    <!--锚链接-->
    <a href="#a">去图片底部</a>
    <hr>
    <img id="img" src="imgs/demo.jpg" title="'临' '兵' '斗' '者'" alt="图片不见了">

    <hr>
    <!--屏幕分辨率:1600*900-->
    <span style="font-size: 39px;color: red">藤都子</span>老师,我想我再也不会
    <!--页面间连接-->
    <a href="块级标签.html" target="_blank">忘 记 </a>你吧...
    <!--锚链接 id唯一-->
    <p id="a">
        BangDream开播了 真的假的
    </p>
    <a href="#img">再看一遍</a>
    <!--功能性连接-->
    <a href="https://www.bilibili.com/bangumi/play/ep1231523?spm_id_from=333.337.0.0">点击这里</a>
    <hr>
    <hr>
    <hr>
    <form action="" method="get">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="number" name="age">
        <input type="date" name="datte">
        <input type="datetime-local" name="birthday">
        <!--name属性除了采集数据功能外 还具有分组功能-->
        <!--注意:input标签type值为radio/checkbox
        只要标签上存在checked属性 那么该标签就会出现选中状态-->
        <input type="radio" value="M" name="sex">男
        <input type="radio" value="F" name="sex">女
        <input type="radio" value="O" name="sex" checked>其他
        <input type="checkbox" value="1" name="channel">MyGo
        <input type="checkbox" value="2" name="channel" checked>Ave Mujica
        <input type="checkbox" value="3" name="channel">MewTybe
        <input type="file" name="head">
        <input type="hidden" name="名称">
<!--当input的type值为submit时 按钮可以提交表单 表单通过name采集数据-->
        <input type="submit" value="按钮">
    </form>
<hr>
<hr>
<hr>
    <!--label和span标签都具有范围选择功能 -->
    <label>这是文本框</label>
    <label>
        <!--文本域-->
        <textarea readonly rows="10" cols="50">
            我要看BangDream
            阅读并同意遵守邦邦世界观...
        </textarea>
    </label>

    <form action="" method="get">
        <div>
            <!--只读-->
            <input type="text" value="admin" readonly>
            <!--权限管理-->
            <input type="text" value="admin" disabled>
        </div>
        <div>
            <!--for属性值一定是一个input输入框ID值 表示label标签
            被点击时 对应input输入框获得焦点-->
            <label for="imput1">账号:</label>
            <input  id="imput1" type="text" name="username">
        </div>
        <div>
            <!--下拉列表-->
            <select name="sex">
                <option value="">请选择</option>
                <option value="M">男</option>
                <option value="F">女</option>
                <option value="O">其他</option>
            </select>
        </div>
    </form>
</body>
</html>

要点:

  • 行级标签特征:① 和其他元素都在一行上;② 高度、行高及外边距和内边距不可改变;③ 宽度就是其内容的宽度,不可改变。
  • 图像标签 img:title 鼠标放在上面显示的内容;alt 图片未加载时显示。
  • 范围标签 span;label 和 span 都具有范围选择功能;label 的 for 属性值是一个 input 输入框的 ID 值,label 被点击时对应输入框获得焦点。
  • 超链接 a 通常分为页面间链接、锚链接和功能性链接;target 取 _blank 在新窗口中打开,_self 在当前窗口中打开(默认值);锚链接定位同一个页面中的元素时,页面名称可以省略(直接写 #ID),且 id 唯一。
  • 输入标签 input:type 类型、name 名称、value 值;name 除了采集数据外还有分组功能(radio 同名为一组,只能选一个);只要标签上存在 checked 属性,该标签就会出现选中状态;type 为 hidden 是隐藏域。
  • 文本域 textarea:rows/cols 控制大小,placeholder 提示信息。
  • 下拉列表框 select/option。
  • 只读 readonly(只能读,不能修改)与禁用 disabled。

(三)综合应用:表单

文件: exercise.html(登录)、exercise2.html(注册)、exercise3.html(查询)

登录表单 exercise.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise</title>
</head>
<body>
    <form action="" method="get">
        <div>
            <label>账号:</label>
            <input type="text" name="username" placeholder="请输入账号" required>
        </div>
        <div>
            <label>密码:</label>
            <input type="password" name="password" placeholder="请输入密码" required>
        </div>
        <div>
            <!--表单属性-->
            <label>联系电话:</label>
            <input type="text" name="phone" pattern="1[3-9][0-9]{9,9}">
        </div>
        <div>
            <input type="submit" value="登录">
        </div>
    </form>
</body>
</html>

注册表单 exercise2.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise2</title>
</head>
<body>
    <form action="" method="get">
        <div>
            <label>账&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号:</label>
            <input type="text" name="text">
        </div>
        <div>
            <label>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</label>
            <input type="password" name="password">
        </div>
        <div>
            <label>确认 密码:</label>
            <input type="password" name="confirm">
        </div>
        <div>
            <label>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:</label>
            <input type="radio" name="sex" value="M" checked>男
            <input type="radio" name="sex" value="F">女
            <input type="radio" name="sex" value="O">其他
        </div>
        <div>
            <label>国&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;籍:</label>
            <select name="country">
                <option value="">请选择</option>
                <option value="CN">中国</option>
                <option value="JP">日本</option>
                <option value="AM">美国</option>
            </select>
        </div>
        <div>
            <input type="submit" value="登录">
        </div>
    </form>
</body>
</html>

查询页面 exercise3.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise3</title>
</head>
<body>
    <div>
        <span>姓名</span><input type="text">
        <span>性别</span>
        <select>
            <option value="">请选择</option>
            <option value="M">男</option>
            <option value="F">女</option>
            <option value="O">其他</option>
        </select>
        <input type="button" value="查询">
    </div>
    <table border="1" width="75%">
        <thead>
        <tr>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>成绩</td>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>性别</td>
            <td>80</td>
        </tr>
        </tbody>

        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>性别</td>
            <td>80</td>
        </tr>
        </tbody>
        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>性别</td>
            <td>80</td>
        </tr>
        </tbody>
        <tbody>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>性别</td>
            <td>80</td>
        </tr>
        </tbody>
    </table>
</body>
</html>

要点:

  • HTML5 新增表单属性:placeholder 提示信息;required 必填项;pattern 正则表达式校验(如 1[3-9][0-9]{9,9} 校验 1 开头的 11 位手机号)。
  • &nbsp; 表示空格,用来把不同字数的 label(账号/密码/性别/国籍)撑成等宽对齐。
  • radio 同 name 分组、checked 默认选中;select 下拉列表默认选中第一项("请选择"的 value 为空)。
  • 查询页面 = 查询条件区(span + input + select + button)+ 结果展示区(table)。

(四)HTML5 新增元素

文件: exercise4.html(其他标签)、layout.html(结构标签)

exercise4.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>exercise4</title>
</head>
<body>
    <audio controls autoplay="autoplay" preload="auto" loop="loop">
        <source src="" />
        <source src="" />
        <source src="" />
        浏览器不支持该音频格式
    </audio>

    <video controls="controls" autoplay="autoplay" preload="auto">
        <source src="" />
        <source src="" />
        <source src="" />
        浏览器不支持该视频格式
    </video>

<input list="sex">
<datalist id="sex">
    <option>男</option>
    <option>女</option>
    <option>其他</option>
</datalist>
我在<time datetime="2026-02-14">情人节</time>有个约会
她长得很<mark>漂亮</mark>
</body>
</html>

layout.html(结构标签搭建页面布局):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面布局</title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        header {
            height: 40px;
            background-color: black;
            color: white;
        }
        main{
            height: calc(100% - 40px);
            display: grid;/*网格布局*/
            grid-template-columns: 200px calc(100% - 200px);
        }
        aside{
            background-color: red;
        }
        section{
            background-color: antiquewhite;
        }
        nav{
            height: 40px;
            background-color: aquamarine;
        }
        footer{
            height: 40px;
            color: white;
            background-color: black;
        }
        article{
            height: calc(100% - 80px);
        }
    </style>
</head>
<body>
    <header>
        页面页眉
    </header>
<!--页面主体部分-->
    <main>
        <aside>
            侧边栏
        </aside>
        <!--页面内容区块-->
        <section>
            <nav>操作导航</nav>
            <article>独立内容块</article>
            <!--页面脚注-->
            <footer>页面脚注</footer>
        </section>
    </main>

</body>
</html>

要点:

  • 结构标签:header 页眉、main 页面主体部分、aside 侧边栏、nav 操作导航、section 内容区、article 独立内容区、footer 脚注。layout.html 就是课件里"结构标签"一节的经典页面布局(网格布局的细节见(十二))。
  • 音频标签 audio:controls 控制页面上是否显示音频的操作控件;autoplay 表示音频在就绪后马上播放;loop 表示音频结束后重新播放;preload 取 auto(页面加载后载入整个音频)、metadata(只载入元数据)、none(不载入)。支持多个 source,浏览器按顺序使用第一个支持的格式。常见音频格式:MP3、OGG、Wav。
  • 视频标签 video:常见格式 avi、flv、mp4、mkv、ogv,用法与 audio 标签一样。
  • 列表标签 datalist:input 的 list 属性值对应 datalist 的 id,输入时可从选项中选。
  • 时间标签 time:没有实际意义,只是供机器识别,比如搜索引擎、爬虫分析。
  • 标记标签 mark:高亮显示。

第二章 CSS美化页面

(五)CSS 选择器与样式引入

文件: CSS exercise1.html、CSS/login.css(被它引入的外部样式)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>XXX登录系统</title>
<!--1.-->
    <!--标签选择器就是使用标签名来选择元素-->
<!--    <style>-->
<!--        div{-->
<!--            color: red;/*文本字体颜色*/-->
<!--        }-->
<!--        /*类选择器*/-->
<!--        .content{-->
<!--            color: deeppink;-->
<!--        }-->
<!--        /*ID选择器*/-->
<!--        #a{-->
<!--            color:blue;-->
<!--        }-->
<!--    </style>-->
<!--2(主要)-->
<!--    <link href="login.css" rel="stylesheet" type="text/css">-->
<!--3(只有CSS3生效)-->
    <style>
        /*CSS语法引入外部样式*/
        @import url(css/login.css);
    </style>
<!--CSS样式引入也具有优先级:行内样式>内部样式>外部样式-->
    <style>
        /*后代选择器与子代选择器只有 > 的区别*/
        div > ul > li{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        <ul>
            <li>列表项</li>
        </ul>
        <h1>
            <ul>
                <li>列表项</li>
            </ul>
        </h1>
    </div>
    <div id="a" class="content">
        这是一段文字
    </div>
</body>
</html>
/* CSS/login.css */
div{
    color: red;/*文本字体颜色*/
}
/*类选择器*/
.content{
    color: deeppink;
}
/*ID选择器*/
#a{
    color:blue;
}

要点:

  • CSS 是 Cascading Style Sheet 的简写,表示层叠样式表,主要用于渲染 HTML 元素在网页中的展示效果,包括对元素高度、宽度、字体、颜色、背景图片、边距、定位、呈现方式等设定。
  • CSS 选择器分为基本选择器和层次选择器。基本选择器分 ID 选择器、类选择器和标签选择器三大类,优先级:ID 选择器 > 类选择器 > 标签选择器。
  • 层次选择器:后代选择器 div ul li(选所有后代)与子代选择器 div > ul > li(只选直接子元素),两者只有 > 的区别。
  • 样式引入三种:行内样式(style 属性)、内部样式(style 标签)、外部样式(link 标签或 @import url())。优先级:行内样式 > 内部样式 > 外部样式。
  • @import url() 是用 CSS 语法引入外部样式(课件注释:只有 CSS3 生效);link 是 HTML 标签方式,更常用。

(六)CSS 常用样式

对应文件: CSS exercise2.html、CSS/style.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
    <form action="" method="get">
        <input type="password" name="confirm">
        <div>
            <label>账号</label>
            <input type="text" name="text">
        </div>
        <div>
            <label>密码</label>
            <input type="password" name="password">
        </div>
        <div>
            <label>确认密码</label>
            <input type="password" name="confirm">
        </div>
    </form>

<p>
111这是一串文字
</p>
<div id="center">
    这是文字
</div>
</body>
</html>
/* CSS/style.css */
/*容器中的元素可以从容器中继承CSS样式*/
html,
body,
input{
    font-family: 楷体;
    font-size: 50px;
    font-style: italic;
    font-weight: bold;

    /*font: italic bold 50px 华文楷体;*/
}
/*label和span默认情况下是没有宽度和高度,并不能直接设置,必须将它们变成块元素或者行元素才能设置*/
label{
    /*display属性表示元素的展示方式*/
    display: inline-block;
    width: 70px;
    text-align: justify;
    text-align-last: justify;
}

p{
    /*设置首行文本的缩进*/
    text-indent: 30px;
}
#center{
    /*设置文本的行高*/
    height: 600px;
    line-height: 60px;

    background-image: url("../imgs/bg.png");
    background-position: 20px , 20px;
    background-repeat: no-repeat;
    /*文本装饰:eg:下划线*/
    text-decoration: underline;
}

要点:

  • 字体:font-family 字体、font-size 像素值、font-style 正常|斜体、font-weight 粗细;复合属性 font 有顺序:风格 粗细 大小 类型。
  • 容器中的元素可以从容器中继承 CSS 样式(html、body、input 一起设置就是利用继承)。
  • label 和 span 默认没有宽度和高度,不能直接设置,必须将它们变成块元素或行内块元素才能设置:display: inline-block。
  • 文本:text-indent 首行缩进;line-height 行高;text-decoration 文本装饰(下划线);两端对齐要配 text-align: justify + text-align-last: justify(justify 对最后一行不生效)。
  • 背景:background-image url("图片地址")、background-position 位置、background-repeat 重复|不重复。

(七)盒子模型与浮动

对应文件: CSS exercise3.html、CSS/style2.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式</title>
    <link href="css/style2.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div class="s">

    </div>
    <!--浮动的元素不占用页面空间,与其他元素不在同一个层面-->
    <div class="f1">

    </div>
    <div class="f2">

    </div>
    <div class="c"></div>
    <div class="box">
        <div class="f1"></div>
        <div class="f2"></div>
        <div class="c"></div>
    </div>
</body>
</html>
/* CSS/style2.css */
html,
body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.s{
    height: 100px;
    /*border-color: red;*/
    /*!*边框风格*!*/
    /*border-style: solid;*/
    /*border-width: 2px;*/
    border: 1px solid   red;
    /*外边距*/
    margin: 10px 20px 30px 40px;
    /*内边距*/
    padding: 10px 20px 30px 40px;
}

.f1,
.f2{
   /*float: left;*/
    width: 200px;
    height: 120px;
    border: 1px solid red;
}
.f1{
    float: left;
}
.f2{
    float: right;
}
.box{
    height: 200px;
    background-color: red;
}
.c{
    /*浮动的元素原本不在一个层级 清除后在一个层级*/
    clear: both;
}

要点:

  • 盒子模型:HTML 中的每一个元素都是一个容器,这个容器就像是一个盒子,它包括:外边距、边框、填充(内边距)和实际内容。
  • 元素的总宽度 = 左外边距 + 左边框 + 左内边距 + 宽度 + 右内边距 + 右边框 + 右外边距;总高度同理(上、下)。
  • 边距有 4 个方向,简写时按"上 右 下 左"的顺序:margin 外边距、padding 内边距;border 边框可按"宽度 风格 颜色"简写。
  • 浮动:元素浮动有两个方向 left 和 right;浮动的元素不占用页面空间,与其他元素不在同一个层级。
  • 清除浮动:clear 有三种选择 left、right 和 both;清除浮动后,浮动的元素就与其他元素在同一个层级了。

(八)定位、列表样式与伪类

对应文件: CSS exercise4.html、CSS/position.css、login.html(引入 CSS/font.css 图标字体)

CSS exercise4.html(元素定位):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素定位</title>
    <link rel="stylesheet" href="css/position.css" type="text/css">
</head>
<body>
    <div class="box">
        <div class="p1"></div>
        <div class="p2"></div>
        <div class="p3"></div>
    </div>
<input class="fixed" type="button" value="按钮">

<ul>
    <li>列表项1</li>
    <li>列表项2</li>
    <li>列表项3</li>
</ul>

<div class="text">
    鼠标放上去颜色会发生变化
</div>
</body>
</html>
/* CSS/position.css */
html,
body{
    width: 100%;
    height: 200%;
    margin: 0;
    padding: 0;
}

.box{
    height: 500px;
    background-color: red;
    margin: 40px;
}

.p1{
    height: 100px;
    background-color: aqua;
    /*相对定位:参照物就是自身*/
    position: relative;
    top: 10px;
    left: 20px;
}
.p2{
    height: 100px;
    background-color: bisque;
    /*绝对定位的元素必须要设置宽和高 决定定位的是参照该元素最近含有定位为relative或者absolute的父容器
    如果没有 参照物就是body*/
    position: absolute;
}
div{
    display: block;
}

.fixed{
    width: 80px;
    height: 80px;
    position: fixed;
    right: 5px;
    top: 10px;
}

ul{
    list-style-type: square;
    /*list-style-image: url("");*/
    list-style-position:  inside;
    /*list-style: square inside url("");*/
}

.text:hover{
    color: red;
    font-size: 50px;
}

a:link{
    color: red;
}
a:visited{
    color: deeppink;
}
a:hover{
    color: blue;
}
a:active{
    color: green;
}

login.html(定位的应用 + 图标字体):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="CSS/font.css">
    <style>
        .group{
            position: relative;
        }
        .group > i{
            position: absolute;
            left: 3px;
            top: 4px;
            color: red;
        }
        .group > input{
            padding-left: 20px;
            outline: none;
            border: none;
            border-bottom: 1px solid #ddd;
        }
    </style>
</head>
<body>
    <div class="group">
        <i class="fa fa-user"></i>
        <input type="text">
    </div>
    <div>
        <i class="fa fa-clock"></i>
        <input type="password">
    </div>
    <div>
        <input type="button" value="登录">
    </div>
</body>
</html>

要点:

  • 元素定位分为无定位、绝对定位、相对定位和固定定位四种。元素定位是根据参照物来进行的,定位时根据元素与参照物上下左右四个方向中任意相邻的两个方向的距离来进行定位,定位方式不同,参照物也不一样。元素定位默认为无定位。
  • 相对定位 position: relative,参照物就是自身;绝对定位 position: absolute,参照最近含有定位(relative/absolute)的父容器,没有就参照 body;固定定位 position: fixed,参照浏览器窗口。绝对定位和固定定位的元素必须设置宽度和高度。
  • login.html 的应用:.group 设为 relative 作为参照物,图标 i 用 absolute 定位到输入框内部,left/top 是相对 .group 的偏移;图标来自 CSS/font.css 里 @font-face 定义的图标字体(fa fa-user 这种类名就是字体图标)。
  • 列表样式:list-style-type 项目符号(实心圆|空心圆|正方形|数字)、list-style-position 内部|外部、list-style-image url("图片地址")。
  • 伪类样式:常用的是鼠标悬浮 :hover;超链接伪类书写顺序有要求🅰️link -> a:visited -> a:hover -> a:active。

第三章 CSS3及页面布局

(九)CSS3 新特性

对应文件: CSS/CSS3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3新特性</title>
    <style>
        #border{
            width: 200px;
            height: 200px;
            border: 1px solid black;
            border-radius: 80px;
            /*box-shadow: inset 20px 20px 30px 1px red;*/
            /*线性渐变*/
            /*background-image: linear-gradient(to right top,red,green,blue);*/
            /*径向渐变*/
            background-image: radial-gradient(circle,red,yellow,blue);
        }

        .text{
            width: 10px;
            /*文本阴影与盒子阴影的区别在于:文本阴影无内外之分,且文本阴影没有阴影大小设置*/
            text-shadow: 2px 2px 2px red;
            /*文本溢出时候不换行*/
            white-space: nowrap;
            /*元素溢出部分隐藏*/
            overflow: hidden;
            /*文本溢出部分使用省略号显示*/
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div id="border">

    </div>

    <div class="text">文本阴影</div>
</body>
</html>

要点:

  • border-radius 用于创建圆角。
  • box-shadow 用来添加盒子阴影,格式:box-shadow: 阴影类型 水平阴影位置 垂直阴影位置 阴影模糊距离 阴影大小 阴影颜色,inset 表示内阴影。
  • CSS3 渐变:线性渐变 linear-gradient(渐变方向, 颜色1, ..., 颜色n),颜色沿着一条直线过渡(如 to right 从左到右、to bottom right 从左上角到右下角);径向渐变 radial-gradient(circle, 颜色...),颜色不再沿直线变化,而是从一个起点朝所有方向混合。
  • 文本效果:text-shadow 向文本添加阴影,与盒子阴影的区别在于:文本阴影无内外之分,且文本阴影没有阴影大小设置。
  • 超出部分显示省略号,三条配合使用:white-space: nowrap(文本不换行,在同一行继续)+ overflow: hidden(元素溢出部分隐藏)+ text-overflow: ellipsis(用省略号代表被修剪的文本)。

(十)变形与过渡

对应文件: tranform.html、transition.html

tranform.html(变形):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>变形</title>
    <style>
        .t{
            width: 200px;
            height: 200px;
            background-color: red;
            /*transform: translate(20px,20px);*/
            /*transform: scale(0.75,1.8);*/
            /*transform: rotate(10deg);*/
            transform: skew(20deg);

        }
    </style>
</head>
<body>
    <div class="t"></div>
</body>
</html>

transition.html(过渡):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>过渡效果</title>
    <style>
        #tran{
            width: 200px;
            height: 200px;
            background-color: red;
            /*宽度发生变化时就会发出过渡效果*/
            transition: width .5s ease 0s;
        }
        #tran:hover{
            width: 800px;
        }
    </style>
</head>
<body>
    <div id="tran"></div>

</body>
</html>

要点:

  • CSS3 变形是一些效果的集合:平移 translate(x,y) 基于 X、Y 坐标重新定位元素;缩放 scale(x,y) 使元素尺寸发生变化,只接收一个值时同时设置 X 与 Y;旋转 rotate(degree) 取度数值,单位 deg,取正值时元素相对原来中心顺时针旋转;倾斜 skew(x,y) 取度数值。多个变形函数以空格分开。
  • 过渡 transition 呈现的是一种动画转换的过程,格式:transition: 过渡属性 过渡时间 过渡函数 延迟。过渡函数:ease(默认,慢速开始然后变快然后慢速结束)、linear(相同速度)、ease-in / ease-out / ease-in-out。
  • 过渡效果的触发时机:伪类触发(:hover、:active、:focus、:checked)、媒体查询(@media 判断设备尺寸)、JavaScript 触发。
  • 本例:hover 时宽度从 200px 变到 800px,宽度发生变化时就会触发过渡效果,0.5 秒内平滑过渡。

(十一)媒体查询

对应文件: media.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体查询</title>
    <style>
        @media screen and (min-width: 700px){
            .box{
                width: 200px;
            }
        }

        @media screen and (min-width: 900px){
            .box{
                width: 300px;
            }
        }

        @media screen and (min-width: 1200px){
            .box{
                width: 400px;
            }
        }
    </style>
</head>
<body>
    <div class="box">

    </div>

</body>
</html>

要点:

  • 语法:@media mediatype and|not|only (media feature) { CSS代码; }。
  • mediatype 媒体类型:all 用于所有设备;screen 用于电脑屏幕、平板电脑、智能手机等。
  • media feature 媒体功能:min-width 定义页面最小可见区域宽度;max-width 定义页面最大可见区域宽度。
  • 本例:窗口宽度 >=700px 时 box 宽 200px,>=900px 时 300px,>=1200px 时 400px;宽度同时满足多个条件时,写在后面的规则会覆盖前面的。

(十二)网格布局

对应文件: grad.html(layout.html 的结构标签布局已在(四),网格细节看这节)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
        html,
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /*.box{*/
        /*    !*子元素`一网格布局进行布局*!*/
        /*    display: grid;*/
        /*    !*网格按列布局 一行三列 每列一个*!*/
        /*    !*grid-template-columns: repeat(3,1fr);*!*/
        /*    !*使用百分比设置每一列的宽度*!*/
        /*    grid-template-columns: 10% 30% 60%;*/
        /*    grid-gap: 10px;*/
        /*    height: 100%;*/
        /*}*/
        /*.child{*/
        /*    background-color: blue;*/
        /*    color: white;*/
        /*}*/
        header{
            height: 40px;
            background-color: black;
        }
        main{
            display: grid;
            grid-template-columns: 200px calc(100% - 200px);
            height: calc(100% - 40px);
        }
        aside{
            background-color: red;
        }
        section{
            display: grid;
            grid-template-columns: 40px calc(100% - 80px) 40px;
            height: 100%;
        }
        nav,
        footer{
            background-color: green;
            height: 40px;
        }
    </style>
</head>
<body>
<!--    <div class="box">-->
<!--        <div class="child">1</div>-->
<!--        <div class="child">2</div>-->
<!--        <div class="child">3</div>-->
<!--        <div class="child">4</div>-->
<!--        <div class="child">5</div>-->
<!--        <div class="child">6</div>-->
<!--    </div>-->
    <header>

    </header>
    <main>
        <aside>

        </aside>
        <section>
            <nav></nav>
            <article></article>
            <footer></footer>
        </section>
    </main>
</body>
</html>

要点:

  • 网格布局就是指通过水平和垂直创建的一种模式,可以在这个模式上排列元素,网格通常具有行(row)和列(column)以及间隙(列跟列之间的距离,gutter)。
  • display: grid 把元素转为网格容器;grid-template-columns 设置每列的尺寸;grid-gap 设置间隙,也可以用 grid-row-gap 和 grid-column-gap 分开设置。
  • fr(fraction,片段)单位被用于在一系列长度值中分配剩余空间;repeat(4, 1fr) 表示创建 4 列等宽的网格,每列 1fr,所占空间量相等,也可以使用百分比依次设置每一列占比。
  • grad.html 的写法:main 高度用 calc(100% - 40px) 扣掉 header,两栏宽度 200px + calc(100% - 200px);section 再嵌套一层网格,左右 40px 的 nav/footer 夹着 article。

(十三)flex 弹性布局

对应文件: CSS/flex.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex布局</title>
    <style>
        html,
        body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
        /*.container{*/
        /*    !*该容器内的布局使用flex布局*!*/
        /*    display: flex;*/
        /*    !*在水平方向排列*!*/
        /*    !*flex-direction: row-reverse;*!*/
        /*    !*flex-wrap: wrap;*!*/
        /*    flex-flow: row wrap;*/
        /*    justify-content: flex-start;*/
        /*    align-items: stretch;*/
        /*    align-content: space-around;*/
        /*    height: 100%;*/
        /*}*/
        /*.child{*/
        /*    border: 1px solid #dddddd;*/
        /*    width: 14%;*/
        /*    !*height: 200px;*!*/
        /*}*/
        header{
            height: 40px;
            background-color: black;
        }
        main{
            height: calc(100% - 40px);
            display: flex;
            flex-direction: row;
        }
        aside{
            width: 200px;
            background-color: red;
        }
        section{
            display: flex;
            flex-direction: column;
            width: calc(100% - 200px);
        }
        nav,
        footer{
            background-color: green;
            height: 40px;
            width: 100%;
        }
        article{
            height: calc(100% - 80px);
        }

    </style>
</head>
<body>
<!--    <div class="container">-->
<!--        <div class="child" style="order: 3; flex-grow: 2.5">1</div>-->
<!--        <div class="child" style="order: 5; flex-shrink: 0.5">2</div>-->
<!--        <div class="child" style="order: 2; flex-grow: 1.5">3</div>-->
<!--        <div class="child" style="order: 4; flex-basis: 300px">4</div>-->
<!--        <div class="child" style="order: 1; flex: 2.0 0.8 auto">5</div>-->
<!--        <div class="child" style="order: 6; align-self: flex-end">6</div>-->
<!--    </div>-->
<header>

</header>
<main>
    <aside>

    </aside>
    <section>
        <nav></nav>
        <article></article>
        <footer></footer>
    </section>
</main>
</body>
</html>

要点:

  • Flex 是 Flexible Box 的缩写,意为"弹性布局"。采用 Flex 布局的元素称为 Flex 容器,它的所有子元素自动成为容器成员,称为 Flex 项。
  • 容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis),Flex 项默认沿主轴排列。
  • 容器属性(6 个):flex-direction 决定主轴方向(row 默认,主轴水平起点在左端;column 主轴垂直起点在上沿);flex-wrap 定义一条轴线排不下时如何换行(nowrap 默认不换行,wrap 换行第一行在上方);flex-flow 是前两者的简写;justify-content 定义项目在主轴上的对齐方式(flex-start 默认左对齐、center 居中、space-between 两端对齐间隔相等、space-around 每个项目两侧间隔相等);align-items 定义项目在交叉轴上的对齐方式(stretch 默认,项目未设高度时占满整个容器);align-content 定义多根轴线的对齐方式,只有一根轴线时不起作用。
  • Flex 项属性(6 个):order 定义排列顺序,数值越小排列越靠前,默认 0;flex-grow 定义放大比例,默认 0(有剩余空间也不放大);flex-shrink 定义缩小比例,默认 1(空间不足时缩小);flex-basis 定义分配多余空间之前项目占据的主轴空间,默认 auto(本来大小);flex 是三者的简写,默认 0 1 auto,建议优先使用;align-self 允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items。
posted @ 2026-10-31 22:24  程玖浔  阅读(3)  评论(0)    收藏  举报