回顾 1
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS66</title>
<style>
/* 选择器 */
/* h4 {
color: red;
}
.classSelector {
color: blue;
}
#idSelector {
color: green;
} */
/* 类选择器分配样式 */
/* .purple {
color: purple;
}
.pink {
color: pink;
}
.red {
color: red;
} */
/* 布局 */
.inline {
display: inline;
}
.block {
display: block;
background-color: pink;
width: 400px;
height: 100px;
}
.inline-block {
display: inline-block;
width: 260px;
}
.none {
display: none;
}
</style>
</head>
<body>
<!-- 选择器 -->
<!-- <h4>元素选择器</h4>
<p class="classSelector">类选择器</p>
<p id="idSelector">id选择器</p> -->
<!-- 类选择器分配样式 -->
<!-- <p class="purple">我希望这段文字是紫色的</p>
<p class="pink">我希望这段文字是粉红的</p>
<p class="red">我希望这段文字是红色的</p> -->
<!-- 布局 -->
<div>我独占一行</div>
<div>我独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<div class="inline">我被取消了独占一行</div>
<hr>
<span>我不独占一行</span>
<span>我不独占一行</span>
<span class="block">我被执行了独占一行</span>
<span class="block">我被执行了独占一行</span>
<span class="block">我被执行了独占一行</span>
<span class="block">我被执行了独占一行</span>
<hr>
<div class="inline-block">我不独占一行，且可以调节宽高</div>
<div class="inline-block">我不独占一行，且可以调节宽高</div>
<hr>
<div class="none">你看不到我</div>
<hr>
<div class="flex">
<div class="item">项目</div>
<div class="item">项目</div>
<div class="item">项目</div>
</div>
</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>Document</title>
<style>
* {
margin: 0;
padding: 0;
/* 盒子尺寸计算：以边框为盒子尺寸计算依据（针对于 width、height 有效） */
box-sizing: border-box;
}
a,
li {
/* 文本修饰：无 */
text-decoration: none;
}
.box-1 {
/* 1. 盒子可视化 */
border: 6px solid gold;
/* 2. 修改盒子内外样式 */
/* 2.1 修改外部 */
margin-top: 20px;
/* 2.2 修改本体 */
/* 盒子尺寸 */
width: 300px;
height: 90px;
/* 盒子边框 */
border-radius: 34px;
box-shadow: -6px 6px 2px #666;
/* 盒子背景 */
background-image: url(https://img.zcool.cn/community/01c94c563736d66ac7259e0fd89fcb.jpg@2o.jpg);
background-size: 180px 60px;
background-repeat: no-repeat;
background-origin: content-box;
}
.box-2 {
/* 1. 盒子可视化 */
border: 6px solid gold;
/* 2. 修改盒子样式 */
/* 2.1 修改外部 */
margin-top: 20px;
/* 2.2 修改本体 */
width: 400px;
height: 100px;
/* 颜色渐变 */
/* 第一种渐变方式：linear gradient 线性的渐变 */
background: linear-gradient(120deg, red, blue, 50%, pink, rgba(0, 0, 0, 0.5), green);
}
.box-3 {
/* 盒子可视化 */
border: 6px solid gold;
margin-top: 20px;
width: 300px;
height: 100px;
/* 颜色渐变 */
/* 第二种渐变方式：linear gradient 径向的渐变 */
background: radial-gradient(ellipse, red 5%, green 15%, blue 60%);
/* 重复的渐变 */
/* background: repeating-radial-gradient(red, yellow 10%, green 15%) */
}
.box-4 {
border: 6px solid gold;
margin-top: 20px;
width: 400px;
height: 68px;
/* 内容溢出盒子：隐藏 */
overflow: hidden;
/* 文本效果 */
p:nth-child(1) {
text-shadow: -5px 3px 4px #666;
text-align: center;
}
}
.box-5 {
border: 6px solid gold;
margin-top: 20px;
width: 200px;
height: 120px;
background-color: red;
/* 使变形：平移(x, y) */
transform: translate(68px, 0);
/* 使变形：旋转(90度) */
transform: rotate(90deg);
/* 使变形：伸缩(1倍, 1倍) */
transform: scale(1, 1);
/* 使变形：倾斜(30度，-20度)*/
transform: skew(30deg, -20deg);
}
.box-6 {
border: 6px solid gold;
margin-top: 40px;
width: 200px;
height: 120px;
/* 使变化：平移 */
transform: translate3d(30px, 30px, 30px);
/* 使变化：旋转 */
transform: rotate3d(1, 0.5, 0, -780deg);
/* 使变化：伸缩 */
transform: scale3d(2, 1, 1);
}
.box-7 {
border: 6px solid gold;
margin-top: 20px;
width: 200px;
height: 120px;
/* 过渡效果：监控某某属性 过渡时长 */
transition: transform 2s, background-color 3s;
}
.box-7:hover {
transform: scale(0.5, 0.5);
background-color: pink;
}
/* 定义"关键帧" */
@keyframes changeBoxSize {
0% {
width: 120px;
height: 60px;
}
100% {
width: 200px;
height: 100px;
}
}
.box-8 {
border: 6px solid gold;
margin-top: 20px;
width: 120px;
height: 60px;
/* 使用"关键帧"生成动画 */
/* 动画：某某关键帧 播放周期秒数 线性播放速度 延迟2s 播放次数为无限 下一周期逆向地播放 */
animation: changeBoxSize 5s linear 2s infinite alternate;
}
.box-9 {
border: 6px solid gold;
margin-top: 20px;
width: 500px;
height: 180px;
/* 文本多列 */
column-count: 2;
column-gap: 100px;
column-rule: 3px outset black;
}
.box-10 {
border: 6px solid gold;
margin-top: 20px;
width: 200px;
height: 120px;
/* 调整尺寸：两边都可调整（需要配合 overflow 使用） */
resize: both;
/* 元素溢出时：自动 */
overflow: visible;
overflow: hidden;
overflow: clip;
overflow: scroll;
overflow: auto;
/* 外形修饰 */
outline: 2px solid red;
outline-offset: 6px;
}
.box-11 {
border: 6px solid gold;
margin-top: 40px;
width: 300px;
height: 180px;
/* 缩略图 */
img {
width: 200px;
height: 120px;
border: 5px solid red;
border-radius: 10px;
padding: 18px;
/* 图片滤镜：图片颜色设置为100%灰度 */
filter: grayscale(100%);
}
}
.box-12 {
border: 6px solid gold;
margin-top: 20px;
width: 100%;
height: 330px;
/* =================== flex布局详解 ================ */
/* 显示：启用flex布局 */
display: flex;
/* flex的方向：横着-反方向 */
flex-direction: row-reverse;
/* item 换行，溢出的 item 会被换行 */
flex-wrap: wrap;
/* flex-flow 只是一个简写，因此它自身的属性值就是 flex-direction 与 flex-wrap 的属性值 */
/* flex-flow: row-reverse; */
/* 沿着主轴（主轴默认是横轴）进行每一个 item 位置的调整 */
justify-content: space-around;
/* 沿着侧轴（侧轴默认是纵轴）进行每一个 item 位置的调整 */
align-content: space-around;
/* align-items 其实就是在父容器上统一设置所有直接子元素的 align-self 值，它本身并不具有任何的附加效果，所以我们直接看 align-self 即可 */
/* align-items: flex-end; */
/* gap 的作用是元素与元素之间的间距，而不是元素与容器之间的间距 */
/* 间距：行 列 */
gap: 60px 80px;
.item {
border: 1px solid red;
width: 200px;
height: 100px;
}
.item:nth-child(1) {
background-color: pink;
align-self: flex-end;
}
}
.box-13 {
border: 6px solid gold;
margin-top: 20px;
width: 100%;
height: 330px;
/* =================== flex布局详解 ================ */
display: flex;
flex-direction: row;
.item {
border: 1px solid red;
width: 100px;
height: 100px;
}
.item:nth-child(1) {
background-color: pink;
/* align-items 属性，这个属性的主要作用是控制所有的 flex 元素在“交叉轴”方向的对齐方式 */
/* align-self 属性是控制单个的 flex 元素在“交叉轴”方向的对其方式 */
align-self: flex-end;
}
.item:nth-child(2) {
background-color: green;
/* 所有的 flex 元素宽度总和小于 flex 容器的宽度之后，按照特定的比率去分配空间给具有 flex-grow 值的 flex 元素 */
/* flex 容器中被分配的比例值，属性值为纯数字，可以是带小数点的数字 */
flex-grow: 2.5;
}
.item:nth-child(3) {
background-color: blue;
/* 续接上文 */
flex-grow: 2;
}
.item:nth-child(4) {
background-color: grey;
/* 当 flex 元素之和大于 flex 容器的宽度时，具有 flex-shrink 属性的 flex 元素会根据特定的比率缩小其自身的宽度 */
flex-shrink: 1;
/* 在 flex 元素中使用频率较高的应该是 flex 这个属性了，该属性是一个简写属性，包含了 flex-grow、flex-shrink 以及 flex-basis 这三个属性。 */
/* flex 占比空间：flex-grow: 6 && flex-shrink: 2 && flex-basis: 50% 简写成以下格式 */
flex: 1 1 0%;
/* order 属性规定了 flex 元素在 flex 容器中布局时的顺序。
在未设置任何 order 属性值或者设置了相同的 order 属性值时，会以元素在 dom 节点中出现的顺序进行布局；
而如果我们修改了 order 的属性值，就将会以递增的方式排序，数字越大，flex 元素就排得越后面。
order 属性仅仅只是将 flex 元素在页面展示时的视觉效果做了位置的调整，并不会改变其自身在 dom 节点的位置以及顺序
属性值可以为负值，只要是整数就可以了
*/
order: 99;
}
}
/* ==================== 多媒体查询 =================== */
/*
多媒体查询用于检测：
viewport(视窗) 的宽度与高度
设备的宽度与高度
朝向 (智能手机横屏，竖屏) 。
分辨率
媒体类型：
---------------------------------------
| 值 | 描述
---------------------------------------
| all | 用于所有多媒体类型设备
| print | 用于打印机
| screen | 用于电脑屏幕，平板，智能手机等
| speech | 用于屏幕阅读器
---------------------------------------
书写格式
@media not/only 媒体类型 and (表达式) {
}
*/
@media screen and (min-width: 600px) {
.box-14 {
border: 6px solid gold;
margin-top: 20px;
width: 200px;
height: 100px;
background-color: red;
}
}
</style>
</head>
<body>
<a href="https://www.baidu.com">点击前往百度</a>
<ol>
<li>第一个li标签</li>
<li>第二个li标签</li>
<li>第三个li标签</li>
</ol>
<div class="box-1">This is box-1</div>
<div class="box-2">This is box-2</div>
<div class="box-3">This is box-3</div>
<div class="box-4">
This is box-4
<p>Hello World</p>
<p>This is a message for you.</p>
<p>How are you?</p>
</div>
<div class="box-5">This is box-5</div>
<div class="box-6">This is box-6</div>
<div class="box-7">This is box-7</div>
<div class="box-8">This is box-8</div>
<div class="box-9">
This is box-9
生活如酒，或芳香，或浓烈，因为诚实，它变得醇厚；生活如歌，或高昂，或低沉，因为守信，它变得悦耳； 生活如画，或明丽，或素雅，因为诚信，它变得美丽。
若能掬起一捧月光，我选择最柔和的；若能采来香山红叶，我选择最艳丽的；若能摘下满天星辰，我选择最明亮的。也许你会说，我的选择不是最好，但我的选择，我相信。
</div>
<div class="box-10">This is box-10 万里悲秋常作客，百年多病独登台！</div>
<div class="box-11">
<img src="https://ts1.cn.mm.bing.net/th/id/R-C.987f582c510be58755c4933cda68d525?rik=C0D21hJDYvXosw&riu=http%3a%2f%2fimg.pconline.com.cn%2fimages%2fupload%2fupc%2ftx%2fwallpaper%2f1305%2f16%2fc4%2f20990657_1368686545122.jpg&ehk=netN2qzcCVS4ALUQfDOwxAwFcy41oxC%2b0xTFvOYy5ds%3d&risl=&pid=ImgRaw&r=0"
alt="">
</div>
<div class="box-12">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="box-13">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
回顾
效果图
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box-1 {
border: 6px solid gold;
margin: 100px 0 0 10px;
width: 200px;
height: 120px;
/* 下面的代码，仅作为absolute定位的铺垫，不会对该元素本身产生任何影响 */
position: relative;
}
.box-2 {
border: 6px solid red;
/* 定位 */
position: absolute;
left: 50%;
top: 50%;
/* 通过2D平移元素的属性，进行位置的微调 */
transform: translate(-50%, -50%);
/* 设置元素为"隐藏"状态 */
visibility: hidden;
}
.show:hover+.box-2 {
/* 当.show:hover满足条件时，将.box-2元素设置为"可见"状态 */
visibility: visible;
}
</style>
</head>
<body>
<div class="box-1">
<div class="show">显示</div>
<div class="box-2">123</div>
</div>
</body>
</html>
<!--
可能不常用但非常强大的选择器：
:nth-child(n)：选择父元素中的第 n 个子元素。例如，:nth-child(2) 选择第二个子元素。
:nth-of-type(n)：选择同类型元素中的第 n 个元素。例如，:nth-of-type(2) 选择同类型元素中的第二个。
:not(selector)：选择不符合指定选择器的元素。例如，:not(p) 选择所有非 <p> 元素。
:first-of-type：选择同类型元素中的第一个。
:last-of-type：选择同类型元素中的最后一个。
:only-child：选择父元素中唯一的子元素。
:only-of-type：选择同类型元素中唯一的一个。
[attribute^=value]：选择具有指定属性且属性值以给定值开头的元素。例如，[src^="https"] 选择 src 属性值以 "https" 开头的元素。
[attribute$=value]：选择具有指定属性且属性值以给定值结尾的元素。例如，[src$=".jpg"] 选择 src 属性值以 ".jpg" 结尾的元素。
[attribute*=value]：选择具有指定属性且属性值包含给定值的元素。例如，[class*="active"] 选择 class 属性值中包含 "active" 的元素。
-->
内容推荐
- CSS 视频教程：https://www.bilibili.com/video/BV17X4y1d7mT/
- CSS 文档教程：
- 响应式布局：https://www.bilibili.com/video/BV1ov411k7sm/
CSS 编写工具：https://css.bqrdh.com/
5589
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
