前端开发-css续3

小韩a

已于 2022-10-19 22:04:17 修改

阅读量312

点赞数

文章标签： css 前端 java

于 2022-10-12 18:34:10 首次发布

本文链接：https://blog.csdn.net/qq_52956229/article/details/127286219

版权

表单进阶

1.单选框

a) name属性：当一组选项进行单选时，此组的所有单选按钮都应赋予同一个name。

b) label标签：点击选项中的文字时即可选中复选框。

第一步为单选框标签设置一个id--例： <input type="radio" name="sex" id="man">

第二步 label标签中选中此id--例：<label for="man">男</label>

c) checked属性：即一组选项有一个时默认选项直接在input标签中加入此属性。

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>表单进阶-单选框</h1>
    <div>你对京东的满意程度</div>
    <div>
        <!-- 一组的选项要取一个名字才可以进行单选 -->
        <input type="radio" name="dx">非常满意
    </div>
    <div>
        <input type="radio" name="dx">满意
    </div>
    <div>
        <input type="radio" name="dx">一般
    </div>
    <div>
        <input type="radio" name="dx">不满意
    </div>
    <div>
        <div>你的性别</div>
        <div>
            <input type="radio" name="sex" id="man">
            <!-- label的应用可以点击文字字段时便让单选框选中 -->
            <label for="man">男</label>
        </div>
        <div>
            <input type="radio" name="sex" id="woman">
            <label for="woman">女</label>
        </div>
    </div>
    <div>
        <div>你的性别</div>
        <div>
            <!-- checked 默认选中 -->
            <!-- <input type="radio" name="xb" id="man1" checked="checked"> -->
            <!-- 也可直接写checked -->
            <input type="radio" name="xb" id="man1" checked>
            <!-- label的应用可以点击文字字段时便让单选框选中 -->
            <label for="man">男</label>
        </div>
        <div>
            <input type="radio" name="xb" id="woman1">
            <label for="woman">女</label>
        </div>
    </div>

</body>

样式：

单选框

2.复选框

与单选框所使用的三个属性相同，直接给出实例。

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 与单选框三个属性相同 -->
    <h1>表单进阶-复选框</h1>
    <div>
        <div>你的兴趣爱好:</div>
        <div>
            <input type="checkbox" name="hy" checked>抽烟
            <input type="checkbox" name="hy">喝酒
            <input type="checkbox" name="hy">烫头
        </div>
    </div>
    <div>
        <div>你擅长的技术:</div>
        <div>
            <input type="checkbox" name="js" id="html">
            <label for="html">html</label>
            <input type="checkbox" name="js" id="css">
            <label for="css">css</label>
            <input type="checkbox" name="js" id="js">
            <label for="js">js</label>
        </div>
    </div>
</body>

样式：

复选框

3.上传文件和隐藏字段

上传文件 type=“file”---点击后即可进入本人电脑文件部分。
图片按钮 type="image" src="" ---即将按钮替换成一张图片作为按钮。
隐藏按钮 type=“hidden”----此按钮不显示，通过value值带给后端信息。
禁用 disabled=“disabled”/disadled---此按钮或是文本禁用
只读 readonly ---不能输入

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>请截图说明</div>
    <div>
        <!-- 上传文件 -->
        <input type="file">
    </div>
    <div>图片按钮--用图片代替提交按钮(input type="submit")</div>
    <div>
        <form action="">
            <!-- 图片按钮 -->
            <input type="image" src="../image/submit.png">
        </form>
    </div>
    <div>
        <!-- 隐藏 -->
        <div>隐藏按钮</div>
        <input type="hidden" value="带给后端的个人信息">
    </div>
    <div>
        <div>禁用,只读</div>
        <div>
            <buttom disabled="disabled">注册</buttom>
            <br>
            <input type="radio" disabled>非常不满意
            <br>
            <input type="text" disabled value="111">
            <br>
            <!-- 只读功能 -->
            <input type="text" readonly value="222">
        </div>
    </div>
</body>

样式：

上传文件及部分属性

4.下拉菜单

select标签---形成下拉菜单

两个属性：

1) size 控制要显示几个选项

2) multiple 可以选中多个选项选择时需要按住shift键

option标签---与select标签配套使用，作为下拉菜单里的选项

两个属性：

1) value 提供给后端所需的value值，即让后端知道选择了哪一个选项

2) select 默认选中

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>表单进阶-下拉菜单</h1>
    <div>
        <div>收货地址</div>
        <!-- 选择 -->
        <!-- select 支持的属性 
             1.size 控制要显示几个选项
             2.multiple 可以多个选中 需要按住shift键
        -->
        <select size="3">
            <option>辽宁</option>
            <option selected>河北</option>
            <option>河南</option>
            <option>内蒙古</option>
            <option>北京</option>
            <option>上海</option>
        </select>
    </div>
    <div>
        <div>你想要买什么</div>
        <select size="3" multiple>
            <!-- option 支持的属性
                 1.value 提供给后端需要用的value值 让后端知道我们选中了哪一个
                 2.selected 默认选中
                 -->
            <option value="桌子" selected>桌子</option>
            <option value="椅子" selected>椅子</option>
            <option value="台灯">台灯</option>
            <option value="沙发">沙发</option>
            <option value="壁纸">壁纸</option>
            <option value="衣服">衣服</option>
        </select>
    </div>
</body>

样式：

下拉菜单

5.文本域

textarea标签--多行文本输入框

属性：

直接在标签中设置

cols 设置文本框行数--一般不用
rows 设置文本框列数--一般不用
placeholder 文本框提示文字
textarea的value值写在双标签内部，应注意空格

在style标签中设置

width---设置文本框的宽度
height---设置文本框的高度
resize---重新设置文本框的大小取值：both(默认值)/none/vertical-竖直/horizontal-水平

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        textarea {
            height: 100px;
            width: 100px;
            /* resize 重新设置大小，取值：vertical-竖直 horizontal-水平 both-都可(默认值) none-都不可*/
            resize: vertical;
        }
    </style>
</head>


<body>
    <h1>表单进阶-文本域 多行文本输入</h1>
    <!-- textarea 多文本输入框
        1.cols 设置几行
        2.rows 设置几列
        3.playceholder：提示文字
        4.默认value值写在双标签内部注意空格
     -->
    <div>
        <!-- 单行文本value值在标签内写 对比 -->
        <input type="text" value="xxx">
        <textarea cols="10" rows="10" placeholder="请输入你的意见">提前设置好的value
        </textarea>
        <textarea cols="10" rows="10" placeholder="请输入你的意见">

       </textarea>
    </div>
</body>

样式：

多行文本框

6.字段集

<fieldset> 标签可以将表单内的相关元素分组。
<fieldset> 标签会在相关表单元素周围绘制边框。
<legend> 标签为 <fieldset> 元素定义标题。

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        fieldset {
            border: 1px solid blue;
            width: 200px;
            height: 100px;
        }

        legend {
            border: 1px solid pink;
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>表单进阶-字段集</h1>
    <fieldset>
        <legend>性别</legend>
        <input type="radio" name="sex">男
        <input type="radio" name="sex">女
    </fieldset>
</body>

样式：

H5新增

1.html5 语法

内容类型

html5文件扩展符与内容类型保持不变，仍然为".html" 或".htm"

DOCTYPE声明

不区分大小写

指定字符集编码

meta charset="UTF-8"

可省略标记元素

不允许写结束标记的元素:br,col,embed,hr,img,input,link,meta

可以省略结束标记的元素:li,dt,dd,p,option,colgroup,thead,tbody,tfoot,tr,td,th

可省略全部标记的元素:html,head,body,colgroup,tbody

省略引号

属性值可以使用双引号，也可使用单引号。

2.html5 新增语义化标签

section元素表示页面中的一个内容区块相当于body
article元素表示一块与上下文无关的独立的内容
aside元素在article之外的，与article内容相关的辅助信息
header元素表示页面中一个内容区块或整个页面的标题相当于头部
footer元素表示页面中一个内容区块或整个页面的脚注相当于脚部
nav元素表示页面中导航链接部分相当于导航栏
figure元素表示一段独立的流内容，使用ficaption元素为其添加标题（第一个或最后一个子元素的位置）
main元素表示页面中的主要的内容（ie不兼容）

用来给开发者，爬虫来看的便于理解

图解

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        html,
        body {
            height: 100%;
        }

        header,
        footer {
            height: 50px;
            line-height: 50px;
            text-align: center;
            background-color: orange;
        }

        section {
            height: calc(100% - 100px);
        }

        nav,
        aside {
            width: 100px;
            height: 100%;
            background-color: #ccc;
            float: left;
        }

        main {
            width: calc(100% - 200px);
            height: 100%;
            background-color: aqua;
            float: left;
        }

        .article1,
        .article2 {
            height: 50%;
        }

        main header,
        main footer {
            background-color: pink;
        }

        main p {
            height: calc(100% - 100px);
        }
    </style>
</head>

<body>
    <!-- 这是头部 -->
    <!-- <div class="header"></div>
    <div class="body"></div>
    <div class="footer"></div> -->
    <header>header</header>
    <section>
        <nav>
            <figure>nav</figure>
            <ul>
                <li>11</li>
                <li>111</li>
                <li>111</li>
                <li>111</li>
            </ul>
        </nav>
        <main>
            <article class="article1">
                <header>article-header</header>
                <p>
                </p>
                <footer>article-footer</footer>
            </article>
            <article class="article2">
                <header>article-header</header>
                <p>11111</p>
                <footer>article-footer</footer>
            </article>
        </main>
        <aside>
            <figure>aside</figure>
            <p style="width:100px;">11111111111111111111111111111111111</p>
        </aside>
    </section>
    <footer>footer</footer>

</body>

遇到问题：p标签中明明设置了宽度为什么里面文字会继续显示在外面?

样式：

3.新增音频标签

<audio>音频标签

属性：

src 音频来源
controls 音频的控制条
loop 循环播放
autoplay 自动播放
muted 静音

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <p>

    </p>
    <h1>音频</h1>
    <!-- controls 出现音频的控制栏 
         loop：循环
         autoplay：自动播放
         muted：静音
    -->
    <audio src="../audio/抖音.m4a" controls loop autoplay muted></audio>
    
</body>

实例：

4.新增视频标签

<video>视频标签

属性：

src 音频来源
controls 音频的控制条
loop 循环播放
autoplay 自动播放
muted 静音
poster 海报封面即视频封面

实例：

样式：

5.增强表单-input

type="color" 生成一个颜色选择的表单
type="tel" 唤起拨号盘表单
type="search" 产生一个搜索意义的表单
type="range" 产生一个滑动条表单
type="number" 产生一个数值表单
type="email" 限制用户必须输入email类型
type="date" 限制用户必须输入日期
type="url" 限制用户必须输入url类型
type="month" 限制用户必须输入月类型
type="week" 限制用户必须输入周类型
type="time" 限制用户必须输入时间类型
type="datetime-local" 选取本地时间

实例:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <form action=" ">
        <div>
            <!-- 颜色选择 -->
            颜色选择：<input type="color" name="color">
        </div>
        <div>
            <!-- email -->
            email：<input type="email" name="email">
        </div>
        <div>
            <!-- url -->
            url地址：<input type="url" name="url">
        </div>
        <div>
            <!-- tel 一般在手机端使用 -->
            电话号码：<input type="tel" name="tel">
        </div>
        <div>
            <!-- 滑块效果 
                 min 最小值
                 max 最大值
                 value 起始值
                 step 步长
            -->
            滑块效果：<input type="range" name="range" min="100" max="200" value="100" step="10">
        </div>
        <div>
            <!-- 数字类型 -->
            数字类型：<input type="number" name="number" min="5" max="10" value="5" step="1">
        </div>
        <div>
            <!-- 搜索 -->
            搜索：<input type="search">
        </div>
        <div>
            <!-- 日期选择 -->
            日期选择：<input type="date" name="date">
            <div>
                <!-- 月份选择 -->
                月份选择：<input type="month" name="month">
                周数选择：<input type="week" name="week">
                实时选择：<input type="datetime-local" name="datetime-local">
            </div>

        </div>
        <input type="submit">
    </form>
</body>

样式：

6.增强表单-选项列表

datalist：选项列表

要想搜索框与选项列表相连必须加id。

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" list="mylist">
    <datalist id="mylist">
        <!-- option中必须加value值 -->
        <option value="手机"></option>
        <option value="手表"></option>
        <option value="手环"></option>
        <option value="手连"></option>
    </datalist>
</body>

样式：

7.表单增强-属性

autofocus属性--给文本框，选择框或者按钮控件加上该属性，当页面打开时，该控件自动获得国际焦点，一个页面只有一个。
required属性--验证输入不能为空
multiple--可以输入一个或多个值，每个值之间用逗号分开

例:<input type="email" multiple/>

还可以应用于file

pattern--将属性值设为某个格式的正则表达式，在提交时会检查其内容是否符合给定的格式

例:<input pattern ="[0-9][A-z]{3}" 即需要按此格式输入:一个数与三个大字母 "placeholder= ‘输入内容：一个数字与三个大字母’ "

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <form action=" ">
        <!-- autofocus 自动获取焦点
            required 必填项 不能为空
            multiple 支持多个邮箱地址，用逗号隔开
            pattern 正则表达式
        -->
        <div>
            用户名: <input type="text" name="username" autofocus required pattern="[0-9][A-Z]{3}">
        </div>
        <div>
            邮箱：<input type="email" name="email" required multiple>
        </div>
        <input type="submit">
    </form>
</body>

样式：

css3基础-增加

渐进增强：针对低版本浏览器进行构建，保证最基本的功能，然后在针对高级浏览器进行效果，交互等改进和追加功能达到更好的用户体验

优雅降级：一开始构建完整的功能，然后再针对低版本浏览器进行兼容。

区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应版本未来环境的需要，降级（功能衰减）意味着往回看，而渐进增强则意味着朝前看，同时保证其根基处于安全地带。

1.层级选择器

">" 子代选择器 --亲儿子
"+" 当前元素的后面第一个兄弟
"~" 当前元素的后面的所有兄弟

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 亲儿子选择器 */
        .box>li {
            border: 1px solid red;
        }

        /* + 给当前元素的后面第一个兄弟加属性*/
        .child+li {
            background-color: aqua;
        }

        /* ~ 给当前元素的后面所有亲兄弟加属性 */
        .son~li {
            background-color: aquamarine;
        }
    </style>

</head>

<body>
    <ul class="box">
        <li>111
            <ul>
                <li>111-1</li>
                <li>111-2</li>
                <li>111-3</li>
            </ul>
        </li>
        <li class="child">222</li>
        <li>333</li>
        <li class="son">444</li>
        <li>555</li>
        <li>666</li>
    </ul>
</body>

样式：

2.结构伪类选择器

X:first-child---匹配子集的第一个元素，IE7就可以支持
X:last-child---匹配父元素中的最后一个X元素
X:nth-child(n)---用于匹配索引值为n的子元素，索引值从1开始
X:only-child---这个伪类一般用的比较少，比较上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配
X:root---匹配文档的根元素，在HTML中，根元素永远是HTML
X:empty---匹配没有任何子元素(包括包含文本)的元素X

实例：包含first-child last-child nth-child属性

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 940px;
            height: 100px;
            margin: 0 auto;
            background-color: blue;
        }

        .box div {
            width: 300px;
            height: 100px;
            background-color: red;
            margin-right: 20px;
            float: left;
        }

        /* box的最后一个孩子 */
        .box div:last-child {
            margin-right: 0px;
        }

        li:first-child {
            background-color: red;
        }

        li:last-child {
            background-color: yellow;
        }

        /* 第几个指定属性 */
        li:nth-child(2) {
            background-color: blue;
        }

        /* 第几个，偶数2n或even
           奇数2n+1
              2n-1
              或odd
        */
        li:nth-child(2n) {
            border: 2px solid black;
        }

        li:nth-child(odd) {
            border: 3px solid green;
        }
    </style>
</head>

<body>
    <!-- 通过某种结构关系查找页面
         比如：
         匹配某元素第一个子元素
         匹配某元素最后一个子元素 
    -->
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
        <li>555</li>
    </ul>
</body>

样式：

实例:包含only-child :root empty 三个属性

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* html,
        body {
            height: 100px;
            background-color: yellow;
        } */
        /* :root代表根节点 可以代替html */
        :root,
        body {
            height: 100px;
            background-color: yellow;
        }

        div {
            width: 100px;
            height: 100px;
            border: 1px solid black;
        }

        /* 给具有唯一一个孩子的节点加属性 */
        div p:only-child {
            background-color: pink;
        }

        /* 给空盒子加属性 盒子中有空格也不行  */
        div:empty {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div>
        <p>111</p>
        <p>222</p>
    </div>
    <div>
        <p>111111</p>
    </div>
    <div>
        11111
    </div>
    <div></div>

</body>

样式：

3.目标伪类选择器

E:target---选择匹配E的所有元素，且匹配元素被相关URL指向

可以用来制作一个手风琴的效果。

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div .content {
            display: none;
        }

        div .content:target {
            display: block;
        }
    </style>
</head>

<body>
    <div>
        <a href="#aaa">aaa</a>
        <div id="aaa" class="content">
            CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...
        </div>
    </div>
    <div>
        <a href="#bbb">bbb</a>
        <div id="bbb" class="content">
            CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...
        </div>
    </div>
    <div>
        <a href="#ccc">ccc</a>
        <div id="ccc" class="content">
            CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...
        </div>
    </div>
</body>

样式：

4.UI元素状态伪类选择器-主要应用表单

E:enabled---匹配所有用户界面（form表单）中处于可用状态的元素
E:enabled---匹配所有用户界面（form表单）中处于不可用状态的E元素
E:enabled---匹配所有用户界面（form表单）中处于选中状态的元素E
E:selection---匹配E元素中被用户选中或处于高亮状态的部分

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 非禁用的*/
        input:enabled {
            background-color: pink;
        }

        /* 禁用的 */
        input:disabled {
            background-color: aquamarine;
        }

        /* 焦点会匹配此选择器 */
        input:focus {
            background-color: blue;
        }

        /* 选中后匹配 */
        input:checked {
            background-color: green;

        }

        /* 属性选择器 */
        input[type=checkbox] {
            /* 去掉默认样式 */
            appearance: none;
            /* 自己添加样式 */
            width: 15px;
            height: 15px;
            border: 1px solid black;
        }

        /* 选中之后匹配 应用于任何标签 */
        div::selection {
            background-color: aqua;
            color: blue;
        }
    </style>
</head>

<body>
    <form action="">
        用户名：<input type="text" name="username">
        <br>
        密码：<input type="password" name="password">
        <br>
        <!-- 受默认样式的管控 -->
        记住用户名 <input type="checkbox">
        <br>
        <input type="submit" disabled>
    </form>
    <div>
        CSDN是全球知名中文IT技术交流平台,创建于1999年,包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区...
    </div>
</body>

样式：

UI伪类状态选择器

5.否定与动态伪类选择器

否定伪类选择器

E:not(s)---匹配所有不匹配简单选择符s的元素E

动态伪类选择器---讲a链接的时候讲过

E:link--链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并未被访问过，常用于链接上个

E:visited--链接伪类选择器

选择匹配的E元素，而且匹配元素被定义了超链接并且已被访问过，常用于链接锚点上

E:active--用户行为选择器

选择匹配的E元素，且匹配元素被激活，常用于链接锚点和按钮上

E:hover--用户行为选择器

选择匹配的E元素，且用户鼠标停留在元素E上

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 否定选择器 */
        /* 除了这个其他都应用 */
        li:not(:first-child) {
            background-color: pink;
        }

        li:not(:nth-child(2n+1)) {
            background-color: aqua;
        }
        
    </style>
</head>

<body>
    <ul>
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
</body>

样式：

6.文本阴影

text-shadow:10px 10px 10px red;

即给文本添加阴影

第一个值代表水平方向位移，第二个值代表垂直方向位移，第三个值代表模糊程度，第四个值代表阴影颜色。

可以添加多个阴影，即在后面添加，后继续添加阴影

例： text-shadow:10px 10px 10px red，1px 1px 1px blue;

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            text-shadow: 10px 10px 10px red, 0px -10px 1px blue;
        }

        /* 第一个10px 水平方向位移
           第二个10px 垂直方向位移
           前两个值可被设置为负数
           第三个10px 模糊程度
           越大越模糊
           第四个 阴影颜色 */
        /* 可以写多个阴影 */
    </style>
</head>

<body>
    <div>大家好</div>
</body>

样式：

7.盒子阴影

盒子阴影-属性值
h-shadow	必需的，水平阴影的位置。允许负值
v-shadow	必需的，垂直阴影的位置。允许负值
blur	可选，模糊距离
spread	可选，阴影的大小
color	可选，阴影的颜色
inset	可选，从外层阴影（开始时）改变阴影内侧的阴影

例:box-shadow:10px 10px 5px #cccccc;

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            margin: 0 auto;
            /*  第一个值 水平阴影位置
                第二个值 垂直阴影位置
                第三个值 模糊距离
                第四个值 阴影大小
                第五个值 阴影颜色
                第六个值 是否让其为内阴影*/
            /* box-shadow: 10px 10px 3px 10px orange inset; */
            box-shadow: 10px 10px 3px orange;
        }
    </style>
</head>

<body>
    <div></div>
</body>

样式：

8.圆角边距

border-radius:10px;

使边框四个角的角度变圆。可以是一个值两个值三个值四个值。

一个值--四个角保持一致
两个值--左上角右下角一致,左下角右上角一致
三个值--左上左下右上,右下
四个值--顺时针方向

也可进行单独方向上的设置

border-top-left-radius --左上
border-bottom-left-radius --左下
border-top-right-radius --右上
border-bottom-left-radius --右下

圆形：取正方形盒子边长的各一半。

半圆：取长方形盒子，盒子长为宽的一半，取值为一半和0

扇形：取正方形盒子，其中一个值为盒子边长其他值为0

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: green;
            border: 20px solid red;
            /* px或百分比
               边框圆角效果 */
            /* 四个角保持一致 */
            /* border-radius: 10px; */
            /* 两个值 左上角右下角一致,左下角右上角一致 */
            /* border-radius: 10px 20px; */
            /* 三个值 左上 左下右上,右下 */
            /* border-radius: 10px 20px 30px; */
            /* 四个值 顺时针方向 */
            /* border-radius: 10px 20px 30px 40px; */
            /* 单独设置一个角 左上 */
            /* border-top-left-radius: 20px; */
            /* 右上 */
            /* border-top-right-radius: 20px; */
            /* 左下 */
            /* border-bottom-left-radius: 20px; */
            /* 右下 */
            /* border-bottom-right-radius: 20px; */
            /* 水平/垂直 四个角*/
            /* border-radius: 30px/60px; */
            /* 每个角 */
            /* border-radius: 10px 20px 30px 40px/60px 70px 80px 90px; */
            /* 这种单独设置是不支持的 */
            /* border-bottom-left-radius: 20px/10px;  不可以*/
            /* 圆形 取盒子边长的一半 两种方式 */
            /* border-radius: 120px; */
            border-radius: 50%;
        }

        .box {
            width: 200px;
            height: 100px;
            background-color: aquamarine;
            margin: 0 auto;
            border-radius: 100px 100px 0px 0px;
        }

        .sx {
            width: 200px;
            height: 200px;
            background-color: pink;
            margin: 0 auto;
            border-radius: 200px 0 0 0;
        }
    </style>
</head>

<body>
    <h3>圆形</h3>
    <div class="div1"></div>
    <h3>半圆</h3>
    <div class="box"></div>
    <h3>扇形</h3>
    <div class="sx"></div>
</body>

样式：

9.字体引入

字体模块：@font-face

@font-face是css3中的一个模块，主要是把自己定义的web字体嵌入到你的网页中，随着@font-face模块的出现，我们在web开发中使用字体不怕只能使用web安全字体（@font-face这个功能早在IE4就支持）

语法规则：

@font-face{

font-family:<YourWebFontName>;

src:<source>[<fomat>];

[font-weight:<weight>];

[font-style:<style>];

}

@font-face语法说明：

YourWebFontName此值用的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的web元素中的font-family，如“font-family:YourWebFontName”
source-此值用的是你自定义的字体的存放路径，可以是相对路径也可以是绝对路径

10.怪异盒模型

即将padding和border值包含在width，和height中

含义：更改原有布局盒子模型的计算方式，通过box-sizing属性的取值进行更改

属性：box-sizing---允许您以特定的方式定义匹配某个区域的特定元素

属性值：content-box---这是由css2.1规定的宽度高度行为，宽度和高度分别应用到元素的内容框，在宽度和高度之外绘制元素的内边距和边框。

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box1 {
            width: 200px;
            height: 200px;
            padding: 30px;
            border: 5px solid black;
            background-color: green;
            /* 标准盒模型 */
            box-sizing: content-box;
        }

        .box2 {
            width: 200px;
            height: 200px;
            margin-top: 100px;
            background-color: red;
            border: 5px solid black;
            /* 怪异盒模型 */
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>

样式：

11.弹性盒

弹性盒---一种新的布局方式，特别适合移动端布局。

弹性盒---display: flex; 在父元素中加入

影响：

让子元素默认横向排列
行内元素变为块元素
只有一个子元素的时候，margin:auto会让子元素自动居中

弹性盒-主轴方向修改

主轴：当弹性盒中的盒子默认方式水平排列时，主轴即为水平方向，侧轴为垂直方向

当弹性盒中的盒子改为垂直排列时，主轴为垂直方向，侧轴为水平方向

flex-direction: column(垂直排列)/row(水平排列)/row-reverse(反向水平排列)/column-reverse(反向垂直排列);

弹性盒-主轴侧轴对称方式

调整主轴对齐方式:justify-content: flex-start(靠左或靠上)/flex-end(靠右或靠下)/flex-center(靠中间)/space-between(两端对齐)/space-around(距离环绕自身盒子左右两边距离相等)

调整侧轴对齐方式: align-items: flex-end(靠右或靠下)/flex-start(靠左或靠上)/flex-center(靠中间);

弹性盒-折行与行间距

折行：即当大盒子为弹性盒的时候，里面的盒子会按照默认方式水平排列，即使小盒子过多只会导致小盒子自身缩小。所以对于这种情况的解决出现了折行。即当小盒子排列超过大盒子的范围，即在下一行在进行排列。

折行：flex-wrap: wrap;

行间距：控制折行后的行间距。

行间距： align-content: flex-start(靠左或靠上)/flex-end(靠右或靠下)/flex-center(靠中间)/space-between(两端对齐)/space-around(距离环绕自身盒子左右两边距离相等);

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;
            /* 垂直排列 */
            flex-direction: column;
            /* row 水平排列
            column 垂直排列
            row-reverse 反向水平排列
            column-reverse 反向垂直排列 */
            /* 调整主轴对齐方向
               flex-start 靠左或靠上
               flex-end 靠右或靠下
               flex-center 靠中间
               space-between 两端对齐
               space-around 距离环绕 自身左右两边等距
               */
            justify-content: space-between;
            /* 调整侧轴对齐方式 
              flex-start 靠左或靠上
               flex-end 靠右或下
               flex-center 靠中间*/
            align-items: flex-end;
            /* 折行用法 
               如果盒子水平排列超过大盒子 默认时会将盒子缩小 排列在大盒子中
               折行后如果小盒子的排列超过大盒子则会在下一行进行排列
            */
            flex-wrap: wrap;
            /* 控制折行后行间距 
                flex-start 靠左或靠上
               flex-end 靠右或靠下
               flex-center 靠中间
               space-between 两端对齐
               space-around 距离环绕 自身左右两边等距
            */
            /* align-content: flex-end; */

        }

        .box div {
            width: 100px;
            height: 100px;
            border: 1px dashed black;
        }

        .box span {
            width: 100px;
            height: 100px;
            border: 1px dashed black;
        }

        .box2 {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;
        }

        .box1 {
            width: 100px;
            height: 100px;
            border: 1px dashed black;
            margin: auto;
        }
    </style>
</head>

<body>
    <!-- 弹性盒是一种新的布局方式，特别适用移动端 -->
    <!-- 影响：让子元素默认横向排列
               行内元素变为块元素
               只有一个元素的时候，margin:auto会自动居中
    -->
    <div class="box">
        <div>111</div>
        <div>222</div>
        <div>333</div>
        <div>444</div>
        <div>555</div>
        <div>666</div>
    </div>
    <div class="box">
        <span>111</span>
        <span>222</span>
        <span>333</span>
        <span>444</span>
    </div>
    <div class="box2">
        <div class="box1">111</div>
    </div>
</body>

样式：

12.项目属性设置

项目：弹性盒相当于容器，弹性盒中的小盒子相当于项目。

对齐方式

主轴为水平方向

align-self: flex-start(靠上)/flex-end(靠下)/center(居中)/baseline(于flex-start相似)/stretch(拉伸-不要设置项目的高度);

主轴为垂直方向

align-self: flex-start(靠左)/flex-end(靠右)/center(居中)/baseline(于flex-start相似)/stretch(拉伸-不要设置项目的宽度);

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;

        }

        .box div {
            width: 100px;
            /* height: 100px; */
            border: 1px dashed black;
            /* 怪异盒模型 */
            box-sizing: border-box;
        }

        .div1 {
            /* 居中 */
            height: 100px;
            align-self: center;
        }

        .div2 {
            /* 靠上 */
            height: 100px;
            align-self: flex-start;
        }

        .div3 {
            /* 靠下 */
            height: 100px;
            align-self: flex-end;
        }

        .div4 {
            height: 100px;
            align-self: baseline;
        }

        .div5 {
            /* 拉伸
               不设置div高度时 会拉伸到父盒子的高度 */
            align-self: stretch;
        }

        /* 主轴方向为垂直方向
           要想使stretch有用需去掉宽度哦
        */
        .box1 {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;
            /* 弹性盒垂直排列 */
            flex-direction: column;
        }

        .box1 div {
            /* width: 100px; */
            height: 100px;
            border: 1px dashed black;
            /* 怪异盒模型 */
            box-sizing: border-box;
        }

        .div6 {
            /* 居中 */
            align-self: center;
        }

        .div7 {
            /* 靠上 */
            align-self: flex-start;
        }

        .div8 {
            /* 靠下 */
            align-self: flex-end;
        }

        .div9 {
            align-self: baseline;
        }

        .div10 {
            /* 拉伸
               不设置div高度时 会拉伸到父盒子的高度 */
            align-self: stretch;
        }
    </style>
</head>

<body>
    <!-- 弹性盒排列方式水平排列 -->
    <div class="box">
        <div class="div1">111</div>
        <div class="div2">222</div>
        <div class="div3">333</div>
        <div class="div4">444</div>
        <div class="div5">555</div>
    </div>
    <!-- 弹性盒排列方式垂直排列 -->
    <div class="box1">
        <div class="div6">111</div>
        <div class="div7">222</div>
        <div class="div8">333</div>
        <div class="div9">444</div>
        <div class="div10">555</div>
    </div>
</body>

样式：

调整顺序

order: 1; 用来调整项目的顺序值越大越靠后。

实例:

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 项目调整顺序 */
        .box2 {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;

        }

        .box2 div {
            width: 100px;
            height: 100px;
            border: 1px dashed black;
            /* 怪异盒模型 */
            box-sizing: border-box;
        }


        .div12 {
            /* 顺序调整 值越大越靠后 */
            order: 2;
        }

        .div13 {
            order: 1;
        }


        .div15 {
            order: -1;
        }

    </style>
</head>

<body>
    <!-- 项目调整顺序 -->
    <div class="box2">
        <div class="div11">111</div>
        <div class="div12">222</div>
        <div class="div13">333</div>
        <div class="div14">444</div>
        <div class="div15">555</div>
    </div>
</body>

样式：

剩余宽高-宽高自适应

flex:1; 用来占满剩余宽高如果多个项目设置此属性则值越大所占比例越大

应用：可应用于三栏布局

实例：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        /* 项目剩余宽高 */
        .box3 {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            margin: 100px auto;
            /* 弹性盒 */
            display: flex;

        }

        .box3 div {
            width: 100px;
            height: 100px;
            border: 1px dashed black;
            /* 怪异盒模型 */
            box-sizing: border-box;
        }

        .div16 {
            flex: 2;
        }

        .div17 {
            /* 占满剩余空间 */
            /* 只有一个盒子设置flex则填满剩余空间
               如果多个盒子设置了flex值则按比例分空间
               例: div16为flex2,div17为flex1,div18不设置flex则为原来的宽度
                   则剩余空间即大盒子宽度减去div18的宽度, div16占剩余空间的2/3 div17占剩余空间的1/3
            */
            flex: 1;
        }

        .div18 {
            order: 1;
        }
    </style>
</head>

<body>
    <!-- 剩余宽高 -->
    <div class="box3">
        <div class="div16">111</div>
        <div class="div17">222</div>
        <div class="div18">333</div>
    </div>
</body>

样式：