黑马 pink h5+css3+移动端前端

网页概念

网页是网站的一页,网页有很多元素组成,包括视频图片文字视频链接等等,以.htm和.html后缀结尾,俗称html文件

HTML 超文本标记语言,描述网页语言,不是编程语言,是标记语言,有标签组成

超文本指的是不光文本,还有图片视频等等标签

常用浏览器

firefox google safari opera edge

浏览器内核: 读取网页内容, 渲染成网页

Web标准

W3C 组织制定的标准

浏览器不同,页面排版不同,有一套标准约束他,让用户看到的页面一样

Web标准有 : 结构html 表现css 行为js , 三部分是分离的

HTML

Html语法规范

尖括号包含

双标签和单标签

便签关系 : 包含和并列

html基本结构标签

标签名	定义	说明
	HTML标签	根标签
	文档头部	head标签必须设置标签title
	文档标题	网页标题
	文档主体	元素内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TWRqaWka-1689863224128)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703221041822.png)]

骨架标签代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

文档类型声明标签

<!DOCTYPE html>

文档类型声明,告诉浏览器用HTML5显示网页

<html lang="en">

文档显示语言=英语, 写中文也可以 (浏览器会自动处理)

<html lang="zh-CN">

<meta charset="UTF-8">

编码方式, UTF-8 万国码, 防止乱码

HTML常用标签

标签含义, 能看懂即可, 记得标签是干什么的

标题标签

	<h1>我是一级标签</h1>
    <h2>我是二级标签</h2>
    <h3>我是三级标签</h3>
    <h4>我是四级标签</h4>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wWyQOFGf-1689863224129)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703224211647.png)]

分段和分行标签

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p> 天空中乌云密布，时不时会冒出一道闪电，伴随着一声声闷雷，一场大雨即将来临。

    卧虎城中，沈翔仰头看着天空，喃喃说道：“不能再拖了，我要快点找到好的灵药，否则我难以有翻身的机会。”
    <br>

    沈翔今年十六岁，有着比同龄人要健壮高大的身躯，这身躯和那张带着稚气的俊俏脸蛋有着鲜明对比，但他那双与年龄不相称的深邃眸子，看起来闲得要比同龄人成熟一些。

    沈翔此时要去采药，他虽然是沈家族长的孙子，但他却因为没有灵脉，不能成为一个厉害的武者，因此，他从小就非常勤奋的锻炼自己的身体，经常外出去进行各种秘密训练，甚至还和虎兽进行过身上搏斗，他虽然年纪轻轻，但却有过几次生死经历，心境和意志都远胜同龄人。

    “这不是沈翔吗？就要下大雨了，你还要去锻炼？”</p>
<p>一个老管家走过来说道，看见沈翔如此发奋，他不由得钦佩，但眼神中更多的是惋惜。

    沈翔每天都勤学苦练，至今六年，但还是停留在凡武境三重，和他同龄的大多数沈家子弟都进入了凡武境四重，厉害的更是进入了五重。

    这一切都是因为他没有灵脉的缘故，所以才不被家族重视，而如今他只是沈家中一个很普通的人。
    <br>

    虽然没有灵脉，但沈翔却从来不气馁，一直都在努力锻炼自己，至少努力的过程让他感觉自己很充实。

    “老马，我是去采药。”沈翔跑到老管家身后，嘻笑着扯住他那光头上的一条鞭子。

    “没用的，你没有灵脉，不管怎么努力都是无济于事！”　那老管家摇头叹道。

    对于这样的话，沈翔听过无数遍了，但他却依然得坚持，无论如何他都不会放弃。</p>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZPFFmvAE-1689863224130)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703224746034.png)]

小项目小说

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJsIL6YB-1689863224130)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703225033932.png)]

文本格式化标签

粗体斜体下划线

突出性,比普通文字更重要

语义	标签
加粗
倾斜
删除线
下划线

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h1>全能穿越锦衣卫</h1>

    <b>天空中乌云密布，</b>
    <i>时不时会冒出一道闪电，</i>
    <s>伴随着一声声闷雷，</s>
    <u>一场大雨即将来临。</u>

<!--    卧虎城中，沈翔仰头看着天空，喃喃说道：“不能再拖了，我要快点找到好的灵药，否则我难以有翻身的机会。”-->

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tWxqouiF-1689863224131)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703225653947.png)]

盒子标签

div 大盒子一行只能放一个

span 小盒子一行可以有多个

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>我是div盒子,我占一行</div>123
    <div>我是div盒子,我占一行</div>
    <span>今日价格</span>
    <span>昨日价格</span>
    <span>明日价格</span>


</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ftTbHUBr-1689863224131)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230703230248182.png)]

图像标签

属性	属性值	说明
src	图片路径	必须属性
alt	文本	替换文本,图像不能显示的文字
title	文本	提示文本,鼠标放到图像上,显示的文字
height	像素	设置图像高度
border	像素	设置图像边框粗细
width	像素	设置图像宽度

<img src=""  alt="图片未找到"/>

alt是替换文本, 图像找不到时显示文字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j6XGofql-1689863224132)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230704221427857.png)]

title提示文本

<img src="miku.jpeg" alt="图片未找到" title="这是初音"/>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MlpRm5Nj-1689863224133)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230704221640379.png)]

<body>
<h3>图像标签使用:</h3>
<img src="miku.jpeg" alt="图片未找到" title="这是初音" height="367" border="10"/>

</body>

可以看到图像变小了, 边框变大了

width宽度和height高度只需要修改一个即可, 浏览器等比例缩放, 避免失真

boder一般在css中指定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3snYF0ZR-1689863224134)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230704221949319.png)]

图像标签使用注意点

其他属性写在 src 的后面, src 后面的属性不分次序

属性使用键值对形式存储

文件夹

目录文件夹:项目文件夹

根目录:打开项目文件夹的第一层

路径

相对路径: 引用文件所在位置坐参考基础,建立目录路径

绝对路径:从盘符开始的路径

超链接标签

属性	作用
href	跳转的链接地址
target	显示的方式默认_self本页面 , _blank新标签页

<a href="https://www.bilibili.com" target="_blank">点击进入bilibili</a>

内部链接

<body>
<a href="demo2.html" target="_blank">点击进入demo2</a>
<a href="#" target="_blank">空标签</a>
<a href="test.zip" target="_blank">下载</a>
</body>

锚点链接

跳转到href=“#{{id}}”, 类似bilibili的小火箭

<body>
<a href="#two">跳转到末尾</a>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<img src="miku.jpeg"/>
<h3 id="two">跳转目的地</h3>

</body>

特殊字符

常见的

空格 &nbsp

大于 &lt

小于 &gt

其他的不常用的可以随时用随时搜

表格标签

作用: 显示数据布局页面增强可读性

语法 table表格 tr行 td单元格这三个是嵌套关系

<table>
    <tr>
        <td>单元格内的文字</td>
    </tr>
</table>

定义一个表格

boss	难度
恶兆	2
接肢葛瑞特	3
狮子混种	5

<table>
    <tr>
        <td>boss</td>
        <td>难度</td>
    </tr>
    <tr>
        <td>恶兆</td>
        <td>2</td>
    </tr>
    <tr>
        <td>接肢葛瑞特</td>
        <td>3</td>
    </tr>
    <tr>
        <td>狮子混种</td>
        <td>5</td>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mrbiRKuv-1689863224134)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230705225436061.png)]

表头单元格标签

有加粗效果

<table>
    <tr>
        <th>boss</th>
        <th>难度</th>
    </tr>
    <tr>
        <td>恶兆</td>
        <td>2</td>
    </tr>
    <tr>
        <td>接肢葛瑞特</td>
        <td>3</td>
    </tr>
    <tr>
        <td>狮子混种</td>
        <td>5</td>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HiqNtsYf-1689863224135)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230705225748847.png)]

表格属性

边框粗细

后面 CSS 使用

属性	属性值	描述
align	left center right	表格对齐
border	1 或 “”	表格边框
cellpadding	像素值	`单元格与内容`之间的空白, 默认1
cellspacing	像素值	`单元格之间`的空白, 默认2
width	像素值或百分比	表格宽度

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CW2nWWP2-1689863224136)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230705230350124.png)]

+++

小说排行榜案例

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
    <tr>
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr>
        <td>1</td>
        <td>鬼吹灯</td>
        <td><img src="down.jpg"></td>
        <td>345</td>
        <td>123</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF&fr=search">贴吧</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=index&fr=&hs=0&xthttps=111110&sf=1&fmq=&pv=&ic=0&nc=1&z=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF&oq=%E9%AC%BC%E5%90%B9%E7%81%AF&rsp=-1">图片</a>
            <a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromModule=lemma_search-box&fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
        </td>
    </tr>
    <tr>
        <td>2</td>
        <td>盗墓笔记</td>
        <td><img src="down.jpg"></td>
        <td>124</td>
        <td>675432</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&fr=search">贴吧</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652664891_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0">图片</a>
            <a href="https://baike.baidu.com/item/%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0/21859?fromModule=lemma_search-box">百科</a>
        </td>
    </tr>
    <tr>
        <td>3</td>
        <td>西游记</td>
        <td><img src="up.jpg"></td>
        <td>212</td>
        <td>7654</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E8%A5%BF%E6%B8%B8%E8%AE%B0&fr=search">贴吧</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652714025_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E8%A5%BF%E6%B8%B8%E8%AE%B0">图片</a>
            <a href="https://baike.baidu.com/item/%E8%A5%BF%E6%B8%B8%E8%AE%B0/5723?fromModule=lemma_search-box">百科</a>
        </td>
    </tr>
    <tr>
        <td>4</td>
        <td>东游记</td>
        <td><img src="up.jpg"></td>
        <td>23</td>
        <td>75645</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%9C%E6%B8%B8%E8%AE%B0&fr=search">贴吧</a>
            <a href=" https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652752839_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E4%B8%9C%E6%B8%B8%E8%AE%B0">图片</a>
            <a href="https://baike.baidu.com/item/%E4%B8%9C%E6%B8%B8%E8%AE%B0/10461211?fromModule=lemma_search-box">百科</a>
        </td>
    </tr>
    <tr>
        <td>5</td>
        <td>甄嬛传</td>
        <td><img src="down.jpg"></td>
        <td>121</td>
        <td>7676</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E7%94%84%E5%AC%9B%E4%BC%A0&fr=search">贴吧</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652802072_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E7%94%84%E5%AC%9B%E4%BC%A0">图片</a>
            <a href="https://baike.baidu.com/item/%E7%94%84%E5%AC%9B%E4%BC%A0/4701562">百科</a>
        </td>
    </tr>
    <tr>
        <td>6</td>
        <td>水浒传</td>
        <td><img src="up.jpg"></td>
        <td>576575</td>
        <td>1231421</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E6%B0%B4%E6%B5%92%E4%BC%A0&fr=search">贴吧</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652835678_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E6%B0%B4%E6%B5%92%E4%BC%A0">图片</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652835678_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E6%B0%B4%E6%B5%92%E4%BC%A0">百科</a>
        </td>
    </tr>
    <tr>
        <td>7</td>
        <td>三国演义</td>
        <td><img src="up.jpg"></td>
        <td>234</td>
        <td>7686</td>
        <td>
            <a href="https://tieba.baidu.com/f?ie=utf-8&kw=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89&fr=search">贴吧</a>
            <a href="https://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2&lm=-1&st=-1&fm=result&fr=&sf=1&fmq=1688652871111_R&pv=&ic=0&nc=1&z=&hd=&latest=&copyright=&se=1&showtab=0&fb=0&width=&height=&face=0&istype=2&dyTabStr=&ie=utf-8&sid=&word=%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89">图片</a>
            <a href="https://baike.baidu.com/item/%E4%B8%89%E5%9B%BD%E6%BC%94%E4%B9%89/5782?fromModule=lemma_search-box">百科</a>
        </td>
    </tr>

</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wF1SzcEY-1689863224136)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230706221703373.png)]

+++

表格结构标签

把表格分成表格头部和表格主体两个部分, 给表格划分区域

最外边的是

表格头部区域 ≠ 表格主体区域

合并单元格

跨行合并 rowspan=“合并单元格的个数”

跨列合并 colspan=“合并单元格的个数”

目标单元格写合并代码

跨行: 最上侧单元格为目标单元格,写合并代码

跨列: 最左侧单元格为目标单元格,写合并代码

三部曲:

确定跨行合并还是跨列合并
找到目标单元格, 写上合并方式 = 数量
删除多余代码

<table align="center" border="1" cellpadding="0" cellspacing="0" width="500">
    <tr>
        <td colspan="4">跨行合并</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td rowspan="3">跨列合并</td>
        <td>4</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>4</td>
    </tr>
</table>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V1LfAQp6-1689863224137)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230706225323581.png)]

表格总结

表格相关标签

table tr td th
表格相关属性

align border cellpadding cellspacing width height
表格合并

rowspan colspan

列表标签

列表用来布局, 整齐有序整洁自由方便

无序列表, 有序列表, 自定义列表

重点无序列表

<h4>您喜欢的食物?</h4>
<ul>
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PxpksHVY-1689863224137)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230706230233312.png)]

有序列表

<h4>最帅的boss?</h4>
<ol>
    <li>黑剑</li>
    <li>女武神</li>
    <li>拉塔恩</li>
</ol>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-K2ULjHoj-1689863224137)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707164237578.png)]

+++

自定义列表

<dl>
    <dt>线下门店</dt>
    <dd>小米之家</dd>
    <dd>服务网点</dd>
    <dd>授权体验店</dd>
</dl>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ccQBkJel-1689863224138)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707165032362.png)]

列表总结

标签名	定义	说明
	无序标签	里面含有li 没有顺序使用多 li里面可以包含任何标签
	有序标签	里面含有li 有顺序使用少 li里面可以包含任何标签
	自定义列表	里面包含dt 和 dd dt和dd可以包含任何标签

表单标签

使用目的: 收集用户信息

表单组成: 表单域表单控件提示信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XY3IgCPb-1689863224138)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707165527813.png)]

表单域

把表单元素信息提供给服务器

<form action="url" method="提交方式" name="表单域名称">
    表单元素
</form>

表单元素分类

input select textarea

input 文本框密码框

<form>
    用户名: <input type="text">
    <br>
    密码: <input type="password">
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5o1rZwZA-1689863224139)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707171457133.png)]

input 单选框复选框

<form>
    用户名:<input type="text"> <br>
    密码:<input type="password"> <br>
    性别: 男<input type="radio"> 女<input type="radio"><br>
    爱好: 体育<input type="checkbox"> 游戏 <input type="checkbox">新闻<input type="checkbox">
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CHTNRItG-1689863224139)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707171947652.png)]

input 的 name和value属性

解决单选框可以多选的问题, 加name属性

注意单选框和复选框必须name一样

<form>
    用户名:<input type="text" name="username" value="请输入用户名"> <br>
    密码:<input type="password" name="pwd"> <br>
    性别: 男<input type="radio" name="sex" value="男">
         女<input type="radio" name="sex" value="女"><br>
    爱好: 体育<input type="checkbox" name="hobby" value="体育">
        游戏 <input type="checkbox" name="hobby" value="游戏">
        新闻<input type="checkbox" name="hobby" value="新闻">

</form>

input 的 checked和maxlength属性

checked 默认选中的用于单选框和复选框

maxlength 表单元素输入最多个数

<form>
    用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
    密码:<input type="password" name="pwd"> <br>
    性别: 男<input type="radio" name="sex" value="男">
         女<input type="radio" name="sex" value="女" checked="checked"><br>
    爱好: 体育<input type="checkbox" name="hobby" value="体育">
        游戏 <input type="checkbox" name="hobby" value="游戏">
        新闻<input type="checkbox" name="hobby" value="新闻" checked="checked">
</form>

input 的 submit和reset属性

<form action="xxx.php" method="get">
    用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
    密码:<input type="password" name="pwd"> <br>
    性别: 男<input type="radio" name="sex" value="男">
         女<input type="radio" name="sex" value="女" checked="checked"><br>
    爱好: 体育<input type="checkbox" name="hobby" value="体育">
        游戏 <input type="checkbox" name="hobby" value="游戏">
        新闻<input type="checkbox" name="hobby" value="新闻" checked="checked"><br>
        <input type="submit" value="注册">
        <input type="reset" value="重新填写">
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qgpTQCNQ-1689863224140)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707181159669.png)]

input 的 button和file属性

<form action="xxx.php" method="get">
    用户名:<input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
    密码:<input type="password" name="pwd"> <br>
    性别: 男<input type="radio" name="sex" value="男">
         女<input type="radio" name="sex" value="女" checked="checked"><br>
    爱好: 体育<input type="checkbox" name="hobby" value="体育">
        游戏 <input type="checkbox" name="hobby" value="游戏">
        新闻<input type="checkbox" name="hobby" value="新闻" checked="checked"><br>
        <input type="submit" value="注册"><br>
        <input type="reset" value="重新填写"><br>
        <input type="button" value="获取验证码"><br>
        <input type="file" value="上传头像"><br>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lZXLuKaN-1689863224140)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707181452445.png)]

label 标签

点击label标签内所有区域, 都可以定义input属性, 增加用户体验

<form action="xxx.php" method="get">
    <label>
        用户名:
        <input type="text" name="username" value="请输入用户名" maxlength="6">
    </label> <br>
    <label>
        密码:
        <input type="password" name="pwd">
    </label> <br>
    <label>
        性别: 男
        <input type="radio" name="sex" value="男">
    </label>
    <label>
        女
        <input type="radio" name="sex" value="女" checked>
    </label><br>
    <label>
        爱好: 体育
        <input type="checkbox" name="hobby" value="体育">
    </label>
    <label>
        游戏
        <input type="checkbox" name="hobby" value="游戏">
    </label>
    <label>
        新闻
        <input type="checkbox" name="hobby" value="新闻" checked="checked">
    </label><br>
        <input type="submit" value="注册"><br>
        <input type="reset" value="重新填写"><br>
        <input type="button" value="获取验证码"><br>
        <input type="file" value="上传头像"><br>
</form>

select 下拉表单元素

<form>
<label>
    <select>
        <option>山东</option>
        <option selected>上海</option>
        <option>北京</option>
    </select>
</label>
</form>

textarea文本域元素

<form>
    <label>
        今日反馈
        <textarea cols="50" rows="5">不吃香菜</textarea>
    </label>
</form>

一行50个字, 默认5行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UVclispk-1689863224140)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230707182734605.png)]

综合案例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>青春不常在，抓紧谈恋爱</h3>
<table width="600">
    <tr>
        <td>性别</td>
        <td>
        <input type="radio">男
        <input type="radio">女
        </td>
    </tr>


    <tr>
        <td>
        生日
        </td>
        <td>
        <select>
            <option>--请选择年--</option>
            <option>2001</option>
            <option>2002</option>
        </select>
        <select>
            <option>--请选择月--</option>
            <option>5</option>
            <option>6</option>
        </select>
        <select>
            <option>--请选择日--</option>
            <option>2</option>
            <option>2</option>
        </select>
        </td>
    </tr>

    <tr>
        <td>所在地区</td>
        <td><input type="text" value="北京思密达"></td>
    </tr>
    <tr>
        <td>婚姻状况</td>
        <td><input type="radio">未婚
            <input type="radio">已婚
            <input type="radio">离婚</td>
    </tr>

    <tr>
        <td>学历</td>
        <td><input type="text" value="幼儿园"></td>
    </tr>

    <tr>
        <td>喜欢的类型</td>
        <td><input type="checkbox">妩媚的
        <input type="checkbox">可爱的
        <input type="checkbox">老腊肉
        <input type="checkbox">都喜欢</td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td><textarea>自我介绍</textarea></td>
    </tr>

    <tr>
        <td></td>
        <td><button>免费注册</button></td>
    </tr>

    <tr>
        <td></td>
        <td><input type="checkbox">我同意注册条款和会员加入标准</td>
    </tr>

    <tr>
        <td></td>
        <td><a href="https://www.baidu.com" target="_blank">我是会员，立即登录</a></td>
    </tr>

    <tr>
        <td></td>
        <td><h2>我承诺</h2></td>
    </tr>

    <tr>
        <td></td>
        <td>
            <ol>
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚导找另一半</li>
            </ol>
        </td>
    </tr>

</table>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SV7XJd1g-1689863224141)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707204735786.png)]

查阅文档

百度

W3C

MDN

CSS

简介

网页的美容师美化HTML 布局页面也是一种标记语言

设置文本内容, 图片外形,版面布局和外观显示样式

语法规范

style 标签

属性和属性值之间以键值对

分号结束

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            color: red;
            font-size: 30px; /*文字大小30像素*/
        }
    </style>
</head>
<body>
    <p>有点意思</p>
</body>

CSS 代码风格

样式格式

紧凑格式

h1{color:red;font-size:30px;}

展开格式

h1{
color:red;
font-size:30px;
}

样式大小写

小写

空格规范

属性值前面,冒号后面有一个空格

选择器和大括号之间敲一个空格

基础选择器

找到标签
设置标签样式

标签选择器

html标签名作为选择器

div {}

类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .xl{
            color: #543630;
        }
    </style>
</head>
<body>
    <div>小林</div>
    <div class="xl">小林</div>
    <div>小林</div>
    <div>小林</div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FNHjvPNi-1689863224141)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707220123385.png)]

多属性类选择器

减少重复性, 简化代码

<style>
    .one {
      color: #006b00;
    }
    .two {
      font-size: 50px;
    }
  </style>

<body>
  <div class="one two">123</div> 多个类名之间用空格隔开
</body>

id 选择器

id 类标签只能调用一次

<style>
	#one {
      color: #006b00;
    }
    #two {
      font-size: 50px;
    }
  </style>

<body>
  <div id="one two">123</div>
</body>

通配符选择器

选取页面所有元素

<style>
    * {
        color: red;
    }
</style>


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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WDXX0Zv7-1689863224141)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707222956231.png)]

所有标签都改成红色

基础选择器总结

基础选择器	作用	特点	使用情况	用法
标签选择器	选出所有相同的标签	不能差异化选择	较多	p {color: red;}
类选择器	选出1个或多个标签	根据需求选择	非常多	.nav {color:}
id选择器	一次只能选择一个标签	id属性只能在每个html中出现一次	一般和js搭配	#nav {color: red;}
通配符选择器	选择所有标签	选择的太多,不成功	特殊情况使用	* {color: red;}

指定字体

div {
    font-family: 'Arial', Times, serif;
}                                                                                 // 三个字体按顺序没有则用后面的

常见字体:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U4CGGQTO-1689863224142)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230707230433933.png)]

字体粗细

font-weight 设置字体粗细

.bold {
        color: pink;
        font-weight: 700;  /*400-normal  700-bold*/
    }

<h2>pink的秘密</h2>
<p>那一抹众人中最漂亮的颜色，</p>
<p>优雅，淡然又那么心中清澈</p>
<p>前端总是伴随着困难和犯错</p>
<p>静心，坦然攻克一个又一个</p>
<p class="bold">拼死也要克服它，</p>
<p>这是pink的秘密也是老师最终的嘱托.</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FVaZh5xq-1689863224142)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708110529444.png)]

文字样式

.bold {
        color: pink;
        font-weight: 700;
        font-style: italic;
    }

italic [i'tælik]
a. 斜体的
n. 斜体字, 斜体
[计] 斜体

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OMvky9b6-1689863224142)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708110727011.png)]

复合属性

.bold {
        font-weight: 700;
        font-style: italic;
        font-size: 16px;
        font-family: 'Microsoft JhengHei UI';
    }

把四行合并成一行, 注意顺序: font-style font-weight font-size font-family

.bold {
        font: italic 700 16px 'Microsoft JhengHei UI';
    }

字体属性总结

属性	表示	注意点
font-size	字号	使用单位px像素, 一定写单位
font-family	字体	安装公司要求的字体
font-weight	字体粗细	normal(400) 不加粗 bold(700) 加粗
font-style	字体样式	italic 倾斜 normal不清晰
font	字体连写	字体连写注意顺序, 字号和字体必须同时出现

文本属性

文本是指文本外观, 如颜色,对齐, 下划线, 首行缩进, 行间距 …

颜色

表示	属性值
颜色单词	red green
十六定制	#FF0000
RGB代码	rgb(255, 0, 0)

对齐文本

text-align 属性用于设置元素水平居中

属性值	解释
left	左对齐
right	右对齐
center	居中对齐

p {
          text-align: center;
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WJnQym7K-1689863224143)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708112023616.png)]

装饰文本

记住如何添加和删除下划线

text-decoration属性添加到文本修饰, 给文本加下划线删除线上划线

属性值	描述
none	默认
underline	下划线(常用)
overline	上划线
line-through	删除线

常用的是把超链接的下划线去掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CpSLa35P-1689863224143)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708112442126.png)]

  <style>
      a {
          text-decoration: none;
      }
  </style>
</head>

<body>
<a href="https://www.bilibili.com">点击进入bilibili</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k6bNo4SM-1689863224144)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708112430137.png)]

+++

首行缩进

text-indent 属性用来指定文本的第一行的缩进, 通常是段落的首行缩进


  <style>
      p {
          text-indent: 20px; /*2em  两个字距离*/
      }
  </style>
</head>

<body>
<p>打开北京、上海与广州的地铁地图，你会看见三张纵横交错的线路网络，这代表了中国最成熟的三套城市轨道交通系统。</p>
<p>可即使这样，在北上广生活的人依然少不了对地铁的抱怨，其中谈及最多的问题便是拥挤一对很多人而言，每次挤地</p>
<p>铁的过程，都像是一场硬仗。更何况，还都是败仗居多。</p>
<p>那么，当越来越多的二线甚至三线城市迎接来了自己的地铁，中国哪里的地铁是最拥挤的呢？</p>

</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xPAG2UmI-1689863224144)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708150232845.png)]

行间距

p {
          text-indent: 2em;
          line-height: 50px;
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-y1uFTeBr-1689863224145)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708152136654.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lLBjCW4P-1689863224145)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708152320868.png)]

文本属性总结

属性	表示	注意点
color	颜色
text-align	对齐
text-indent	缩进	常用 text-indent: 2em;
text-decoration	修饰	添加下划线 underline 取消下划线 none
text-height	行高	控制行与行之间距离

引入css

行内样式表

<p style = ""></p>

内部样式表

<style></style>

外部样式表单独写一个css文件

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

引入方式总结

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便	结构样式混写	少	一个标签
内部样式表	部分结构和样式分离	没有彻底分离	多	一个页面
外部样式表	完全分离结构和样式	需要引入	最多	多个页面

综合案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <h1 style="text-align: center;">北方高温明日达鼎盛京津冀多地地表温度将超60℃</h1>
  <div style="text-align: center">
  <span style="color: gray">2019-07-03 16:31:47  来源：</span>
    <a href="http://www.weather.com.cn/" style="text-decoration: none;">中国天气网</a> &nbsp&nbsp
    <input type="text" placeholder="请输入查询条件">
    <button>搜索</button>
  </div>
<hr>
<p style="text-indent: 2em;">中国天气网讯今天(3日)，华北、黄准多地出现高温天气，截至下午2点，北凉、天津、郑州等地气温突破35℃。预报显示，今后三天（3-5日)，这一带的高温天气将继续发酵，高温
  范围以及强度将在4日达到鼎盛，预计北凉、天津、石家庄、济南等地明天的最高气温有望突破38℃，其中北京和石家庄的最高气温还有望创今年以来的新高。</p>

<p style="font-weight: 700;">气温41.4℃！地温66.5！北京强势迎七月首个高温日</p>


<p style="text-indent: 2em;">今天，华北、黄淮一带的高温持续发酵，截至今天下午2点，陕西北部、山西西南部、河北南部、北凉、天津、山东西部、河南北部最高气温已普遍超过35℃。大城市中，北京、天津、
  郑州均迎来高温日。</p>

<div style="text-align: center;"><img src="pic.jpeg"></div>

<p style="text-indent: 2em;">在阳光暴晒下，地表温度也逐渐走高。今天下午2点，华北黄淮大部地区的地表温度都在50℃以上，部分地区地表温度甚至超过60℃。其中，河北衡水地表温度高达68.3℃，天津站和北
  京站附近的地表温度分别高达66.6℃和66.5℃。</p>
  <p style="font-weight: 700;">明日热度再升级！京津翼携手冲击38℃+/p>
<p style="text-indent: 2em;">中国天气网气象分析师王伟跃介绍，明天(4日)，华北、黄准地区35℃以上的高温天气还将继续升级，并进入鼎盛阶段，高温强度和范围都将发展到最强。明天，北凉南部、天津大
    部、河北中部和南部、山东中部和西部、山西南部局地、河南北部、东北部分地区的最高气温都将达到或超过35℃。</p>
<p style="text-indent: 2em;">不过，专家提醒，济南被雨水天气完美绕开，因此未来一周，当地的高温还会天天上岗。在此提醒当地居民注意防暑降温，防范持续高温带来的各种不利影响。（文/张慧数据支持/王伟
  跃胡啸审核刘文静张方丽)</p>
<p style="color: gray;font-size: 2px;">本文来源：中国天气网麦任编损：刘京_NO5631</p>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tIxdQLfv-1689863224146)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708163034583.png)]

chrome 调试工具使用

左边是html, 右边是css

用这个工具来排查错误

Emmet 语法

提供html/css 编写速度

生成5个div div*5 + tab

父子包含关系

ul>li*5 + tab

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

p#one.gray + tab

<p id="one" class="gray"></p>

.demo$*5

<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>

.demo{hello}

<div class="demo">hello</div>

.demo{$}*5

<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
<div class="demo">4</div>
<div class="demo">5</div>

快速生成css语法

本质还是快捷键

w + tab width: ;

td + tab text-decoration: none;

…

css选择器有基础选择器和复合选择器

后代选择器子选择器并集选择器伪类选择器

后代选择器

包含选择器,选择父元素里面的所有子元素

<style>
      ol li {
        color: pink;
      }
      ul li {
        color: red;
      }
    </style>
<ol>
  <li>我是ol的孩子</li>
  <li>我是ol的孩子</li>
  <li>我是ol的孩子</li>
</ol>
<ul>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
  <li>我是ul的孩子</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZXzZ7zsk-1689863224146)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708172729207.png)]

可以用类选择器 id选择器 …

 .gra .fa .son {
   color: blue;
 }

子选择器

如果中间隔着标签, 则子选择器选不到对应的儿子

智能选择某元素的子元素 , 选亲儿子元素

<style>
.nav>p {
	color: red;
}
</style>

<body>

<div class="nav">
    <p>123</p>
    <div>
        <p>456</p>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yrUuKBL4-1689863224146)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708173459399.png)]

并集选择器

用于集体声明, 选择多组标签, 同时为他们定义相同的样式, 减少重复代码

<style>
    #one, .woman {
      color: red;
      text-align: center;
    }
    #two, .boss, .bigMan {
      color: gray;
      text-decoration: underline;
    }
  </style>

<div id="one">熊大</div>
<div id="two">熊二</div>
<p class="boss">女武神</p>
<p class="bigMan">巨人</p>
<p class="woman">玛丽</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zskq7a1Q-1689863224147)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708174101989.png)]

伪类选择器

向选择器添加特殊效果, 用冒号表示

链接伪类选择器

顺序 lvha link visited hover active

a:link    选择所有未被访问的链接  
a:visited   选择已被访问过的链接  你已经点击过的链接 ,  回过头来发现变色了
a:hover   选择鼠标悬停时的链接
a:active  选择活动链接

a:hover 用的最多

a:hover {
 	color: red;
}

+++

focus 伪类选择器

选取获得焦点的表单元素

input:focus {
      color: red;
    }

<input type="text">
<input type="text">
<input type="text">

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ezw97Lej-1689863224147)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708180355458.png)]

复合选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	.nav a
子代选择器	选择最近的元素	只能亲儿子	较少	.nav>p
并集选择器	选择某些相同样式元素	用于集体声明	较多	.nav, .header
链接伪类选择器	选择不同状态链接	根链接有关	较多	a:hover
:focus选择器	选择获得光标的表单	根表单有关	较少	input:focus

css 元素显示模式

帮助我们更好的布局页面

html元素分为块元素和行内元素

块元素特点:

自己独占一行
高度宽度边距都可以控制
宽度默认和父亲元素一样宽
是一个容器盒子, 里面可以放行内或者块级元素

文字标签内部不能放块级元素   
<p>里面不能放<div>

行内元素

最典型

特征:

一行可以写多个行内元素
不能赋予高度和宽度
默认宽度是本身的宽度
行内元素只能容纳文本或其他行内元素
链接内部不能放链接

行内块元素

同时有行和块元素的特点

一行多个默认宽度是本身宽度 (行内特性)

高度宽度边距都可以控制 (块级特性)

例如

元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级元素	一行只能放一个块级元素	可以设置宽度高度	容器100%	容器可以包含的任何标签
行内元素	一行可以放多个行内元素	不可以设置	本身内容的宽度	其他行内块元素
分类块元素	一行放多个行内块元素	可以	本身内容的宽度

元素显示模式转换

元素需要其他元素的触发范围

a {
      width: 150px;
      height: 50px;
      background-color: red;
      display: block;  /*转换成块级元素*/
}
<a href="#">金星</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WEciBqMS-1689863224148)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708200523609.png)]

div {
    display: inline;
    display: inline-block;
}

简洁小米侧边栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    a:hover {
      background-color: #ff7000;
    }
    a {
      background-color: #515556;
      color: white;
      text-decoration: none;
      display: block;
      width: 230px;
      height: 40px;
      text-indent: 2em;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <a href="#">手机 电话卡</a>
  <a href="#">电视 盒子</a>
  <a href="#">笔记本 平板</a>
  <a href="#">出行 穿戴</a>
  <a href="#">智能 路由器</a>
  <a href="#">健康 儿童</a>
  <a href="#">耳机 音响</a>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hEiYDJzw-1689863224148)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708203347541.png)]

单行文字垂直居中

让文字行高等于标签高度

line-height: 40px;
height: 40px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fZdFaqEM-1689863224149)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708203553910.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z96V28Gx-1689863224149)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708204422120.png)]

背景颜色

给页面元素添加背景样式

background-color

默认为透明 transparent

背景图片

便于控制位置, 比插入图片

background-image: url("dz.jpg");

背景平铺

参数值	作用
backround-repeat : repeat;	平铺
no-repeat;	不平铺
repeat-x;	沿着x轴平铺
repeat-y;	沿着y轴平铺

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vRg3IJ9f-1689863224150)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708212336968.png)]

背景图片位置

background-position 属性可以改变图片在背景位置

background-position: x y; 可以是方位名词或精确坐标

background-position:  left top;
图片在左上角

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mkDJmiWt-1689863224150)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708213336440.png)]

只写一个方位名词, 另一个默认center

背景案例一

小的装饰性的图片

h3 {
      width: 300px;
      height: 100px;
      background-color: pink;
      background-image: url("https://game.gtimg.cn/images/js/title/title_sprite.png");
      background-repeat: no-repeat;
      background-position:  center left;
      line-height: 100px;
      text-indent: 7em;
    }
<h3>成长守护平台</h3>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1vdpPMDd-1689863224150)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708214828801.png)]

背景案例二

大的背景图片

body{
      background-image: url("dz.jpg");
      background-position: center top;
      background-repeat: no-repeat;
    }

背景位置精确

第一个参数是x 第二个参数是y

如果只写了一个, 那一定是x , 另一个y默认垂直居中

background-position: 20px 50px;

背景位置混合

一个精确 , 一个方位

第一个值是x坐标, 第二个值是y坐标, 写一个也是这样的

background-position: 20px center;

背景附着

背景图像随着页面滚动

background-attachment:  scroll | fixed

参数	作用
scroll	背景图像随着对象内容滚动
fixed	背景图像固定

背景复合写法

background: pink url("dz.jpg") left top no-repeat fixed;

背景颜色半透明

background: rgba(0, 0, 0, 0.3);

背景总结

属性	作用	值
background-color	背景颜色	预定义的颜色值十六进制 RGB代码
background-image	背景图片	url(图片路径)
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length position 分别是x y 坐标
背景简写	书写简单
背景半透明	背景颜色半透明	background: rgba(0,0,0,0.3)

综合案例

五彩导航

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one {
      background-image: url("bg1.png");
    }
    .two {
      background-image: url("bg3.jpg");
    }
    .three {
      background-image: url("bg4.png");
    }
    .four {
      background-image: url("bg5.png");
    }

      .one, .two, .three, .four {
        width: 120px;
        height: 60px;
        background-repeat: no-repeat;
        display: inline-block;
        line-height: 50px;
        text-indent: 2em;
        color: white;
      }
      .one:hover {
        background-image: url("bg2.png");
      }
    .two:hover {
      background-image: url("bg4.png");
    }
    .three:hover {
      background-image: url("bg1.png");
    }
    .four:hover {
      background-image: url("bg2.png");
    }
    a {
      text-decoration: none;
    }
  </style>
</head>
<body>
  <div>
    <a href="#" class="one">五彩缤纷</a>
    <a href="#" class="two">五彩缤纷</a>
    <a href="#" class="three">五彩缤纷</a>
    <a href="#" class="four">五彩缤纷</a>
  </div>


</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DmriUDRD-1689863224151)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708224741205.png)]

CSS 三大特性

层叠性

样式冲突: 就近原则

样式不冲突不会层叠

继承性

div {
      color: pink;
    }
<div>
  <p>
    ლ(′◉❥◉｀ლ)
  </p>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mNrk0LHy-1689863224151)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230708225815661.png)]

优先级

行高的继承

body {
      font: 12px/1.5 'Microsoft JhengHei UI';
    }
    div {
      color: pink;
      font-size: 14px;
      /* 当前行高的1.5倍  14*1.5 */
    }

优先级

给同一个元素指定多个选择器

选择器相同,执行层叠性

选择器不同,按照权重执行

权重从大到小
1. !import
2. style=""
3. ID选择器
4. 类选择器
5. 元素选择器
6. 继承或*
继承 + !import  不起作用

#test {
      color: blue;
    }
    .one {
      color: green!important;
    }
    div {
      color: gray;
    }
    body {
      color: pink;
    }

<div  id="test" class="one">权重不同,颜色不同</div>

按理说id比类大, 因为!important的关系, 还是green

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aTHaNwlB-1689863224152)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709101640930.png)]

优先级注意点

权重表

选择器	权重
继承或*	0,0,0,0
元素选择器	0,0,0,1
类选择器	0,0,1,0
ID选择器	0,1,0,0
行内样式 style=“”	1,0,0,0
!important	无穷大

权重有四组数字组成,不会进位

类选择器永远大于元素选择器, id选择器永远大于类选择器

如果元素没有直接选中, 不管父元素的权重多高, 子元素的权重都是0 [继承 + !import 不起作用]

权重叠加

需要计算权重

复合选择器会有权重叠加问题

ul li {
            color: blue;
        }
        li {
            color: gray;
        }
<ul>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
    <li>你好</li>
</ul>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94l2QJnH-1689863224152)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709105113570.png)]

盒子模型

网页布局核心: 盒子模型浮动定位

网页布局过程:

准备标签(盒子)
设计标签样式, 摆放位置
往标签装内容

盒子组成部分

边框内边距外边距实际内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zyNSPkcR-1689863224153)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709110844700.png)]

边框 border

属性	作用
border-width	定义边框粗细
border-style	边框样式
border-color	边框颜色

宽度

border-width: 5px;

实线边框

border-style: solid;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UdSgGkkG-1689863224153)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709111821512.png)]

虚线边框

border-style: dashed;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wVZq2V8D-1689863224154)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709111821512.png)]

点线边框

border-style: dotted;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nVLxo3q7-1689863224154)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709111944284.png)]

边框颜色

border-color: pink;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GH35DUtr-1689863224155)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709112122946.png)]

边框复合写法

div {
            width: 30px;
            height: 40px;
            border: 2px pink  solid;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4AeuGUAS-1689863224155)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709112443651.png)]

边框分开写法

div {
            width: 30px;
            height: 40px;
            border-top: green solid 1px;
            border-right: red solid 1px;
            border-left: yellow solid 1px;
            border-bottom: pink solid 1px;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ev1uhPc0-1689863224156)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709112651942.png)]

边框层叠性下面覆盖上面

border: blue solid 1px;
border-top: red solid 1px;

表格细线边框

边框会影响盒子实际大小, 会撑大盒子

table {
            width: 500px;
            height: 249px;
        }
        th {
            height: 35px;
        }
        table, td, th{
            border: pink 1px solid;
            border-collapse: collapse; /*相邻单元格的边框合并, 不影响边界粗细*/
            text-align: center;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-41GoXzHV-1689863224156)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709114330613.png)]

内边距 padding

属性	作用
padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

<div style="width: 300px;height: 200px;background-color: pink;padding-left: 15px;padding-top: 15px;">
  你好
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TgxchuVU-1689863224157)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709115155177.png)]

padding 复合写法

padding 也会撑大盒子

<div style="width: 300px;height: 200px;background-color: pink;padding-left: 15px;padding: 30px;">
  你好
</div>

值的个数	意思
padding: 10px	上下左右10px
padding: 5px 10px	上下5px左右10px
padding: 5px 6px 10px	上5左右6下10
padding: 10px 5px 7px 10px	上10右5下7左10

新浪导航案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    a {
      display: inline-block;
      text-decoration: none;
      padding: 0 20px;
      font-size: 12px;
      color: #4c4c4c;
      height: 41px;
    }
    a:hover {
      background-color: #eee;
    }
    div {
      height: 41px;
      border-top: 3px solid #ff7000;
      border-bottom: 3px solid antiquewhite;
      line-height: 41px;
    }
  </style>
</head>
<body>
<div>
  <a href="#" >设为主页</a>
  <a href="#" >手机新浪网</a>
  <a href="#" >移动客户端</a>
  <a href="#" >博客 </a>
  <a href="#" >微博</a>
  <a href="#" >关注我</a>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rHNgPrvh-1689863224157)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709141947776.png)]

小米侧边栏修改

text-indent: 2em; 这样写很傻

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    a:hover {
      background-color: #ff7000;
    }
    a {
      background-color: #515556;
      color: white;
      text-decoration: none;
      display: block;
      width: 200px;
      height: 40px;
      padding-left: 30px;
      font-size: 14px;
      line-height: 40px;
    }
  </style>
</head>
<body>
<a href="#">手机 电话卡</a>
<a href="#">电视 盒子</a>
<a href="#">笔记本 平板</a>
<a href="#">出行 穿戴</a>
<a href="#">智能 路由器</a>
<a href="#">健康 儿童</a>
<a href="#">耳机 音响</a>

</body>
</html>

padding 不会撑开盒子

有padding不指定高和宽的子盒子, 则不会撑开父亲盒子

外边距 margin

margin 属性用于设置外边距, 控制盒子和盒子之间的距离

属性	作用
margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

使用和padding 相同

margin-bottom: 2px;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZCUU6XN8-1689863224158)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709150523593.png)]

外边距应用

使块级盒子水平居中显示

盒子必须有宽度width
左右外边距设为auto
块级盒子

<style>
div {
      background-color: antiquewhite;
      width: 50px;
      height: 50px;
      margin: 0 auto;
      margin-bottom: 2px;
    }
</style>
 <div id="one"></div>
  <div></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IBnCdLFk-1689863224158)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709150851894.png)]

行内和行内块水平居中

给他们的父元素 text-align: center;

嵌套块元素塌陷问题

嵌套块元素, 如果给子元素一个外边距, 父元素会有塌陷较大的外边距值

<style>
    .father {
      width: 400px;
      height: 400px;
      background-color: purple;
      margin-top: 50px;
    }
    .son {
      width: 200px;
      height: 200px;
      background-color: pink;
      margin-top: 100px;
    }
  </style>
<div class="father">
    <div class="son"></div>
  </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Kyj4QJXN-1689863224159)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709160107445.png)]

解决方案:

给父亲加一个边框 border: 1px solid transparent ;
给父亲加一个内边距 padding: 1px;
给父亲加 overflow:hidden
盒子有浮动固定绝对定位

清除内外边距

不同的元素自带内外边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Cz1Il9Hb-1689863224159)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709163502327.png)]

* {
            margin: 0;
            padding: 0;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pYd1qAol-1689863224160)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709163721880.png)]

行内元素尽量只设置左右边距

photoshop 操作

ctrl ＆ R 调出标尺

ctrl ＆ +|- 放大|缩小

空格点击拖动, 便于测量

ctrl + D 取消选区或者在空图层点击一下

综合案例

产品模块

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>综合案例-产品模块</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background-color: #f5f5f5;
    }
    
    a {
      color: #333;
      text-decoration: none;
    }
    
    .box {
      width: 298px;
      height: 415px;
      background-color:#fff;
      /* 让块级的盒子水平居中对齐 */
      margin: 100px auto;
    }
    
    .box img {
      /* 图片的宽度和父亲一样宽 */
      width: 100%;
    }
    
    .review {
      height: 70px;
      font-size: 14px;
      /* 因为这个段落没有 width属性 所有 padding不会撑开盒子的宽度 */
      padding: 0 28px;
      margin-top: 30px;
    }
    
    .appraise {
      font-size: 12px;
      color: #b0b0b0;
      margin-top: 20px;
      padding: 0 28px;
    }
    
    .info {
      font-size: 14px;
      margin-top: 15px;
      padding: 0 28px;
    }
    
    .info h4 {
      display: inline-block;
      font-weight: 400;

    }
    
    .info span {
      color: #ff6700;
    }
    .info em {
      font-style: normal;
      color: #ebe4e0;
      margin: 0 6px 0 15px;
    }
  </style>
</head>
<body>
<div class="box">
  <img src="img.jpg" alt="">
  <p class="review">快递牛，整体不错蓝牙可以说秒连。红米给力</p>
  <div class="appraise">来自于 117384232 的评价</div>
  <div class="info">
    <h4> <a href="#">Redmi AirDots真无线蓝...</a></h4>
    <em>|</em>
    <span> 99.9元</span>
  </div>
</div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-32NbNslR-1689863224160)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709183914066.png)]

+++

一些问题总结

不能所有盒子都用div, 标题用h, 段落用p
尽量多起类名, 是一个好的习惯, 便于后期维护
margin和padding 各有优缺点, 根据实际情况使用
多用辅助工具, ps 截图工具

快报模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            color: gray;
        }
        * {
            margin: 0;
            padding: 0;
        }
        .a {
            width: 300px;
            height: 400px;
            margin: 100px auto;
            border: 1px solid transparent ;
        }
        .b {
            padding-left: 30px;
            padding-top: 20px;
            height: 50px;
            font-size: 25px;
            border: 1px solid lightgray;
        }
        .c {
            height: 200px;
            padding-top: 20px;
            padding-left: 20px;
            border: 1px solid lightgray;
        }
        p {
            height: 30px;
        }
    </style>
</head>
<body>
    <div class="a">

        <div class="b">品优购快报</div>

        <div class="c">
            <p>【特惠】爆款耳机5折秒</p>
            <p>【特惠】母亲节，健康好礼任至5折！</p>
            <p>【特惠】爆款耳机5折秒！</p>
            <p>【特惠】9.9元洗100张照片！</p>
            <p>【特惠】长虹智能空调立省1000</p>
        </div>

    </div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-qp2U54x8-1689863224160)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709205721025.png)]

+++

圆角边框

CSS3添加了圆角属性


<div style="background-color: pink;
            border-radius:5px;width:50px;height:50px;">

</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rIQCwTC0-1689863224161)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709210330019.png)]

可以写百分比

<div style="background-color: pink;border-radius: 100%;width: 50px;height: 50px;">
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ArQboUhS-1689863224161)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709210558287.png)]

盒子阴影

box-shadow: 10px 10px 10px 10px rgba(0,0,0,50%) inset(内阴影)

影子左右移模糊程度大小 color(透明色)

<div style="margin: 100px auto; background-color: pink;
border-radius: 10%;width: 200px;height: 200px;
box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3)">

</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JvrwTT6y-1689863224162)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709211522268.png)]



box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3) inset;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vDeWX9Ph-1689863224162)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709211611190.png)]

常用: 鼠标经过有阴影

div:hover {
    box-shadow: 10px 10px 10px 10px rgba(0,0,0,.3)
}

文字阴影

text-shadow: 5px 5px 5px rgba(0,0,0,.3);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AQGfdnrU-1689863224162)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709212130468.png)]

CSS 浮动

下拉网页, 顶部栏始终呈现浮动效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-erN71Zky-1689863224163)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709222722777.png)]

传统网页布局三种方式

第一种标准流,标签按照规定好默认方式排列

块级元素独占一行, 从上到下排序
行内元素按照顺序从左到右排列, 碰到父元素自动换行

第二种浮动

第三种定位

为什么需要浮动

多个块级元素纵向排列找标准流, 多个块级元素横向排列找浮动

让多个div在一行显示, 用行内块会有缝隙或者让两个div左右两个角排列标准流按部就班无能为力

网页布局第一准则: 多个块级元素纵向排列找标准流, 多个块级元素横向排列用浮动排列

浮动入门

float 属性用于创建浮动框, 将其移动到一遍, 直到边缘被吸附

属性值	描述
none	元素不浮动
left	元素向左浮动
right	元素向右浮动

设置浮动元素重要特性:

脱离标准普通流移动到制定位置 , 称为脱标
浮动盒子不再保留原来的位置

<style>
        * {
            margin: 0;
            padding: 0;
        }
        div {
            background-color: pink;
        }
    </style>
</head>
<body>
    <div style="width: 300px;height: 300px;float: left">左青龙</div>
    <div style="width: 300px;height: 300px;float: right">右白虎</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H0Os7Ana-1689863224163)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709221739201.png)]

浮动的盒子会压住未浮动的盒子, 变成三维空间

<div style="background-color: pink;width: 300px;height: 300px;float: left">左青龙</div>
<div style="background-color: blue;width: 400px;height: 400px;">右白虎</div>

浮动特性

多个盒子都设置浮动, 按照属性值一行内显示并顶端对齐排列

如果一行装不开浮动的盒子, 会另起一行显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0NsseJtC-1689863224164)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230709222911653.png)]

+++

任何元素都可以浮动, 添加浮动后, 都会有行内块元素的特性

浮动布局练习1

浮动元素和标准流父级搭配使用

用标准流的父元素排列上下位置, 内部子元素左右排列, 符合网络布局第一准则

<style>
        .box {
            width: 700px;
            height: 400px;
            background-color: pink;
        }
        .left {
            width: 300px;
            height: 400px;
            float: left;
            background-color: cadetblue;
        }
        .right {
            width: 400px;
            height: 400px;
            float: right;
            background-color: greenyellow;
        }
</style>

<div class="box">
        <div class="left">左侧盒子</div>
        <div class="right">右侧盒子</div>
</div>

浮动布局练习二

实现小米布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HkMdTmfK-1689863224164)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710145244669.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        ul {
            margin: 0;
            padding: 0;
            background-color: pink;
            width: 660px;
            height: 200px;
        }
        li {
            list-style: none;
            background-color: cadetblue;
            width: 150px;
            height: 200px;
            margin-right: 20px;
            float: left;
        }
        .last {
            margin-right: 0;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li class="last"></li>
    </ul>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PH8fU4jr-1689863224165)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710145322846.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
  ul {
    margin: 0;
    padding: 0;
  }
  ul li {
    background-color: pink;
    margin-left: 10px;
    height: 290px;
    width: 200px;
    float: left;
  }


</style>
<body>

  <div style="width: 300px;height: 600px;float: left;background-color: purple">
  左青龙</div>
  <ul style="float: left;background-color: greenyellow;width: 840px;height: 600px;margin-top: 0;list-style: none;
    ">
    <li style="margin-bottom: 10px;">1</li>
    <li style="margin-bottom: 10px;">2</li>
    <li style="margin-bottom: 10px;">3</li>
    <li style="margin-bottom: 10px;">4</li>

    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>

  </ul>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d8qsTsPz-1689863224165)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710150857610.png)]

+++

常见的网络布局

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ACsT4Ho9-1689863224165)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710153930733.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZdQ9fpOC-1689863224166)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710153943969.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FyDgEr7D-1689863224166)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710153959008.png)]

第三种实现一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        ul li {
            width: 150px;
            height: 200px;
            background-color: lightgray;
            margin: 0 10px 0 auto;
            float: left;
        }
        .ul {
            width: 630px;
            height: 200px;
            margin: 0 auto;
        }
        </style>
</head>
<body>

    <div class="top" style="height: 80px;background-color: lightgray;">top</div>
    <div class="banner" style="background-color: lightgray;width: 630px;height: 200px;
        margin: 20px auto;">banner</div>

    <div class="ul">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li style="margin-right: 0">4</li>
        </ul>
    </div>

    <div class="footer"></div>
    <div class="top" style="height: 200px;width: 1300px;background-color: lightgray;margin: 20px auto;">top</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rzTXWVuK-1689863224167)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710154038216.png)]

浮动布局注意点

浮动和标准的父盒子搭配

先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

一个元素浮动了, 理论上其余兄弟元素也要浮动

浮动的盒子只会影响盒子后面的标准流, 不会影响前面的标准流

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CuQKNpCy-1689863224167)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710155055266.png)]

浮动盒子前面的1标准盒子不会被浮动

浮动盒子后面的3标准盒子会被浮动

清除浮动原因

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kacFXkWi-1689863224167)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710160325802.png)]

我们可以不设定父盒子的高度, 然而又会出现问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5glg6GNn-1689863224168)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710160615657.png)]

清除浮动

添加额外标签

在浮动标签和标准标签中间用标签隔开

<div style="clear:both;"></div>

父亲添加overflow

<div style="overflow:auto;"></div>

伪元素

需要的话直接复制粘贴即可

.clearfix:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

.clearfix {
	/*IE6、7专有*/
	*zoom: 1;
}

双伪元素

.clearfix:before,
.clearfix:after {
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix {
	*zoom:1;
}

清除浮动总结

为什么清除浮动?

父级没高度
子盒子浮动了
影响下面布局了, 应该清除浮动了

清除浮动方式	优点	缺点
额外标签法	通俗易懂，书写方便	添加许多无意义的标签，结构化较差。
父级 overflow:hidden	书写简单	溢出隐藏
父级 after 伪元素	结构语义化正确	由于1E6-7不支持：after,兼容性问题
父级双伪元素	结构语义化正确	由于IE6-7不支持：after,兼容性问题

切图

操作 .psd 文件

右键, 快速导出PNG

多选切图

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bSvPcXKG-1689863224168)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710165203997.png)]

此处文字和图片分离, 我们需要把文字和图片合并在一起

shift 多选, ctrl + E 合并

切片工具切割

导出为web旧版格式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FJpx0Oy5-1689863224169)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710165730242.png)]

如果要透明的我们需要在图层把背景眼睛闭上

像素大厨

这个工具的作用是便于测量

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4WiS0vVL-1689863224169)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710171834572.png)]

学成在线案例准备

* {
    padding: 0;
    margin: 0;
}

CSS 书写顺序

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-M3bo2HP4-1689863224170)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710173224962.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fBfpO8OH-1689863224170)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710173231586.png)]

页面布局整体思路

确定页面的版式, 可视区, 直接用PS测量
分析页面的行模块, 每个行的列模块
一个行模块里面的列模块会浮动布局, 确定每个列的大小, 之后确定列的位置
HTML 先结构, 后样式的原则, 结构远比样式重要
先理清布局结构, 再写代码

+++

定位导读

把盒子定位到一个位置

浮动: 让多个块级盒子一行没有缝隙排列显示, 用于横向排列盒子

定位: 让盒子自由在盒子内移动位置或固定屏幕中某个位置, 可以压住盒子

定位 = 定位模式 + 边偏移

定位模式:

通过css的position属性设置:

值	语义
static	静态定位
relative	相对定位
absolute	绝对定位
fixed	固定定位

边偏移:

是定位盒子移动到最终位置

边偏移属性	示例	描述
top	top:80px	顶端偏移量, 定义元素相对于其父元素上边线的距离
bottom	bottom:80px	底部偏移量, 定义元素相对于其父元素下边线的距离
left	left:80px	左侧偏移量, 定义元素相对于其父元素下边线的距离
right	right:80px	右侧偏移量, 定义元素相对于其父元素下边线的距离

相对定位

静态定位 static 了解

默认定位方式, 无定位

静态定位没有边偏移, 基本不用

+++

相对定位 relative 重要

元素移动位置, 相对于它原来的位置来说的

选择器 { position:relative }

特点

相对于自己原来的位置移动
原来在标准流的位置继续占用, 后面的盒子仍然以标准流的方式对待他

相对定位没有脱标, 典型应用是给绝对定位当爹

.box1 {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: relative;
            top: 50px;
            left: 50px;
        }
        .box2 {
            width: 100px;
            height: 100px;
            background-color: pink;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q9zuVSAE-1689863224171)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710224258243.png)]

绝对定位

绝对定位是元素移动位置时相对于祖先元素来说的, 到处找爹, 三姓家奴

选择器 { position: absolute; }

如果没有父元素或父元素没有定位, 则以浏览器为准定位

<style>
        .father {
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 400px;
            left: 0;
        }
    </style>
</head>

<body>

    <div class="father">
        <div class="son"> </div>
    </div>

</body>

尽管 son 和 father 是父子关系, 但是son 比较叛逆, 会跑出父亲盒子

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pkLHf0NQ-1689863224171)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710225755554.png)]

如果父元素有定位, 则父元素就是参照位置

父亲有能力, 可以管住儿子

.father {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            top: 30px;
            left: 0;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Lk6tFoCX-1689863224172)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710230120472.png)]

儿子不会跑出去了, 被父元素给约束了

这里的父元素只要是父辈都适用, 比如它爷爷有定位, 则在他爷爷里面定位

以最近一级的有定位祖先元素为参考点移动位置

.gra {
            width: 800px;
            height: 800px;
            background-color: pink;
            position: relative;
        }
        .father {
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 30px;
            right: 0;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hWo56G6w-1689863224172)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230710230626416.png)]

这里它去了爷爷的右边界

+++

绝对定位脱标后不会占有原来的位置

子绝父相

因为父级需要占位, 因此是相对定位, 子盒子不需要占位, 则是绝对定位

子级用绝对定位的话, 父级要用相对定位

子级绝对定位不会占位, 可以放到父盒子的任何一个地方, 不会影响其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子内显示
父盒子布局时, 需要占位, 因此父亲只能相对定位

相对定位经常用来作为绝对定位的父级

		.gra {
            width: 800px;
            height: 800px;
            background-color: pink;
            position: relative;
        }
        .father {
            width: 300px;
            height: 300px;
            background-color: lightskyblue;
            position: relative;
        }
        .son {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            top: 30px;
            right: 0;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9DSpDsQP-1689863224173)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230711085100480.png)]

+++

固定定位

<style>
  .dj {
      position: fixed;
      top: 100px;
      right: 40px;
   }
</style>
</head>
<body>
<div class="dj">
    <img src="pvp.png" alt="">
</div>

不管页面怎么滚动, 小妲己始终在页面右侧中间位置

固定定位到版心的右侧

小算法:

让固定定位的盒子 left: 50% 走到浏览器可视区(版心)的一半
让固定定位的盒子margin-left:版心宽度的一半距离, 多走版心宽度的一半, 可以让固定定位的盒子贴着版心右侧对齐

<style>
    .w {
      width: 800px;
      height: 1400px;
      background-color: pink;
      margin: 0 auto;
    }
    .m {
      width: 100px;
      height: 100px;
      background-color: blue;
      position: fixed;
      left: 50%;
      margin-left: 400px;
    }
  </style>
</head>
<body>
  <div class="m"></div>
  <div class="w"></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-IrGjuNsl-1689863224173)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230711093546810.png)]

粘性定位

以浏览器可视窗口为参照点移动元素
粘性定位占有原先的位置

<style>
    .one {
      width: 200px;
      height: 200px;
      background-color: lightskyblue;
      margin: auto;
      position: sticky;
      top: 0;
    }
  </style>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2NAaW7wV-1689863224174)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20230711094426124.png)]

滑动滚轮, 蓝色盒子在紧贴top: 0;的位置粘住了

定位模式总结

定位模式	是否脱标(不占位)	移动位置	是否常用
static 静态定位	否	不能使用边偏移	很少
relative 相对定位	否	相对于自身位置移动	常用
absolute 绝对定位	是	带有定位的父级	常用
fixed 固定定位	是	浏览器可视区	常用
sticky 粘性定位	否	浏览器可视区	当前阶段少

定位叠放顺序

使用定位布局, 会出现盒子重叠情况, 使用z-index控制盒子前后次序(z轴)

<style>
    .a {
      width: 200px;
      height: 200px;
      background-color: lightskyblue;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 3;
    }
    .b {
      width: 300px;
      height: 300px;
      background-color: pink;
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 2;
    }
    .c {
      width: 400px;
      height: 400px;
      background-color: navajowhite;
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
    }
  </style>
</head>
<body>
    <div class="a">123</div>
    <div class="b">456</div>
    <div class="c">789</div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NnBl7YK6-1689863224174)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712142328597.png)]

+++

拓展: 绝对定位盒子居中

.box {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 0 auto;
      }

发现 margin:0 auto; 居中失效了, 我们要更改 left & margin-left 属性

.box {
        position: absolute;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-left: -100px;
        background-color: pink;
        /*margin: 0 auto;*/
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EunZ5tS2-1689863224174)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712143907348.png)]

+++

.box {
        position: absolute;
        left: 50%;
        margin-left: -100px;
        top: 50%;
        margin-top: -100px;
        width: 200px;
        height: 200px;
        background-color: pink;
        /*margin: 0 auto;*/
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-7QCKEuqy-1689863224175)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712144257662.png)]

+++

拓展: 定位和浮动

绝对&固定定位和浮动类似

行内元素添加绝对或者固定定位, 可以直接设置高度和宽度

.one {
        background-color: pink;
        width: 200px;
        height: 300px;
        /*display: block;*/
        position: absolute; /*和上面转换块级元素代码等价*/
    }

块级元素添加绝对或者固定定位, 不给宽度或高度, 默认大小是内容大小

<style>
    .one {
        background-color: pink;
        position: absolute;
    }
  </style>

<div class="one">123</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0SM5LYgR-1689863224175)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712151444431.png)]

如果不加定位, 则宽度是body宽度

<style>
    .one {
        background-color: pink;
    }
</style>

<div class="one">123</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EFYYlAjq-1689863224176)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712151506093.png)]

+++

脱标的盒子不会出发外边距塌陷

浮动元素, 绝对定位(固定定位) 元素的都不会触发外边距合并的问题

浮动会压住盒子, 不会压住盒子里的文字, 而绝对定位都会

.box {
            float: left;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bY9MXsCp-1689863224176)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712154510316.png)]

.box {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KNDPsXeT-1689863224176)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712154608821.png)]

淘宝大图片盒子制作

注意: left 的权重大于right , top > bottom

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tb {
            position: relative;
            background-color: pink;
            width: 520px;
            height: 280px;
            margin: 100px auto;
        }

        .tb img { /*更改图片大小是以防万一*/
            width: 520px;
            height: 280px;
        }

        .imgA {
            background-color: rgba(0,0,0,.3);
            position: absolute;
            left: 0;
            width: 20px;
            height: 30px;
            line-height: 30px;
            text-decoration-line: none;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            color: #fff;
            border-top-right-radius: 15px;
            border-bottom-right-radius: 15px;
        }

        .imgB {
            background-color: rgba(0,0,0,.3);
            position: absolute;
            right: 0;
            width: 20px;
            height: 30px;
            line-height: 30px;
            top: 50%;
            margin-top: -15px;
            text-align: center;
            text-decoration-line: none;
            border-top-left-radius: 15px;
            border-bottom-left-radius: 15px;
            color: #fff;
        }
        .imgUl {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -35px;
            width: 70px;
            height: 13px;
            background-color: rgba(255, 255, 255, .3);
            border-radius: 20px;
        }
        ul li {
            border-radius: 100%;
            background-color: white;
            width: 8px;
            height: 8px;
            list-style: none;
            float: left;
            margin: 3px;
        }
    </style>
</head>
<body>
    <div class="tb">
        <img src="tb.jpg" alt="#"/>
        <a href="#" class="imgA"> < </a>
        <a href="#" class="imgB"> > </a>
        <ul class="imgUl">
            <li class="one"></li>
            <li></li>
            <li></li>
            <li style="background-color: red"></li>
            <li></li>
        </ul>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gGi3bIxK-1689863224177)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712170944340.png)]

+++

网络布局总结

html标签是一个盒子 , css浮动, 定位可以让每个盒子排列成网页,

一个完整的网页是标准流, 浮动, 定位一起完成的, 每个都有自己的专门用法

标准流

让盒子上下排列或左右排列, 垂直的块级盒子显示用标准流布局

浮动

让多个块级元素一行显示或左右对齐盒子, 多个块级盒子水平显示用浮动布局

定位

最大特点是有层叠的概念, 可以让多个盒子前后叠压来显示, 如果元素自由在某个盒子内移动就用布局定义

display 属性

display 属性用于设置一个元素应如何显示

默认样式

<head>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
</head>
<body>
  <div style="background: blue"> 佩奇 </div>
  <div> 乔治 </div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-abLsaXiV-1689863224177)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712174304735.png)]

display:none 隐藏对象

<div style="background: blue;display: none"> 佩奇 </div>

我们发现佩奇丢了

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XfWeh4So-1689863224178)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712174406179.png)]

display:block 除了转换为块级元素之外, 同时还有显示元素的意思

<div style="background: blue;display: block"> 佩奇 </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ThCaVLSk-1689863224178)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712174519274.png)]

佩奇又回来了

display 隐藏元素后, 不再占有原来的位置, 搭配JS可以做很多网页特效

visibility 可见性

visibility 属性用于指定一个元素可见还是隐藏, ^_ 隐藏视野罢了

visibility: hidden 元素隐藏

<div style="background: blue;visibility: hidden">佩奇</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b5SsUhxG-1689863224179)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712175349547.png)]

visibility: visible 元素可视

<div style="background: blue;visibility: visible">佩奇</div>

恢复正常 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Yyv89FEX-1689863224179)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712174519274.png)]

+++

overflow 溢出

指定内容溢出元素的框, 会发生什么

overflow:hidden 隐藏

<style>
    .one {
        width: 150px;
        height: 200px;
        border: 3px solid pink;
        margin: 100px auto;
        overflow: hidden;
    }
  </style>
</head>
<body>
  <div class="one">
    粉红猪小妹佩奇是一只非常可爱的小粉红猪，她与弟弟乔治、爸爸、妈妈快乐地住在一起。粉红猪小妹最喜欢做的事情是玩游戏，
    打扮的漂漂亮亮，度假，以及住在小泥坑里快乐地跳上跳下！除了这些
  </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dZX3ZAar-1689863224179)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712204259307.png)]

overflow: visible 显示

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zvv3vJaG-1689863224180)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712204351818.png)]

overflow: scroll; 显示滚动条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RMH7uYCC-1689863224180)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712204426841.png)]

overflow: auto; 在需要时添加滚动条 , 超出则加条, 不超不加条

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jfvkrlgg-1689863224181)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712204505843.png)]

属性	描述
visible	不剪切内容也不添加滚动条
hidden(常用)	不显示超过对象的内容, 超出的部分隐藏
scroll	不管超出内容否, 总是显示滚动条
auto	超出自动显示滚动条, 不超出不显示滚动条

隐藏总结

如果隐藏元素想要原来位置, 用visibility:hidden

如果隐藏元素不想要原来位置, 用display:none (更常用, 配js更丝滑)

需要管理溢出显示隐藏则使用 overflow:hidden

土豆网案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one {
      width: 444px;
      height: 320px;
      background-color: pink;
      margin: 100px auto;
      position: relative;
    }
    .two {
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.3) url("arr.png") no-repeat center;
      position: absolute;
      left: 0;
      top: 0;
      display: none;
    }
    /*鼠标经过图片时, 就会有遮罩*/
    .one:hover .two{
        display: block;
    }
  </style>
</head>
<body>
    <div class="one">
      <img style="width: 100%;height: 100%" src="tudou.jpg" alt="">
      <div class="two"></div>
    </div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WUQievJy-1689863224181)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230712211332859.png)]

CSS 高级技巧

精灵图

目的: 减少服务器接收和发送请求的次数, 提高页面的加载速度

原理: 将网页一些小背景图整合到一张大图, 这样服务器只需要一次请求即可

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-53E3e09p-1689863224181)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230713153939946.png)]

<style>
      .one {
        width: 60px;
        height: 60px;
        margin: 200px auto;
        background: url("sprites.png") -180px 0;
      }
      .two {
        width: 26px;
        height: 24px;
        margin: 100px auto;
        background: url("sprites.png") -154px -107px;
      }
    </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DW89jHla-1689863224182)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230713161051300.png)]

精灵图拼自己的名字

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      .one {
        width: 95px;
        height: 114px;
        background: url("abcd.jpg") 0 -138px;
        float: left;
      }
      .two {
        width: 111px;
        height: 114px;
        background: url("abcd.jpg") -95px -138px;
        float: left;
      }
      .three {
        width: 103px;
        height: 114px;
        background: url("abcd.jpg") -389px -138px;
        float: left;
      }
    </style>
</head>
<body>
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x0yAtvVX-1689863224182)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230713163618860.png)]

字体图标知识

字体图标使用场景: 网页通用常用的小图标

图片文件比较大, 本身放大缩小失真, 图片制作完毕更换会很麻烦

字体图标本质属于字体, 只是以图标形式展示

字体图标和精灵图:

结构和样式比较简单的小图标, 用字体图标
结构和样式比较复杂的小图标, 用精灵图

字体图标使用

字体图标下载
字体图标引入
字体图标追加

<svg style="width: 50px; height: 50px" height="1024" node-id="1" sillyvg="true" template-height="1024" template-width="1024" version="1.1" viewBox="0 0 1024 1024" width="1024" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs node-id="42"><clipPath id="mask-2" node-id="13"><path d="M 559.28 0.24 L 591.59 0.24 C 600.96 0.24 609.90 2.02 618.10 5.27 C 663.64 12.36 697.48 26.60 719.61 47.98 C 756.96 87.79 794.30 133.24 831.65 184.31 C 851.65 213.99 874.52 228.84 900.26 228.84 C 938.87 228.84 951.24 255.37 951.24 278.93 C 952.64 291.82 952.64 313.17 951.24 342.99 L 951.24 417.72 L 662.04 410.13 C 659.71 414.64 655.01 417.72 649.59 417.72 L 14.00 417.72 C 6.27 417.72 0.00 411.45 0.00 403.72 L 0.00 14.24 C 0.00 6.50 6.27 0.24 14.00 0.24 L 523.35 0.24 C 535.84 -0.08 547.82 -0.08 559.28 0.24 Z" fill="#000000" fill-rule="evenodd" node-id="47" stroke="none" target-height="417.8" target-width="952.64" target-x="0" target-y="-0.08"></path></clipPath><clipPath id="mask-4" node-id="22"><path d="M 2.00 0.00 L 216.69 0.00 C 217.79 0.00 218.69 0.90 218.69 2.00 L 218.69 123.25 C 218.69 124.35 217.79 125.25 216.69 125.25 L 2.00 125.25 C 0.90 125.25 0.00 124.35 0.00 123.25 L 0.00 2.00 C 0.00 0.90 0.90 0.00 2.00 0.00 Z" fill="#000000" fill-rule="evenodd" node-id="54" stroke="none" target-height="125.25" target-width="218.69" target-x="0" target-y="0"></path></clipPath><clipPath id="mask-6" node-id="28"><path d="M 2.00 0.00 L 137.89 0.00 C 138.46 -0.00 139.00 0.24 139.38 0.67 L 247.53 121.92 C 248.26 122.74 248.19 124.01 247.36 124.74 C 247.00 125.07 246.52 125.25 246.03 125.25 L 2.00 125.25 C 0.90 125.25 0.00 124.35 0.00 123.25 L 0.00 2.00 C -0.00 0.90 0.90 0.00 2.00 0.00 Z" fill="#000000" fill-rule="evenodd" node-id="61" stroke="none" target-height="125.25" target-width="248.26" target-x="0" target-y="0"></path></clipPath><clipPath id="mask-2_3" node-id="13"><path d="M 593.15 338.24 L 625.46 338.24 L 630.14 338.39 L 634.70 338.82 L 639.15 339.54 L 645.70 341.12 L 651.97 343.27 L 665.38 345.63 L 677.79 348.36 L 689.26 351.43 L 699.85 354.81 L 709.61 358.48 L 718.59 362.43 L 726.85 366.65 L 734.42 371.12 L 741.36 375.83 L 747.70 380.78 L 753.48 385.98 L 768.96 402.80 L 784.60 420.46 L 800.43 439.00 L 816.43 458.42 L 832.61 478.76 L 848.97 500.05 L 865.51 522.31 L 871.15 530.18 L 876.78 537.11 L 882.40 543.16 L 888.01 548.40 L 893.62 552.90 L 899.24 556.70 L 904.88 559.84 L 910.56 562.38 L 916.31 564.33 L 922.13 565.72 L 928.06 566.56 L 934.13 566.84 L 939.99 567.06 L 945.26 567.65 L 950.00 568.57 L 954.26 569.79 L 958.50 571.42 L 962.31 573.28 L 965.71 575.37 L 968.75 577.69 L 972.48 581.22 L 975.64 585.02 L 978.28 589.12 L 980.47 593.49 L 982.21 598.00 L 983.51 602.68 L 984.41 607.45 L 984.94 612.20 L 985.11 616.93 L 985.81 626.27 L 986.14 639.43 L 985.97 657.33 L 985.11 680.99 L 985.11 755.72 L 695.91 748.13 L 694.54 750.27 L 692.86 752.09 L 690.84 753.61 L 688.59 754.75 L 686.15 755.45 L 683.46 755.72 L 47.87 755.72 L 45.31 755.48 L 42.97 754.84 L 40.80 753.80 L 38.84 752.41 L 37.17 750.75 L 35.78 748.78 L 34.74 746.61 L 34.11 744.27 L 33.87 741.72 L 33.87 352.24 L 34.11 349.68 L 34.74 347.34 L 35.78 345.17 L 37.17 343.20 L 38.84 341.54 L 40.80 340.15 L 42.97 339.11 L 45.31 338.47 L 47.87 338.24 L 557.22 338.24 L 575.77 338.00 L 593.15 338.24 Z" fill="#000000" fill-rule="evenodd" node-id="47" stroke="none" target-height="417.71997" target-width="952.27" target-x="33.87" target-y="338"></path></clipPath><clipPath id="mask-2_4" node-id="13"><path d="M 593.15 338.24 L 625.46 338.24 L 630.14 338.39 L 634.70 338.82 L 639.15 339.54 L 645.70 341.12 L 651.97 343.27 L 665.38 345.63 L 677.79 348.36 L 689.26 351.43 L 699.85 354.81 L 709.61 358.48 L 718.59 362.43 L 726.85 366.65 L 734.42 371.12 L 741.36 375.83 L 747.70 380.78 L 753.48 385.98 L 768.96 402.80 L 784.60 420.46 L 800.43 439.00 L 816.43 458.42 L 832.61 478.76 L 848.97 500.05 L 865.51 522.31 L 871.15 530.18 L 876.78 537.11 L 882.40 543.16 L 888.01 548.40 L 893.62 552.90 L 899.24 556.70 L 904.88 559.84 L 910.56 562.38 L 916.31 564.33 L 922.13 565.72 L 928.06 566.56 L 934.13 566.84 L 939.99 567.06 L 945.26 567.65 L 950.00 568.57 L 954.26 569.79 L 958.50 571.42 L 962.31 573.28 L 965.71 575.37 L 968.75 577.69 L 972.48 581.22 L 975.64 585.02 L 978.28 589.12 L 980.47 593.49 L 982.21 598.00 L 983.51 602.68 L 984.41 607.45 L 984.94 612.20 L 985.11 616.93 L 985.81 626.27 L 986.14 639.43 L 985.97 657.33 L 985.11 680.99 L 985.11 755.72 L 695.91 748.13 L 694.54 750.27 L 692.86 752.09 L 690.84 753.61 L 688.59 754.75 L 686.15 755.45 L 683.46 755.72 L 47.87 755.72 L 45.31 755.48 L 42.97 754.84 L 40.80 753.80 L 38.84 752.41 L 37.17 750.75 L 35.78 748.78 L 34.74 746.61 L 34.11 744.27 L 33.87 741.72 L 33.87 352.24 L 34.11 349.68 L 34.74 347.34 L 35.78 345.17 L 37.17 343.20 L 38.84 341.54 L 40.80 340.15 L 42.97 339.11 L 45.31 338.47 L 47.87 338.24 L 557.22 338.24 L 575.77 338.00 L 593.15 338.24 Z" fill="#000000" fill-rule="evenodd" node-id="47" stroke="none" target-height="417.71997" target-width="952.27" target-x="33.87" target-y="338"></path></clipPath><clipPath id="mask-4_3" node-id="22"><path d="M 272.45 385.93 L 487.14 385.93 L 487.92 386.09 L 488.55 386.52 L 488.98 387.15 L 489.14 387.93 L 489.14 509.18 L 488.98 509.97 L 488.55 510.60 L 487.92 511.02 L 487.14 511.18 L 272.45 511.18 L 271.67 511.02 L 271.04 510.60 L 270.61 509.97 L 270.45 509.18 L 270.45 387.93 L 270.61 387.15 L 271.04 386.52 L 271.67 386.09 L 272.45 385.93 Z" fill="#000000" fill-rule="evenodd" node-id="54" stroke="none" target-height="125.25" target-width="218.69" target-x="270.45" target-y="385.93"></path></clipPath><clipPath id="mask-4_4" node-id="22"><path d="M 272.45 385.93 L 487.14 385.93 L 487.92 386.09 L 488.55 386.52 L 488.98 387.15 L 489.14 387.93 L 489.14 509.18 L 488.98 509.97 L 488.55 510.60 L 487.92 511.02 L 487.14 511.18 L 272.45 511.18 L 271.67 511.02 L 271.04 510.60 L 270.61 509.97 L 270.45 509.18 L 270.45 387.93 L 270.61 387.15 L 271.04 386.52 L 271.67 386.09 L 272.45 385.93 Z" fill="#000000" fill-rule="evenodd" node-id="54" stroke="none" target-height="125.25" target-width="218.69" target-x="270.45" target-y="385.93"></path></clipPath><clipPath id="mask-6_3" node-id="28"><path d="M 530.90 385.93 L 666.79 385.93 L 667.60 386.11 L 668.28 386.60 L 776.42 507.85 L 776.83 508.54 L 776.93 509.30 L 776.74 510.03 L 776.26 510.68 L 775.64 511.05 L 774.93 511.18 L 530.90 511.18 L 530.11 511.02 L 529.48 510.60 L 529.06 509.97 L 528.90 509.18 L 528.90 387.93 L 529.06 387.15 L 529.48 386.52 L 530.11 386.09 L 530.90 385.93 Z" fill="#000000" fill-rule="evenodd" node-id="61" stroke="none" target-height="125.25" target-width="248.02997" target-x="528.9" target-y="385.93"></path></clipPath><clipPath id="mask-6_4" node-id="28"><path d="M 530.90 385.93 L 666.79 385.93 L 667.60 386.11 L 668.28 386.60 L 776.42 507.85 L 776.83 508.54 L 776.93 509.30 L 776.74 510.03 L 776.26 510.68 L 775.64 511.05 L 774.93 511.18 L 530.90 511.18 L 530.11 511.02 L 529.48 510.60 L 529.06 509.97 L 528.90 509.18 L 528.90 387.93 L 529.06 387.15 L 529.48 386.52 L 530.11 386.09 L 530.90 385.93 Z" fill="#000000" fill-rule="evenodd" node-id="61" stroke="none" target-height="125.25" target-width="248.02997" target-x="528.9" target-y="385.93"></path></clipPath></defs><g node-id="120"><path d="M 20.62 875.03 L 1044.00 875.03 L 1045.00 904.53 C 984.69 917.99 903.35 924.73 800.98 924.73 C 798.88 953.91 760.86 955.02 696.39 953.36 C 661.82 955.95 655.32 959.72 644.92 970.42 C 634.51 981.11 586.84 1006.46 511.81 970.42 C 488.94 960.48 473.06 953.62 439.55 986.34 C 406.04 1019.06 376.17 988.05 369.09 979.23 C 362.00 970.42 364.18 952.53 305.58 946.84 C 272.85 943.75 261.19 934.22 270.61 918.25 C 67.67 909.05 -21.13 894.64 4.22 875.02 C 9.56 874.99 15.02 874.99 20.62 875.03 Z" fill="#8ecec5" fill-opacity="0.4" fill-rule="nonzero" group-id="1" id="路径-16" node-id="9" stroke="none" target-height="144.07" target-width="1066.13" target-x="-21.13" target-y="874.99"></path></g><g node-id="121"><path d="M 6.44 620.95 C -2.08 583.64 -57.58 340.66 99.33 307.25 C 256.24 273.84 348.94 312.75 417.89 244.72 C 486.83 176.70 504.03 187.86 560.66 192.36 C 617.29 196.86 682.92 147.76 704.97 133.01 C 727.03 118.26 926.15 23.36 977.06 307.25 C 985.10 429.99 991.79 563.15 935.46 613.58 C 879.13 664.02 936.49 709.31 977.06 714.35 C 1017.63 719.38 958.09 805.56 864.39 843.19 C 802.09 871.55 399.10 952.86 157.77 869.28 C 41.24 818.64 14.97 658.26 6.44 620.95 Z" fill="#8ecec5" fill-opacity="0.08" fill-rule="nonzero" group-id="2" id="路径-58" node-id="10" stroke="none" target-height="929.5" target-width="1075.21" target-x="-57.58" target-y="23.36"></path></g><g node-id="122"><g node-id="123"><g node-id="127"><path d="M 593.15 338.24 L 625.46 338.24 L 630.14 338.39 L 634.70 338.82 L 639.15 339.54 L 645.70 341.12 L 651.97 343.27 L 665.38 345.63 L 677.79 348.36 L 689.26 351.43 L 699.85 354.81 L 709.61 358.48 L 718.59 362.43 L 726.85 366.65 L 734.42 371.12 L 741.36 375.83 L 747.70 380.78 L 753.48 385.98 L 768.96 402.80 L 784.60 420.46 L 800.43 439.00 L 816.43 458.42 L 832.61 478.76 L 848.97 500.05 L 865.51 522.31 L 871.15 530.18 L 876.78 537.11 L 882.40 543.16 L 888.01 548.40 L 893.62 552.90 L 899.24 556.70 L 904.88 559.84 L 910.56 562.38 L 916.31 564.33 L 922.13 565.72 L 928.06 566.56 L 934.13 566.84 L 939.99 567.06 L 945.26 567.65 L 950.00 568.57 L 954.26 569.79 L 958.50 571.42 L 962.31 573.28 L 965.71 575.37 L 968.75 577.69 L 972.48 581.22 L 975.64 585.02 L 978.28 589.12 L 980.47 593.49 L 982.21 598.00 L 983.51 602.68 L 984.41 607.45 L 984.94 612.20 L 985.11 616.93 L 985.81 626.27 L 986.14 639.43 L 985.97 657.33 L 985.11 680.99 L 985.11 755.72 L 695.91 748.13 L 694.54 750.27 L 692.86 752.09 L 690.84 753.61 L 688.59 754.75 L 686.15 755.45 L 683.46 755.72 L 47.87 755.72 L 45.31 755.48 L 42.97 754.84 L 40.80 753.80 L 38.84 752.41 L 37.17 750.75 L 35.78 748.78 L 34.74 746.61 L 34.11 744.27 L 33.87 741.72 L 33.87 352.24 L 34.11 349.68 L 34.74 347.34 L 35.78 345.17 L 37.17 343.20 L 38.84 341.54 L 40.80 340.15 L 42.97 339.11 L 45.31 338.47 L 47.87 338.24 L 557.22 338.24 L 575.77 338.00 L 593.15 338.24 Z" fill="#ffffff" fill-rule="evenodd" group-id="3,4,8" node-id="79" stroke="none" target-height="417.71997" target-width="952.27" target-x="33.87" target-y="338"></path></g><g node-id="128"><g clip-path="url(#mask-2_3)" group-id="3,4,9" node-id="82"><path d="M 33.87 531.06 L 39.01 540.06 L 44.79 548.97 L 51.22 557.81 L 58.34 566.59 L 66.17 575.31 L 74.76 583.99 L 84.14 592.61 L 94.35 601.20 L 105.44 609.73 L 117.45 618.22 L 130.43 626.67 L 144.44 635.05 L 159.52 643.38 L 175.73 651.65 L 193.14 659.83 L 211.79 667.94 L 231.76 675.95 L 253.10 683.86 L 275.88 691.64 L 300.17 699.30 L 326.03 706.81 L 353.54 714.16 L 382.77 721.33 L 413.79 728.32 L 446.68 735.09 L 481.51 741.63 L 518.37 747.92 L 557.33 753.95 L 598.48 759.69 L 548.09 759.49 L 391.43 759.40 L 33.87 759.69 L 33.87 531.06 Z" fill="#d6dbdb" fill-rule="evenodd" group-id="3,4,9" id="路径-91" node-id="16" stroke="none" target-height="228.63" target-width="564.61" target-x="33.87" target-y="531.06"></path></g></g><g clip-path="url(#mask-2_4)" group-id="3,4,10" node-id="86"><path d="M 35.87 576.79 L 984.15 576.79 L 984.94 576.95 L 985.57 577.38 L 986.00 578.01 L 986.15 578.79 L 986.15 622.50 L 986.00 623.29 L 985.57 623.92 L 984.94 624.34 L 984.15 624.50 L 35.87 624.50 L 35.08 624.34 L 34.45 623.92 L 34.03 623.29 L 33.87 622.50 L 33.87 578.79 L 34.03 578.01 L 34.45 577.38 L 35.08 576.95 L 35.87 576.79 Z" fill="#e85f5b" fill-rule="evenodd" group-id="3,4,10" node-id="88" stroke="none" target-height="47.710022" target-width="952.28" target-x="33.87" target-y="576.79"></path></g></g><path d="M 23.00 759.69 L 20.99 759.51 L 19.15 759.00 L 17.45 758.19 L 15.90 757.10 L 14.60 755.79 L 13.50 754.24 L 12.69 752.54 L 12.19 750.70 L 12.00 748.69 L 12.00 668.24 L 302.26 668.24 L 302.26 725.89 L 721.74 725.89 L 721.74 668.24 L 1012.00 668.24 L 1012.00 748.69 L 1011.81 750.70 L 1011.31 752.54 L 1010.50 754.24 L 1009.40 755.79 L 1008.10 757.10 L 1006.55 758.19 L 1004.85 759.00 L 1003.01 759.51 L 1001.00 759.69 L 23.00 759.69 Z" fill="#184657" fill-rule="nonzero" group-id="3" id="形状结合" node-id="18" stroke="none" target-height="91.45001" target-width="1000" target-x="12" target-y="668.24"></path><path d="M 169.06 385.93 L 174.18 386.15 L 179.12 386.75 L 183.90 387.73 L 188.54 389.08 L 193.08 390.80 L 197.40 392.82 L 201.52 395.17 L 205.46 397.83 L 209.18 400.78 L 212.64 403.99 L 215.84 407.44 L 218.80 411.17 L 221.46 415.10 L 223.80 419.22 L 225.83 423.55 L 227.55 428.08 L 228.90 432.72 L 229.87 437.51 L 230.47 442.45 L 230.69 447.56 L 230.47 452.68 L 229.87 457.62 L 228.90 462.41 L 227.55 467.04 L 225.83 471.58 L 223.80 475.91 L 221.46 480.03 L 218.80 483.96 L 215.84 487.69 L 212.64 491.14 L 209.18 494.35 L 205.46 497.30 L 201.52 499.96 L 197.40 502.31 L 193.08 504.33 L 188.54 506.05 L 183.90 507.40 L 179.12 508.38 L 174.18 508.98 L 169.06 509.20 L 163.94 508.98 L 159.00 508.38 L 154.22 507.40 L 149.58 506.05 L 145.04 504.33 L 140.71 502.31 L 136.59 499.96 L 132.66 497.30 L 128.94 494.35 L 125.48 491.14 L 122.28 487.69 L 119.32 483.96 L 116.66 480.03 L 114.32 475.91 L 112.29 471.58 L 110.57 467.04 L 109.22 462.41 L 108.24 457.62 L 107.64 452.68 L 107.43 447.56 L 107.64 442.45 L 108.24 437.51 L 109.22 432.72 L 110.57 428.08 L 112.29 423.55 L 114.32 419.22 L 116.66 415.10 L 119.32 411.17 L 122.28 407.44 L 125.48 403.99 L 128.94 400.78 L 132.66 397.83 L 136.59 395.17 L 140.71 392.82 L 145.04 390.80 L 149.58 389.08 L 154.22 387.73 L 159.00 386.75 L 163.94 386.15 L 169.06 385.93 Z M 181.75 409.79 L 156.37 409.79 L 155.58 409.95 L 154.95 410.38 L 154.53 411.01 L 154.37 411.79 L 154.37 411.79 L 154.37 432.87 L 133.28 432.88 L 132.50 433.03 L 131.87 433.46 L 131.44 434.09 L 131.28 434.88 L 131.28 434.88 L 131.28 460.25 L 131.44 461.04 L 131.87 461.67 L 132.50 462.09 L 133.28 462.25 L 133.28 462.25 L 154.37 462.25 L 154.37 483.34 L 154.53 484.12 L 154.95 484.75 L 155.58 485.18 L 156.37 485.34 L 156.37 485.34 L 181.75 485.34 L 182.53 485.18 L 183.16 484.75 L 183.59 484.12 L 183.75 483.34 L 183.75 483.34 L 183.75 462.25 L 204.83 462.25 L 205.62 462.09 L 206.25 461.67 L 206.67 461.04 L 206.83 460.25 L 206.83 460.25 L 206.83 434.88 L 206.67 434.09 L 206.25 433.46 L 205.62 433.03 L 204.83 432.88 L 204.83 432.88 L 183.75 432.87 L 183.75 411.79 L 183.59 411.01 L 183.16 410.38 L 182.53 409.95 L 181.75 409.79 L 181.75 409.79 Z" fill="#e85f5b" fill-rule="evenodd" group-id="3,5" id="形状结合" node-id="20" stroke="none" target-height="123.27002" target-width="123.26" target-x="107.43" target-y="385.93"></path><path d="M 272.45 385.93 L 487.14 385.93 L 487.92 386.09 L 488.55 386.52 L 488.98 387.15 L 489.14 387.93 L 489.14 509.18 L 488.98 509.97 L 488.55 510.60 L 487.92 511.02 L 487.14 511.18 L 272.45 511.18 L 271.67 511.02 L 271.04 510.60 L 270.61 509.97 L 270.45 509.18 L 270.45 387.93 L 270.61 387.15 L 271.04 386.52 L 271.67 386.09 L 272.45 385.93 Z" fill="#8ecec5" fill-rule="nonzero" group-id="3,5,11,13" node-id="97" stroke="none" target-height="125.25" target-width="218.69" target-x="270.45" target-y="385.93"></path><g clip-path="url(#mask-4_3)" group-id="3,5,11,14" node-id="100"><path d="M 407.87 385.93 L 308.22 511.18 L 348.10 511.18 L 447.39 385.93 Z" fill="#c5f2eb" fill-opacity="0.4" fill-rule="nonzero" group-id="3,5,11,14" id="路径-86" node-id="25" stroke="none" target-height="125.25" target-width="139.17001" target-x="308.22" target-y="385.93"></path></g><g clip-path="url(#mask-4_4)" group-id="3,5,11,15" node-id="104"><path d="M 456.06 385.93 L 359.91 511.18 L 378.01 511.18 L 473.23 385.93 Z" fill="#c5f2eb" fill-opacity="0.4" fill-rule="nonzero" group-id="3,5,11,15" id="路径-89" node-id="26" stroke="none" target-height="125.25" target-width="113.32001" target-x="359.91" target-y="385.93"></path></g><path d="M 530.90 385.93 L 666.79 385.93 L 667.60 386.11 L 668.28 386.60 L 776.42 507.85 L 776.83 508.54 L 776.93 509.30 L 776.74 510.03 L 776.26 510.68 L 775.64 511.05 L 774.93 511.18 L 530.90 511.18 L 530.11 511.02 L 529.48 510.60 L 529.06 509.97 L 528.90 509.18 L 528.90 387.93 L 529.06 387.15 L 529.48 386.52 L 530.11 386.09 L 530.90 385.93 Z" fill="#8ecec5" fill-rule="nonzero" group-id="3,5,12,16" node-id="111" stroke="none" target-height="125.25" target-width="248.02997" target-x="528.9" target-y="385.93"></path><g clip-path="url(#mask-6_3)" group-id="3,5,12,17" node-id="114"><path d="M 670.29 385.93 L 570.65 511.18 L 610.52 511.18 L 709.81 385.93 Z" fill="#c5f2eb" fill-opacity="0.4" fill-rule="nonzero" group-id="3,5,12,17" id="路径-86" node-id="31" stroke="none" target-height="125.25" target-width="139.15997" target-x="570.65" target-y="385.93"></path></g><g clip-path="url(#mask-6_4)" group-id="3,5,12,18" node-id="118"><path d="M 718.48 385.93 L 622.34 511.18 L 640.44 511.18 L 735.66 385.93 Z" fill="#c5f2eb" fill-opacity="0.4" fill-rule="nonzero" group-id="3,5,12,18" id="路径-89" node-id="32" stroke="none" target-height="125.25" target-width="113.31995" target-x="622.34" target-y="385.93"></path></g><path d="M 213.79 634.44 L 222.84 634.74 L 231.66 635.57 L 240.26 636.93 L 248.66 638.82 L 256.96 641.23 L 264.98 644.10 L 272.75 647.43 L 280.27 651.21 L 287.56 655.46 L 294.52 660.08 L 301.17 665.11 L 307.51 670.53 L 313.52 676.32 L 319.15 682.43 L 324.40 688.88 L 329.28 695.66 L 333.74 702.73 L 337.75 710.05 L 341.33 717.64 L 344.47 725.53 L 347.10 733.57 L 349.23 741.82 L 350.85 750.29 L 351.96 759.02 L 75.62 759.02 L 76.73 750.29 L 78.35 741.82 L 80.48 733.57 L 83.11 725.53 L 86.25 717.64 L 89.83 710.05 L 93.84 702.73 L 98.30 695.66 L 103.18 688.88 L 108.43 682.43 L 114.06 676.32 L 120.07 670.53 L 126.41 665.11 L 133.06 660.08 L 140.02 655.46 L 147.31 651.21 L 154.83 647.43 L 162.59 644.10 L 170.62 641.23 L 178.92 638.82 L 187.32 636.93 L 195.92 635.57 L 204.74 634.74 L 213.79 634.44 Z" fill="#2c5c6e" fill-rule="evenodd" group-id="3,6" id="形状结合" node-id="34" stroke="none" target-height="124.58002" target-width="276.34" target-x="75.62" target-y="634.44"></path><path d="M 316.18 771.62 L 315.94 778.51 L 315.28 785.21 L 314.23 791.73 L 312.77 798.09 L 310.90 804.30 L 308.02 811.91 L 304.62 819.16 L 300.69 826.08 L 296.23 832.68 L 291.27 838.92 L 285.90 844.72 L 280.10 850.09 L 273.85 855.05 L 267.25 859.52 L 260.34 863.44 L 253.09 866.85 L 245.47 869.73 L 239.26 871.59 L 232.91 873.05 L 226.39 874.11 L 219.69 874.76 L 212.80 875.00 L 205.90 874.76 L 199.20 874.11 L 192.68 873.05 L 186.33 871.59 L 180.12 869.73 L 172.50 866.85 L 165.25 863.44 L 158.34 859.52 L 151.74 855.05 L 145.50 850.09 L 139.69 844.72 L 134.32 838.92 L 129.36 832.68 L 124.90 826.08 L 120.97 819.16 L 117.57 811.91 L 114.69 804.30 L 112.82 798.09 L 111.36 791.73 L 110.31 785.21 L 109.65 778.51 L 109.42 771.62 L 109.65 764.73 L 110.31 758.03 L 111.36 751.51 L 112.82 745.15 L 114.69 738.94 L 117.57 731.33 L 120.97 724.08 L 124.90 717.16 L 129.36 710.57 L 134.32 704.32 L 139.69 698.52 L 145.50 693.15 L 151.74 688.19 L 158.34 683.73 L 165.25 679.80 L 172.50 676.39 L 180.12 673.51 L 186.33 671.65 L 192.68 670.19 L 199.20 669.13 L 205.90 668.48 L 212.80 668.24 L 219.69 668.48 L 226.39 669.13 L 232.91 670.19 L 239.26 671.65 L 245.47 673.51 L 253.09 676.39 L 260.34 679.80 L 267.25 683.73 L 273.85 688.19 L 280.10 693.15 L 285.90 698.52 L 291.27 704.32 L 296.23 710.57 L 300.69 717.16 L 304.62 724.08 L 308.02 731.33 L 310.90 738.94 L 312.77 745.15 L 314.23 751.51 L 315.28 758.03 L 315.94 764.73 L 316.18 771.62 Z" fill="#0d232b" fill-rule="evenodd" group-id="3,6" id="椭圆形" node-id="35" stroke="none" target-height="206.76001" target-width="206.76" target-x="109.42" target-y="668.24"></path><path d="M 266.47 771.62 L 266.18 777.19 L 265.37 782.51 L 264.06 787.61 L 262.25 792.51 L 259.97 797.24 L 257.30 801.65 L 254.23 805.75 L 250.75 809.58 L 246.93 813.05 L 242.82 816.12 L 238.42 818.79 L 233.69 821.08 L 228.79 822.89 L 223.69 824.19 L 218.37 825.00 L 212.80 825.30 L 207.22 825.00 L 201.90 824.19 L 196.80 822.89 L 191.90 821.08 L 187.17 818.79 L 182.77 816.12 L 178.66 813.05 L 174.84 809.58 L 171.36 805.75 L 168.29 801.65 L 165.62 797.24 L 163.34 792.51 L 161.53 787.61 L 160.22 782.51 L 159.42 777.19 L 159.12 771.62 L 159.42 766.05 L 160.22 760.73 L 161.53 755.63 L 163.34 750.73 L 165.62 746.00 L 168.29 741.59 L 171.36 737.49 L 174.84 733.66 L 178.66 730.19 L 182.77 727.12 L 187.17 724.45 L 191.90 722.16 L 196.80 720.36 L 201.90 719.05 L 207.22 718.24 L 212.80 717.94 L 218.37 718.24 L 223.69 719.05 L 228.79 720.36 L 233.69 722.16 L 238.42 724.45 L 242.82 727.12 L 246.93 730.19 L 250.75 733.66 L 254.23 737.49 L 257.30 741.59 L 259.97 746.00 L 262.25 750.73 L 264.06 755.63 L 265.37 760.73 L 266.18 766.05 L 266.47 771.62 Z" fill="#ffffff" fill-rule="evenodd" group-id="3,6" id="椭圆形" node-id="36" stroke="none" target-height="107.359985" target-width="107.350006" target-x="159.12" target-y="717.94"></path><path d="M 810.21 634.22 L 819.26 634.52 L 828.08 635.35 L 836.68 636.71 L 845.08 638.60 L 853.38 641.01 L 861.41 643.88 L 869.17 647.21 L 876.69 650.99 L 883.98 655.23 L 890.94 659.86 L 897.59 664.88 L 903.93 670.31 L 909.94 676.10 L 915.57 682.21 L 920.82 688.66 L 925.70 695.44 L 930.16 702.51 L 934.17 709.83 L 937.75 717.42 L 940.89 725.31 L 943.52 733.35 L 945.65 741.60 L 947.27 750.07 L 948.38 758.79 L 672.04 758.79 L 673.15 750.07 L 674.77 741.60 L 676.90 733.35 L 679.53 725.31 L 682.67 717.42 L 686.25 709.83 L 690.26 702.51 L 694.72 695.44 L 699.60 688.66 L 704.85 682.21 L 710.48 676.10 L 716.49 670.31 L 722.83 664.88 L 729.48 659.86 L 736.44 655.23 L 743.73 650.99 L 751.25 647.21 L 759.02 643.88 L 767.04 641.01 L 775.34 638.60 L 783.74 636.71 L 792.34 635.35 L 801.16 634.52 L 810.21 634.22 Z" fill="#2c5c6e" fill-rule="evenodd" group-id="3,7" id="形状结合" node-id="38" stroke="none" target-height="124.57001" target-width="276.34003" target-x="672.04" target-y="634.22"></path><path d="M 912.60 771.40 L 912.36 778.29 L 911.71 784.99 L 910.65 791.51 L 909.19 797.87 L 907.33 804.08 L 904.44 811.69 L 901.04 818.94 L 897.11 825.86 L 892.65 832.45 L 887.69 838.70 L 882.32 844.50 L 876.52 849.87 L 870.27 854.83 L 863.67 859.29 L 856.76 863.22 L 849.51 866.63 L 841.89 869.51 L 835.68 871.37 L 829.33 872.83 L 822.81 873.89 L 816.11 874.54 L 809.22 874.78 L 802.32 874.54 L 795.63 873.89 L 789.11 872.83 L 782.75 871.37 L 776.54 869.51 L 768.93 866.63 L 761.67 863.22 L 754.76 859.30 L 748.16 854.83 L 741.92 849.87 L 736.12 844.50 L 730.74 838.70 L 725.78 832.45 L 721.32 825.86 L 717.39 818.94 L 713.99 811.69 L 711.11 804.08 L 709.25 797.87 L 707.79 791.51 L 706.73 784.99 L 706.08 778.29 L 705.84 771.40 L 706.08 764.51 L 706.73 757.81 L 707.79 751.29 L 709.25 744.93 L 711.11 738.72 L 713.99 731.11 L 717.39 723.86 L 721.32 716.94 L 725.78 710.34 L 730.74 704.10 L 736.12 698.30 L 741.92 692.93 L 748.16 687.97 L 754.76 683.50 L 761.67 679.58 L 768.93 676.17 L 776.54 673.29 L 782.75 671.43 L 789.11 669.97 L 795.63 668.91 L 802.32 668.26 L 809.22 668.02 L 816.11 668.26 L 822.81 668.91 L 829.33 669.97 L 835.68 671.43 L 841.89 673.29 L 849.51 676.17 L 856.76 679.58 L 863.67 683.50 L 870.27 687.97 L 876.52 692.93 L 882.32 698.30 L 887.69 704.10 L 892.65 710.34 L 897.11 716.94 L 901.04 723.86 L 904.44 731.11 L 907.33 738.72 L 909.19 744.93 L 910.65 751.29 L 911.71 757.81 L 912.36 764.51 L 912.60 771.40 Z" fill="#0d232b" fill-rule="evenodd" group-id="3,7" id="椭圆形" node-id="39" stroke="none" target-height="206.76001" target-width="206.75995" target-x="705.84" target-y="668.02"></path><path d="M 862.89 771.40 L 862.60 776.97 L 861.79 782.29 L 860.48 787.39 L 858.68 792.29 L 856.39 797.02 L 853.72 801.43 L 850.65 805.53 L 847.17 809.36 L 843.35 812.83 L 839.24 815.90 L 834.84 818.57 L 830.11 820.86 L 825.21 822.66 L 820.11 823.97 L 814.79 824.78 L 809.22 825.08 L 803.64 824.78 L 798.32 823.97 L 793.23 822.66 L 788.32 820.86 L 783.60 818.57 L 779.19 815.90 L 775.08 812.83 L 771.26 809.36 L 767.78 805.53 L 764.72 801.43 L 762.04 797.02 L 759.76 792.29 L 757.95 787.39 L 756.64 782.29 L 755.84 776.97 L 755.54 771.40 L 755.84 765.83 L 756.64 760.51 L 757.95 755.41 L 759.76 750.51 L 762.04 745.78 L 764.72 741.37 L 767.78 737.27 L 771.26 733.44 L 775.08 729.97 L 779.19 726.90 L 783.60 724.23 L 788.32 721.94 L 793.23 720.13 L 798.32 718.83 L 803.64 718.02 L 809.22 717.72 L 814.79 718.02 L 820.11 718.83 L 825.21 720.13 L 830.11 721.94 L 834.84 724.23 L 839.24 726.90 L 843.35 729.97 L 847.17 733.44 L 850.65 737.27 L 853.72 741.37 L 856.39 745.78 L 858.68 750.51 L 860.48 755.41 L 861.79 760.51 L 862.60 765.83 L 862.89 771.40 Z" fill="#ffffff" fill-rule="evenodd" group-id="3,7" id="椭圆形" node-id="40" stroke="none" target-height="107.36005" target-width="107.35004" target-x="755.54" target-y="717.72"></path></g></svg>

直接用即可~~~

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jfh0LFeE-1689863224183)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230713225044935.png)]

+++

CSS 三角做法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .box1 {
      width: 0;
      height: 0;
      border-top: 10px solid pink;
      border-right: 10px solid red;
      border-bottom: 10px solid blue;
      border-left: 10px solid green;
    }
    .box2 {
      width: 0;
      height: 0;
      border: 10px solid transparent;
      border-top-color: pink;
      margin: 100px auto;
    }
  </style>
</head>
<body>

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

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

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wC9Srdqf-1689863224183)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230713230813444.png)]

模拟京东三角

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one {
      width: 100px;
      height: 200px;
      position: relative;
      background: lightpink;
      margin: 200px auto;
      border-radius: 5%;
    }
    .one span {
      width: 0;
      height: 0;
      border: 8px solid transparent;
      border-bottom-color: blue;
      position: absolute;
      left: 80px;
      top: -16px;
    }
  </style>
</head>
<body>

<div class="one">
  <span></span>
</div>


</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hBQA2Ix7-1689863224184)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714084229648.png)]

+++

更改鼠标样式

属性值	描述
default	小白默认
pointer	小手
move	移动
text	文本
not-allowed	禁止

<li style="cursor: default">1234564789</li>
<li style="cursor:not-allowed">1234564789</li>

取消表单轮廓和防止文本域拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        input textarea {
            outline: none; /*去除外边框*/
        }
        textarea {
            resize: none; /*不能拖拽改大小*/
        }
    </style>
</head>
<body>
    <input type="text"/>
    <textarea>123465</textarea> <!--不要放到一行-->
</body>
</html>

行内块元素垂直居中

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jLcq87pw-1689863224184)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714154741411.png)]

值	描述
baseline	默认, 元素在父元素基线上
top	顶端对齐
middle	居中对齐
bottom	与最低元素顶端对齐

没加css默认效果

<img src="ldh.jpg">恭喜发财

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ru9ssB1s-1689863224184)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714155217674.png)]

img {
      vertical-align: middle;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iKsngeGm-1689863224185)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714155247789.png)]

+++

文本域和图片一样

<head>
    <meta charset="UTF-8">
    <title>行内块元素垂直对齐</title>
  <style>
      textarea {
          vertical-align: middle;
      }
  </style>
</head>
<body>
  <textarea style="width: 300px;height: 400px"></textarea>123
</body>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xr5QxbPn-1689863224185)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714155840142.png)]

溢出文字显示省略号

单行文字

<div class="one">
    山有木兮木有枝，心悦君兮君不知。____佚名《越人歌》
    人生若只如初见，何事秋风悲画扇。
  </div>
.one {
      width: 150px;
      height: 300px;
      background-color: pink;
      margin: 100px auto;
    
    	/*下面三个条件*/
      white-space: nowrap; /*单行显示*/
      overflow: hidden;  /*溢出隐藏*/
      text-overflow: ellipsis; /*显示省略号*/
    }

多行文字建议后台做, 需要调节高度, 不然会漏出来下方内容, 像下面这样还要减少高度

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-H392aJ29-1689863224186)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714162554842.png)]

<style>
    .one {
      width: 150px;
      height: 50px;
      background-color: pink;
      margin: 100px auto;
      overflow: hidden;
      text-overflow: ellipsis;
      /*弹性伸缩盒子模型显示*/
      display: -webkit-box;
      /*限制在一个块元素显示的文本的行数*/
      -webkit-line-clamp: 2;
      /*设置或检索伸缩盒对象的子元素的排列方式*/
      -webkit-box-orient: vertical;
    }
  </style>

margin 负值运用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w7st2GKv-1689863224186)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714163238443.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Vofy0ENP-1689863224186)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714163619673.png)]

ul li {
            width: 200px;
            height: 300px;
            background-color: pink;
            list-style: none;
            float: left;
            border: 1px solid;
            margin-left: -1px;
        }
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

改造: 鼠标经过,边框变色

ul li:hover {
            border: 1px solid gray;
            margin-left: -1px;
}

文字环绕盒子

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .one {
            width: 300px;
            height: 70px;
            margin: auto;
            background-color: pink;
            padding: 5px;
        }
        .two img {
            width: 100%;
        }
        .two {
            float: left;
            width: 120px;
            height: 60px;
            margin-right: 5px;
        }
    </style>


<div class="one">
    <div class="two">
        <img alt="" src="img.png">
    </div>
    <p>【集锦】热身赛-巴西0-1秘鲁内马尔替补
        两人血染塞场</p>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6d797VY-1689863224187)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714165403683.png)]

行内块元素的巧妙运用

底部页面栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .one {
            text-align: center;
        }
        .one a ,.one input {
            color: #333;
            display: inline-block;
            width: 36px;
            height: 36px;
            background-color: #f7f7f7;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
        }
        .one input {
            outline: none;
        }
    </style>
</head>
<body>

<div class="one">
    <a style="width: 80px" href="#"> << 上一页  </a>
    <a href="#" style="background: white;border: none">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#" style="background: white;border: none">...</a>
    <a style="width: 80px" href="#"> 下一页 >>  </a>
    到第<input type="text"/>页
    <a href="#" style="width: 60px">确定</a>
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zx42LqFp-1689863224187)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714172139887.png)]

CSS 初始化

京东css初始化

/* 把我们所有标签的内外边距清零 */
* {
    margin: 0;
    padding: 0
}
/* em 和 i 斜体的文字不倾斜 */
em,
i {
    font-style: normal
}
/* 去掉li 的小圆点 */
li {
    list-style: none
}

img {
    /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */
    border: 0;
    /* 取消图片底侧有空白缝隙的问题 */
    vertical-align: middle
}

button {
    /* 当我们鼠标经过button 按钮的时候，鼠标变成小手 */
    cursor: pointer
}

a {
    color: #666;
    text-decoration: none
}

a:hover {
    color: #c81623
}

button,
input {
    /* "\5B8B\4F53" 就是宋体的意思 这样浏览器兼容性比较好 */
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif
}

body {
    /* CSS3 抗锯齿形 让文字显示的更加清晰 */
    -webkit-font-smoothing: antialiased;
    background-color: #fff;
    font: 12px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
    color: #666
}

.hide,
.none {
    display: none
}
/* 清除浮动 */
.clearfix:after {
    visibility: hidden;
    clear: both;
    display: block;
    content: ".";
    height: 0
}

.clearfix {
    *zoom: 1
}

HTML 新特性

视频标签

属性	值	描述
autoplay	autoplay	视频就绪自动播放
controls	controls	向用户显示播放控件
width	pixels(像素)	设置播放器宽度
height	pixels(像素)	设置播放器高度
loop	loop	播放完是否继续播放该视频，循环播放
preload	auto (预先加载视频】none (不应加载视频】	规定是否预加载视频（如果有了autoplay就忽略
src	url	视频ur地址
poster	Imgurl	加载等待的画面图片
muted	muted	静音播放

video {
width: 100%;
}

音频

### 新增input表单

input 更多标签类型

<form action="">
        <ul>
            <li>邮箱:<input type="email"></li>
            <li>网址:<input type="url"></li>
            <li>日期:<input type="date"></li>
            <li>日期:<input type="time"></li>
            <li>数量:<input type="number"></li>
            <li>手机号码:<input type="tel"></li>
            <li>搜索:<input type="search"></li>
            <li>颜色:<input type="color"></li>
            <li><input type="submit" value="提交"></li>
        </ul>
</form>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cBVhi8gL-1689863224188)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714220447196.png)]

+++

HTML新增表单属性

属性	值	说明
required	required	表单拥有属性表示内容不为空, 必填
placeholder	提示文本	表单的提示信息, 存在默认值将不显示
autofocus	autofocus	自动聚焦属性, 页面加载完自动聚焦
autocomplete	off / on	用户键入, 浏览器基于之前键入的值, 显示字段中填写默认打开
multiple	multiple	可以多选文件提交

<li><input type="submit" value="提交"></li>

CSS3新特性

新建属性选择器

<li>邮箱:<input type="email" value="123" required></li>

选择上面代码, 下面两个都可

input[value] {
}
input[type=email] {
}

+++

<div class="icon1"></div>
<div class="icon2"></div>
<div class="icon3"></div>
<div class="icon4"></div>

一次选这四个标签

div[class^=icon] {  //icon开头 }
div[class$=icon] {  //icon结尾 }

新增结构伪类选择器

<ul>
   <li>我是1</li>
   <li>我是2</li>
   <li>我是3</li>
   <li>我是4</li>
   <li>我是5</li>
 </ul>

ul li:first-child {
            /*我是1*/
        }
        ul li:last-child {
            /*我是5*/
        }
        ul li:nth-child(3) {
            /*我是3*/
        }

注意上面的 nth-child(n) 可以选择偶数even和奇数odd, n可以是公式数字关键字

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yxIOYA4I-1689863224188)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714224009125.png)]

+++

<section>
            <p>光头</p>
            <div>大哥</div>
            <div>二哥</div>
        </section>

这样的盒子用nth-child无能为力, 用 nth-of-type , 因为标签类型不同

section div:nth-of-type(1) {
            background-color: blue;
        }   /*大哥变蓝*/

nth-child 和 nth-of-type 区别

结构伪类选择器用于选择父级里面第几个孩子
nth-child对父元素里面的所有孩子排序选择, 找到第n个, 然后看看是否和标签匹配
nth-of-type 对父元素里面制定子元素进行排序选择, 先匹配E , 然后根据E 找第n个孩子
无序列表用 nth-child

伪元素选择器

利用css创建新标签元素, 不需要html标签, 简化Html结构

选择符	简介
::before	在元素内部前面插入内容
::after	在元素内部后面插入内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZrJ8x9tf-1689863224189)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714230305009.png)]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    .one {
      width: 400px;
      height: 300px;
      background-color: pink;

    }
    div::before {
      content: '我';
    }
    div::after {
      content: '小猪';
    }

  </style>
</head>
<body>
<div class="one">
是
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-B2ZITj9o-1689863224189)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230714230525291.png)]

伪标签土豆网

.tudou::before {
    content: '';
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.4) url(images/arr.png) no-peat center;
}
.tudou::hover .mask{
    display: block;
}

盒子模型

给一个盒子加margin和border, 盒子会变大

box-sizing: content-box 默认盒子大小 = 宽度+高度+边框

box-sizing: border-box

这样padding不会撑开盒子

写两个div比较一下

.one {
            width: 200px;
            height: 300px;
            background-color: pink;
            margin: auto;
    		margin-bottom: 20px;
            padding: 15px;
            border: 20px solid red;
            box-sizing: border-box;
        }
        .two {
            width: 200px;
            height: 300px;
            background-color: pink;
            margin: auto;
            padding: 15px;
            border: 20px solid red;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DBJv9Nr2-1689863224190)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230717092458230.png)]

通用模板要加一句

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

+++

CSS3 过渡

谁做过渡给谁加 transition

div {
      width: 300px;
      height: 100px;
      background-color: pink;
      transition: width .5s;
    }
div:hover {
      width: 600px;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dzgBPdzQ-1689863224190)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/123.gif)]

给所有属性都做动画

直接改成 all即可

div {
      width: 300px;
      height: 100px;
      background-color: pink;
      transition: all .5s;
    }
    div:hover {
      width: 600px;
      height: 500px;
      background-color: deepskyblue;
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eY7eFVLB-1689863224191)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/%E5%8A%A8%E7%94%BB.gif)]

+++

进度条练习

.one {
            width: 300px;
            height: 10px;
            border: solid black 1px;
            border-radius: 7px;
            padding: 1px;
        }
        .two {
            width: 50%;
            height: 100%;
            background-color: red;
            border-radius: 7px;
            transition: all .7s;
        }
        .two:hover {
            width: 100%;
        }
<div class="one">
        <div class="two">

        </div>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AmLVdZKZ-1689863224191)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/456.gif)]

品优购项目

TDK 三大标签 SEO 优化

SEO [搜索引擎优化] 一种利用搜索引擎规则提高网站有关搜索引擎自然排名方式

SEO 目的是对网站深度优化, 帮助网站获取免费流量, 在搜索引擎提升网站的知名度

TDK title description keywords

网站名（产品名）-网站的介绍
</title>
    <!-- 网站说明 -->
    <meta name="description"
        content="品优购商城-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 关键字 -->
    <meta name="keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东" />

2D 转换

位移 translate 旋转 rotate 缩放 scale

transform: translate(30px, 30px);

二维坐标系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1JjJpVl-1689863224191)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718170456369.png)]

盒子移动不会影响其他盒子

.a  {
            width: 500px;
            height: 500px;
            background-color: pink;
            transform: translate(30px, 30px);
        }
.b {
            width: 500px;
            height: 500px;
            background-color: red;
}
<div class="a"></div>
<div class="b"></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dajJ8PdE-1689863224192)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718172239839.png)]

+++

2D & 定位实现垂直居中

2D 对行内元素无效

子绝父相 + transform

div {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: pink;
        }
        p {
            width: 200px;
            height: 200px;
            background-color: red;
            left: 50%;
            top: 50%;
            position: absolute;
            transform: translate(-50%, -50%);
        }
<div>
    <p></p>
</div>

旋转

transform:rotate(45deg)

鼠标经过图片, 转一圈, 延时

div {
            background: url("123.jpg");
            width: 413px;
            height: 376px;
            transition: .7s;
}
div:hover {
            transform: rotate(360deg);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-d9J3Gwq3-1689863224192)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/888999.gif)]

三角形案例

不用图标自己实现三角效果

div {
            position: relative;
            width: 300px;
            height: 50px;
            border: 1px black solid;
}
div::after {
            content: "";
            position: absolute;
            top: 3px;
            right: 16px;
            width: 30px;
            height: 30px;
            border-top: 1px black solid;
            border-right: 1px black solid;
            transform: rotate(133deg);
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q0S7jUBr-1689863224193)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718194650851.png)]

设置转换中心点

transform-origin: left bottom; 左下角做转轴

div {
            background: url("123.jpg");
            width: 413px;
            height: 376px;
            transition: all .7s;
            margin: 200px 200px;
        }
        div:hover {
            transform: rotate(360deg);
            transform-origin: left bottom;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MckunD5R-1689863224193)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/87875.gif)]

+++

案例鼠标悬浮显示内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 413px;
            height: 376px;
            background-color: pink;
            transition: all .7s;
            margin: 10px;
            float: left;
            overflow: hidden;
        }
        div:hover::before {
            transform: rotate(360deg);
        }
        div::before {
            content: "";
            width: 100%;
            height: 100%;
            display: block;
            transition: all .7s;
            background: url("123.jpg");
            transform: rotate(180deg);
            transform-origin: bottom left;
        }

    </style>
</head>
<body>
<div>
    转圈圈
</div>
<div>
    转圈圈
</div>
<div>
    转圈圈
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-75n0FuXa-1689863224194)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/88585.gif)]

+++

缩放

transform: scale(.5);

不影响其他盒子, 并且可以设置缩放中心点

div {
            width: 413px;
            height: 376px;
            background: url("123.jpg") no-repeat;
            transition: all .7s;
            margin: 300px auto;
        }
        div:hover {
            transform: scale(.5); /*缩小一半*/
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VadhKBjr-1689863224194)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/56595.gif)]

+++

缩放图片案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 413px;
            height: 376px;
            margin: 300px auto;
            overflow: hidden;
        }
        div a img {
            transition: all .9s;
        }
        div a img:hover {
            transform: scale(1.2); /*放大1.2倍*/
        }
    </style>
</head>
<body>
<div>
    <a href="#">
        <img src="123.jpg" alt="#">
    </a>
</div>

</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0dSdRcCo-1689863224194)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/9652641.gif)]

复合写法

tranform: translate(50px, 50px) rotate(180deg)

注意顺序, 先位移后旋转

动画

先定义, 再调用

0% { transform: translateX(0); }

100% { transform: translateX(1000px) }

0 和 100 可以换成 from to

animation-name: move; /调用动画/
animation-duration: 5s; /持续时间/

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 413px;
            height: 376px;
            animation-name: move;  /*调用动画*/
            animation-duration: 5s; /*持续时间*/
        }
        @keyframes move {
            /*开始状态*/
            0% {
                transform: translateX(0);
            }
            /*结束状态*/
            100% {
                transform: translateX(1000px);
            }
        }
    </style>
</head>
<body>
<div>
    <a href="#">
        <img src="123.jpg" alt="#">
    </a>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s5bzDaWX-1689863224195)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/54624151411.gif)]

设置多个状态

百分比是对总时间的划分

@keyframes move {
            0% {
                transform: translateX(0);
            }
            25% {
                transform: translateX(1000px);
            }
            50% {
                transform: translateX(1000px) translateY(1000px);
            }
            75% {
                transform: translateY(1000px);
            }
            100% {
                transform: translateX(0);
  }
}

<a href="#">
        <img src="123.jpg" alt="#">
</a>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0Mv0ogL8-1689863224196)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/123785.gif)]

+++

动画常用属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5MLU6OxS-1689863224196)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718221521188.png)]

animation-iteration-count: infinite; /无限循环/

黑塔就会一直动

补充一个打字机效果

animation: w 4s steps(5) forwords

动画简写

上面的代码简写成一行 => animation: move 5s infinite;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BIjAoHnd-1689863224196)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230718222047657.png)]

+++

3D 转换

transform: translate3d(100px, 100px, 100px);

3D 坐标系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-avdcrWN3-1689863224197)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719083704505.png)]

透视 perspective

透视写在被观察元素父盒子上, 透视越小, 看到的图像越大

div {
            width: 500px;
            height: 500px;
            background-color: pink;
            transform: translate3d(400px, 100px, 100px);
        }
        body {
            perspective: 500px;
        }

透视固定的情况下, 改变 z 轴, 呈现正比缩放

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GjtfIOGn-1689863224197)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/454541.gif)]

+++

3D 旋转

div {
            width: 413px;
            height: 376px;
            background: url("123.jpg");
            transition: all .9s;
        }
         div:hover {
            transform: rotateY(180deg);
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Q9gaHtua-1689863224197)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/525234.gif)]

加透视 [增加立体感] 旋转

body {
            perspective: 500px;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bis6lnrQ-1689863224198)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/525236.gif)]

3D 呈现

transform-style: preserve-3d;

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 400px;
            height: 400px;
            margin: 100px auto;
            transform-style: preserve-3d;
            transition: all 1s;
        }
        .box div {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: green;
            margin: 100px auto;
        }
        .box div:last-child {
            background-color: blue;transform: rotateX(60deg);
        }
        .box:hover {
            transform: rotateY(60deg);
        }
        body {
            perspective: 500px;
        }
    </style>
</head>
<body>
    <div class="box">
       <div></div>
       <div></div>
    </div>


</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v6TBpx6S-1689863224198)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/8574d.gif)]

+++

移动端视口

<meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<!--上面代码的意思是 适配移动端-->

视口宽度和设备保持致
视口的默认缩微比例1.0
不允许用户自行缩放
最大允许的缩放比例1.0
最小允许的缩放比例1.0

物理像素 & 物理像素比

属性	电脑	手机
物理像素	1px = 1 物理像素	不一定
物理像素比	1	px/物理像素=物理像素比

二倍图

我们准备的图片到手机端会变模糊, 这里需要准备比原来页面图片大小2倍的图,然后在页面中css 把这个图片缩小一半

背景缩放

div {
        width: 300px;
        height: 400px;
        background: url("123.jpg") no-repeat;
        background-color: pink;
        margin: 100px auto;
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wx0JfEwb-1689863224199)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719112941874.png)]

+++

加一个 cover: 把背景图像扩展到足够大, 使背景图像完全覆盖背景区域

div {
        width: 300px;
        height: 400px;
        background: url("123.jpg") no-repeat;
        background-color: pink;
        background-size: cover;
        margin: 100px auto;
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZZZdd5k-1689863224199)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719113026740.png)]

+++

加一个 contain: 把背景图像扩展到最大尺寸, 使宽度和高度适应内容区域

div {
        width: 300px;
        height: 400px;
        background: url("123.jpg") no-repeat;
        background-color: pink;
        background-size: contain;
        margin: 100px auto;
      }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nyGT1iQM-1689863224199)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719113110476.png)]

+++

CSS 初始化

normalize.css/

+++

CSS3 盒子模型

box-sizeing: border-box;
内边距和边框不会撑大盒子

移动端可以全部CSS3盒子模型
PC端如果完全需要兼容，我们就用传统模式，如果不考虑兼容性，我们就选择CSS3盒子模型

特殊样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-dBoJ8hs5-1689863224200)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719115212287.png)]

移动端布局

单独制作移动端页面

流式布局

百分比布局, 非固定像素布局

通过盒子的宽度设置百分比根据屏幕宽度进行伸缩, 不受固定像素的限制, 内容向两侧填充

section {
      margin: 0;
      padding: 0;
      width: 100%;
    }
    section div {
      float: left;
      width: 50%;
      height: 400px;
    }
    section div:nth-child(1) {
      background-color: pink;
    }
    section div:nth-child(2) {
      background-color: purple;
    }
<section>
  <div></div>
  <div></div>
</section>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Xhz1LwaD-1689863224200)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/85rggb.gif)]

加一个宽度限制

section {
      margin: 0;
      padding: 0;
      width: 100%;
      max-width: 980px;
      min-width: 240px;
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ijaeSh6P-1689863224201)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/fgerswgvrb.gif)]

+++

京东移动端 - 流式布局

fuguangjian0/pink-JD: 黑马pink 京东移动端流式布局项目(百分比布局) (github.com)

flex布局

原理 => 通过给父盒子添加flex属性, 控制子盒子位置和排列方式

PC端用传统布局

移动端使用flex弹性布局

设置主轴方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CMXRRgsk-1689863224201)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719201826928.png)]

+++

主轴和侧轴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZMOH6Xpu-1689863224201)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719201955631.png)]

+++

flex-direction设置主轴方向

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-84IWX0Ea-1689863224202)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719202352178.png)]

元素根据主轴来排列

div {
            /*给父亲添加flex元素*/
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
        }
        div span {
            width: 150px;
            height: 100px;
            background-color: purple;
        }

<div><span>1</span><span>2</span><span>3</span></div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W1CytDVZ-1689863224202)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719202732791.png)]

+++

div {
            /*给父亲添加flex元素*/
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            flex-direction: column;/*设置y为主轴, x变侧轴*/
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MGAbGr30-1689863224203)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719203126370.png)]

主轴子元素排列方式

justify-content 定义对齐方式, 需要确定主轴

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Mc7Zero2-1689863224203)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719203415542.png)]

+++

演示一个重要的

justify-content: space-between;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tAdPLdb9-1689863224204)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719203740641.png)]

+++

子元素换行

flex-wrap 默认不换行, 弹性伸缩到一行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u7raZRNh-1689863224204)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719204215272.png)]

+++

侧轴子元素排列方式单行

align-items 设置侧轴子元素对齐方式

用于单行元素

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DyteRnhX-1689863224205)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719204449158.png)]

+++

 div {
            /*给父亲添加flex元素*/
            display: flex;
            width: 800px;
            height: 300px;
            background-color: pink;
            justify-content: center;
            align-items: center;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BasuMhF7-1689863224205)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719204558303.png)]

侧轴子元素排列方式多行

align-content

注意必须换行: flex-wrap : wrap

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pYMpAKz6-1689863224206)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230719205319359.png)]

+++

解决圣杯布局

左右固定, 中间自适应

在flex里面一行搞定

div {
            display: flex;
            width: 60%;
            height: 150px;
            margin: 0 auto;
        }
        .a {
            width: 100px;
            height: 100%;
            background-color: green;
        }
        .b {
            flex: 1;
            background-color: pink;
        }
        .c {
            width: 100px;
            height: 100%;
            background-color: red;
        }
<div>
        <span class="a"></span>
        <span class="b"></span>
        <span class="c"></span>
    </div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-e9i4tAUx-1689863224206)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/898.gif)]

+++

携程旅游 - flex布局

fuguangjian0/xiecheng-flex: 黑马pink携程旅游flex布局 (github.com)

+++

rem 适配布局

rem的优点是通过修改html里面的文字大小来改变页面元素大小

em 相对于父元素的字体大小来说的

html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
        }
        p {
            width: 10em;
            height: 10em;
            background-color: pink;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-6govpZLl-1689863224207)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720095309869.png)]

html {
            font-size: 14px;
        }
        div {
            font-size: 12px;
        }
        p {
            width: 10rem;
            height: 10rem;
            background-color: pink;
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k5Rs393B-1689863224207)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720095352266.png)]

+++

媒体查询

针对不同屏幕尺寸设置不同样式

/*在宽度500px以下, 蓝色, 800px以下, 粉色*/
        @media screen and (max-width: 800px){
            body {
                background-color: pink;
            }
        }
        @media screen and (max-width: 500px){
            body {
                background-color: blue;
            }
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hqMtbxNn-1689863224208)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/52rf.gif)]

+++

根据屏幕不同宽度变色

@media screen and (max-width: 300px){
            body {
                background: url("th.jpg") 0 0 no-repeat;
                background-size: cover;
            }
        }
        @media screen and (min-width: 301px) and (max-width: 500px){
            body {
                background: url("th2.jpg") 0 0 no-repeat;
                background-size: cover;
            }
        }
        @media screen and (min-width: 501px){
            body {
                background: url("th.jpg") 0 0 no-repeat;
                background-size: cover;
            }
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ezEvcexB-1689863224209)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/84454few.gif)]

+++

不同宽度,行高和字号大小改变

@media screen  and (min-width: 320px){
            html {
                font-size: 50px;
            }
        }
        @media screen  and (min-width: 540px){
            html {
                font-size: 100px;
            }
        }
        div {
            height: 1rem;
            font-size: 0.5rem;
            background-color: green;
            text-align: center;
            line-height: 1rem;
        }
<div>
    购物车
</div>

+++

媒体查询引入css

引入资源就是针对不同的屏幕尺寸, 调用不同的css文件

<link rel="stylesheet"href="style320.css"media="screen and
d (min-width:320px)">

<link rel="stylesheet"href="style640.css"media="screen and (min-width:640px)">

Less 基础

css有很多弊端, 不适合非前端开发工程师快速上手

Less 是CSS预处理语言

Less 变量

@表达式, 键值对替换

@font14: 14px;
@color: red;

body {
  background-color: @color;
}
div {
  font-size: @font14;
}

Less 编译

自动转换css文件, 名字一样, 后缀改变

Less 嵌套

子元素样式直接写进父元素里面就好了

p {
  background-color: @color;
  a {
    background-color: #fff;
  }
}

转换后 =>

p a {
  background-color: #fff;
}

用到冒号的元素前面加 &

a {
    background-color: #fff;
    &:hover {
      color: #006b00;
    }
  }

转换后 =>

p a:hover {
  color: #006b00;
}

Less 运算

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ypIrUGlb-1689863224209)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720142619303.png)]

+++

@font14: 14px + 888;

转换css =>

div {
  font-size: 902px;
}

苏宁易购 rem

fuguangjian0/suningyigou-rem: 苏宁易购移动端学习 less+媒体查询+rem (github.com)

+++

响应式布局

随着页面伸缩盒子宽度改变

.container {
      height: 150px;
      background-color: pink;
      margin: 0 auto;
    }
    @media screen and (max-width: 767px) {
      .container {
        width: 100%;
      }
    }
    @media screen and (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
    @media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
    }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YFwqIJPt-1689863224210)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/%E4%B8%A2%E8%80%B3%E9%97%BB.gif)]

+++

响应式案例

宽度改变, 盒子长度改变

.container {
        height: 750px;
        margin: 0 auto;
    }
    ul {
        list-style: none;
    }
    .container ul li {
        float: left;
        width: 93.75px;
        height: 30px;
        background-color: green;
    }
    @media screen and (max-width: 767px) {
        .container {
            width: 100%;
        }
        .container ul li {
            width: 33%;
        }
    }

<div class="container">
      <ul>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
      </ul>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W7DC58dT-1689863224210)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/%E5%87%A1%E5%B0%94%E8%B5%9B%E7%BF%81%E4%B8%BB%E5%8C%97%E8%8D%A3%E8%B9%A6.gif)]

+++

Bootstrap 4 框架使用

框架是一套架构, 完整的网页功能解决方案, 控制权在框架本身, 有预制样式库, 组件和插件, 使用者按照框架规定的规范开发

文件夹结构

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bTPFHTbB-1689863224210)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720210314420.png)]

+++

栅格系统

把屏幕划分成12等份

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sUB4uEuX-1689863224211)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720213244862.png)]

首先引入css文件

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

把页面分成横向的4份, 类似flex布局

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NETSaSS5-1689863224211)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720213215646.png)]

+++

如果份数总和小于 12 , 则占不满页面

<style>
        [class^="col"] {
            border: solid 1px gray;
        }
    </style>

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <div class="row">
        <div class="col-lg-2">1</div>
        <div class="col-lg-5">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <div class="row">
        <div class="col-lg-1">1</div>
        <div class="col-lg-5">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VZHrZNpc-1689863224212)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720213733164.png)]

+++

列嵌套

刚才里面的盒子再进行划分, 注意先加一个 .row 盒子取消外盒子 padding, 正常分即可

    <style>
        .row>div {
            height: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="row">
                <div class="col-lg-6" style="background-color: blue;">5</div>
                <div class="col-lg-6" style="background-color: red;">6</div>
            </div>
        </div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>


</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2XkXabtt-1689863224212)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720215433731.png)]

+++

列偏移

让两个盒子靠左右两边, 用列偏移来做

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 offset-4">2</div>
    </div>
</div>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Eczy2kvo-1689863224213)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720220355060.png)]

+++

响应式工具

不同屏幕不同效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F8NnWRun-1689863224213)(https://imgfff-1313020458.cos.ap-shanghai.myqcloud.com/images/image-20230720221704219.png)]

+++

vw / vh

相对单位

相对视口的尺寸设置网页元素尺寸

1vw = 1/100视口宽度

1vh = 1/100视口高度

width: 10vw;
height: 10vh;

-size: cover;
}
}
@media screen and (min-width: 501px){
body {
background: url(“th.jpg”) 0 0 no-repeat;
background-size: cover;
}
}


[外链图片转存中...(img-ezEvcexB-1689863224209)]





+++

### 不同宽度,行高和字号大小改变

```css
@media screen  and (min-width: 320px){
            html {
                font-size: 50px;
            }
        }
        @media screen  and (min-width: 540px){
            html {
                font-size: 100px;
            }
        }
        div {
            height: 1rem;
            font-size: 0.5rem;
            background-color: green;
            text-align: center;
            line-height: 1rem;
        }
<div>
    购物车
</div>

+++

媒体查询引入css

引入资源就是针对不同的屏幕尺寸, 调用不同的css文件

<link rel="stylesheet"href="style320.css"media="screen and
d (min-width:320px)">

<link rel="stylesheet"href="style640.css"media="screen and (min-width:640px)">

Less 基础

css有很多弊端, 不适合非前端开发工程师快速上手

Less 是CSS预处理语言

Less 变量

@表达式, 键值对替换

@font14: 14px;
@color: red;

body {
  background-color: @color;
}
div {
  font-size: @font14;
}

Less 编译

自动转换css文件, 名字一样, 后缀改变

Less 嵌套

子元素样式直接写进父元素里面就好了

p {
  background-color: @color;
  a {
    background-color: #fff;
  }
}

转换后 =>

p a {
  background-color: #fff;
}

用到冒号的元素前面加 &

a {
    background-color: #fff;
    &:hover {
      color: #006b00;
    }
  }

转换后 =>

p a:hover {
  color: #006b00;
}

Less 运算

[外链图片转存中…(img-ypIrUGlb-1689863224209)]

+++

@font14: 14px + 888;

转换css =>

div {
  font-size: 902px;
}

苏宁易购 rem

fuguangjian0/suningyigou-rem: 苏宁易购移动端学习 less+媒体查询+rem (github.com)

+++

响应式布局

随着页面伸缩盒子宽度改变

.container {
      height: 150px;
      background-color: pink;
      margin: 0 auto;
    }
    @media screen and (max-width: 767px) {
      .container {
        width: 100%;
      }
    }
    @media screen and (min-width: 768px) {
      .container {
        width: 750px;
      }
    }
    @media screen and (min-width: 992px) {
      .container {
        width: 970px;
      }
    }

[外链图片转存中…(img-YFwqIJPt-1689863224210)]

+++

响应式案例

宽度改变, 盒子长度改变

.container {
        height: 750px;
        margin: 0 auto;
    }
    ul {
        list-style: none;
    }
    .container ul li {
        float: left;
        width: 93.75px;
        height: 30px;
        background-color: green;
    }
    @media screen and (max-width: 767px) {
        .container {
            width: 100%;
        }
        .container ul li {
            width: 33%;
        }
    }

<div class="container">
      <ul>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
          <li>导航栏</li>
      </ul>
</div>

[外链图片转存中…(img-W7DC58dT-1689863224210)]

+++

Bootstrap 4 框架使用

框架是一套架构, 完整的网页功能解决方案, 控制权在框架本身, 有预制样式库, 组件和插件, 使用者按照框架规定的规范开发

文件夹结构

[外链图片转存中…(img-bTPFHTbB-1689863224210)]

+++

栅格系统

把屏幕划分成12等份

[外链图片转存中…(img-sUB4uEuX-1689863224211)]

首先引入css文件

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">

把页面分成横向的4份, 类似flex布局

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>

[外链图片转存中…(img-NETSaSS5-1689863224211)]

+++

如果份数总和小于 12 , 则占不满页面

<style>
        [class^="col"] {
            border: solid 1px gray;
        }
    </style>

<div class="container">
    <div class="row">
        <div class="col-lg-3">1</div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <div class="row">
        <div class="col-lg-2">1</div>
        <div class="col-lg-5">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>
    <div class="row">
        <div class="col-lg-1">1</div>
        <div class="col-lg-5">2</div>
        <div class="col-lg-2">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>

[外链图片转存中…(img-VZHrZNpc-1689863224212)]

+++

列嵌套

刚才里面的盒子再进行划分, 注意先加一个 .row 盒子取消外盒子 padding, 正常分即可

    <style>
        .row>div {
            height: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-lg-3">
            <div class="row">
                <div class="col-lg-6" style="background-color: blue;">5</div>
                <div class="col-lg-6" style="background-color: red;">6</div>
            </div>
        </div>
        <div class="col-lg-3">2</div>
        <div class="col-lg-3">3</div>
        <div class="col-lg-3">4</div>
    </div>
</div>


</body>
</html>

[外链图片转存中…(img-2XkXabtt-1689863224212)]

+++

列偏移

让两个盒子靠左右两边, 用列偏移来做

<div class="container">
    <div class="row">
        <div class="col-md-4">1</div>
        <div class="col-md-4 offset-4">2</div>
    </div>
</div>

[外链图片转存中…(img-Eczy2kvo-1689863224213)]

+++

响应式工具

不同屏幕不同效果

[外链图片转存中…(img-F8NnWRun-1689863224213)]

+++

vw / vh

相对单位

相对视口的尺寸设置网页元素尺寸

1vw = 1/100视口宽度

1vh = 1/100视口高度

width: 10vw;
height: 10vh;