前端-CSS-day3
目录
1、结构伪类选择器-基本使用
2、结构伪类选择器-公式用法
3、伪元素选择器
4、盒子模型-组成
5、盒子模型-边框线
6、盒子模型-单方向边框线
7、盒子模型-内边距
8、盒子模型-内边距-多值写法
9、盒子模型-尺寸计算
10、盒子模型-版心居中
11、清除默认样式
12、元素溢出
13、外边距-合并现象
14、外边距-塌陷问题
15、行内元素的垂直内外边距
16、圆角-基本使用
17、圆角-特殊场景
18、扩展-盒子阴影
19、综合案例1-产品卡片
20、综合案例2-新闻列表
1、结构伪类选择器-基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器-基本使用</title><style>/* 第一个 */li:first-child {background-color: green;}/* 最后一个 */li:last-child {background-color: yellow;}/* 任意一个 */li:nth-child(4) {background-color: red;}</style>
</head>
<body><ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li><li>li 6</li><li>li 7</li><li>li 8</li></ul>
</body>
</html>2、结构伪类选择器-公式用法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>结构伪类选择器-公式用法</title><style>/* 偶数 *//* li:nth-child(2n) {background-color: green;} *//* 奇数 *//* li:nth-child(2n+1) {background-color: yellow;} *//* 倍数 *//* li:nth-child(5n) {background-color: green;} *//* n 从0开始 *//* 第5个以后的标签，含有5 *//* li:nth-child(n+5) {background-color: green;} *//* 第5个以前的标签，含有5 */li:nth-child(-n+5) {background-color: yellow;}</style>
</head>
<body><ul><li>li 1</li><li>li 2</li><li>li 3</li><li>li 4</li><li>li 5</li><li>li 6</li><li>li 7</li><li>li 8</li><li>li 9</li><li>li 10</li></ul>
</body>
</html>3、伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>伪元素选择器</title><style>div {width: 300px;height: 300px;background-color: pink;}div::before {content: "老鼠";width: 100px;height: 100px;background-color: brown;display: block;}/* 必须设置 content 属性，没有 content，伪元素选择器不生效 */div::after {content: "大米";width: 100px;height: 100px;background-color: orange;display: inline-block;}</style>
</head>
<body><!-- 标签内容：老鼠爱大米 --><div>爱</div>
</body>
</html>4、盒子模型-组成
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-组成</title><style>div {width: 200px;height: 200px;background-color: pink;/* 内边距：内容与盒子边缘之间的距离 */padding: 20px;/* 边框线 */border: 1px solid #000;/* 外边距：出现在盒子外面，拉开两个盒子之间的距离 */margin: 50px;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>5、盒子模型-边框线
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-边框线</title><style>div {width: 200px;height: 200px;background-color: pink;/* 实线 *//* border: 1px solid #000; *//* 虚线 *//* border: 2px dashed red; *//* 点线 */border: 3px dotted green;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>6、盒子模型-单方向边框线
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-单方向边框线</title><style>div {width: 200px;height: 200px;background-color: pink;border-top: 1px solid #000;border-right: 2px dashed red;border-bottom: 5px dotted green;border-left: 10px solid orange;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>7、盒子模型-内边距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-内边距</title><style>div {width: 200px;height: 200px;background-color: pink;/* padding: 20px; */padding-top: 10px;padding-right: 20px;padding-bottom: 40px;padding-left: 80px;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>8、盒子模型-内边距-多值写法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-padding多值写法</title><style>div {width: 200px;height: 200px;background-color: pink;/* 四值：上 右 下 左 *//* padding: 10px 20px 40px 80px; *//* 三值：上 左右 下 */padding: 10px 40px 80px;/* 两值：上下 左右 */padding: 10px 80px;/* 记忆方法：从上开始顺时针转一圈，如果当前方向没有数值，取值跟对面一样 */}</style>
</head>
<body><div>div 标签</div>
</body>
</html>9、盒子模型-尺寸计算
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-尺寸计算</title><style>div {width: 200px;height: 200px;/* 手动减法 *//* width: 160px;height: 160px; */background-color: pink;padding: 20px;/* 内减模式：不需要手动减法，加padding和border不会撑大盒子 */box-sizing: border-box;}</style>
</head>
<body><div>div 标签</div>
</body>
</html>10、盒子模型-版心居中
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子模型-版心居中</title><style>div {/* 版心居中要求：盒子要有宽度 */width: 1000px;height: 200px;background-color: pink;/* 外边距不会撑大盒子 *//* margin: 50px; *//* margin-left: 100px; *//* margin: 50px 100px; *//* 设置版心居中 */margin: 0 auto;}</style>
</head>
<body><div>版心内容</div>
</body>
</html>11、清除默认样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除默认样式</title><style>/* 清除默认样式 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 去掉列表的项目符号 */li {list-style: none;}</style>
</head>
<body><h1>标题</h1><p>ppppppp</p><ul><li>li</li></ul>
</body>
</html>12、元素溢出
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>元素溢出</title><style>div {width: 200px;height: 200px;background-color: pink;overflow: hidden;/* overflow: scroll; *//* overflow: auto; */}</style>
</head>
<body><div>文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试文字内容测试</div>
</body>
</html>13、外边距-合并现象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距合并现象</title><style>.one {width: 100px;height: 100px;background-color: brown;margin-bottom: 80px;}.two {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
</head>
<body><div class="one">one</div><div class="two">two</div>
</body>
</html>14、外边距-塌陷问题
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外边距-塌陷问题</title><style>.father {width: 300px;height: 300px;background-color: pink;padding-top: 50px;box-sizing: border-box;/* 溢出隐藏 *//* overflow: hidden; *//* border-top: 1px solid #000; */}.son {width: 100px;height: 100px;background-color: orange;/* margin-top: 50px; */}</style>
</head>
<body><div class="father"><div class="son">son</div></div>
</body>
</html>15、行内元素的垂直内外边距
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>行内元素的垂直内外边距</title><style>span {/* margin 和 padding 属性，无法改变垂直位置 */margin: 50px;padding: 20px;/* 行高可以改变垂直位置 */line-height: 100px;}</style>
</head>
<body><span>span标签</span><span>span标签</span>
</body>
</html>16、圆角-基本使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角-基本使用</title><style>div {margin: 50px auto;width: 200px;height: 200px;background-color: orange;/* border-radius: 20px; *//* 记忆：从左上角顺时针赋值，没有取值的角与对角取值相同 *//* 四值：左上 右上 右下 左下 *//* border-radius: 10px 20px 40px 80px; *//* 三值：左上 右上+左下 右下 */border-radius: 10px 40px 80px;/* 两值：左上+右下 右上+左下 */border-radius: 10px 80px;} </style>
</head>
<body><div></div>
</body>
</html>17、圆角-特殊场景
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圆角-特殊场景</title><style>img {width: 200px;height: 200px;/* border-radius: 100px; *//* 最大值是50%，超过50%没有效果 */border-radius: 50%;}div {width: 200px;height: 80px;background-color: orange;border-radius: 40px;}</style>
</head>
<body><!-- 正圆形 头像 --><img src="./images/1.jpg" alt=""><!-- 胶囊状 --><div></div>
</body>
</html>18、扩展-盒子阴影
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒子阴影</title><style>div {margin: 50px auto;width: 200px;height: 80px;background-color: orange;box-shadow: 10px 15px 10px 1px rgba(0,0,0,0.5) inset;}</style>
</head>
<body><div></div>
</body>
</html>19、综合案例1-产品卡片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品卡片</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {background-color: #f1f1f1;}.product {margin: 50px auto;padding: 40px;width: 270px;height: 253px;background-color: #fff;text-align: center;border-radius: 10px;}.product h4 {margin-top: 20px;margin-bottom: 12px;font-size: 18px;color: #333;font-weight: 400;}.product p {font-size: 12px;color: #555;}</style>
</head>
<body><div class="product"><img src="./images/liveSDK.svg" alt=""><h4>抖音直播SDK</h4><p>包含抖音直播看播功能</p></div>
</body>
</html>20、综合案例2-新闻列表
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>新闻列表</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}.news {margin: 100px auto;width: 360px;height: 200px;/* background-color: pink; */}.news .hd {height: 34px;background-color: #eee;border: 1px solid #dbdee1;border-left: 0;}.news .hd a {margin-top: -1px;display: block;border-top: 3px solid #ff8400;border-right: 1px solid #dbdee1;width: 48px;height: 34px;background-color: #fff;text-align: center;line-height: 32px;font-size: 14px;color: #333;}.news .bd {padding: 5px;}.news .bd li {padding-left: 15px;background-image: url(./images/square.png);background-repeat: no-repeat;background-position: 0 center;}.news .bd li a{padding-left: 20px;background: url(./images/img.gif) no-repeat 0 center;font-size: 12px;color: #666;line-height: 24px;}.news .bd li a:hover {color: #ff8400;}</style>
</head>
<body><!-- 新闻区域 包含 标题+内容 --><div class="news"><div class="hd"><a href="#">新闻</a></div><div class="bd"><ul><li><a href="#">点赞“新农人” 温暖的伸手</a></li><li><a href="#">在希望的田野上...</a></li><li><a href="#">“中国天眼”又有新发现 已在《自然》杂志发表</a></li><li><a href="#">急！这个领域，缺人！月薪4万元还不好招！啥情况？</a></li><li><a href="#">G9“带货”背后：亏损面持续扩大，竞争环境激烈</a></li><li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li></ul></div></div>
</body>
</html>