基础选择器
标签选择器：
标签名{属性名：属性值}
类选择器：
.类名{属性名：属性值}
类名可以重复；一个标签可以有多个类名；类名以空格隔开
id选择器：
#id属性值{属性名：属性值}
在页面中是唯一的；一个标签只有一个id属性
通配符选择器：
*{属性名：属性值}
margin：0；消除默认的外边距
padding：0；消除默认的内边距
字体文本样式
字体样式：
font-size：设置字体的大小（数字+px默认大小为16px）
font-weight：设置文字的粗细（normal正常bold加粗）
font-style：字体样式是否倾斜（normal正常italic倾斜）
font-family：设置字体
给一个标签设置多个相同的属性，最下面那层会生效
文本样式：
text-indent:(文本缩进数字+px；数字+em=当前font-size大小)
text-align：（left左对齐center居中right右对齐）
居中元素（span，a，input，img）
text-decoration：文本修饰
【underline：下划线
line-through：删除线
overline：上划线
none：无装饰可以清除a中的下划线
】
line-height行高设置（控制一行的上下距离）
取值:数字+px；倍数(当前标签font-size的倍数)
color：设置文字颜色
background-color：设置背景颜色
表示方式：直接给颜色名
rag（0，0，0）红绿蓝范围0~255
raga（255，255，255，0.5）a为透明度范围0~1
十六进制表示#000000
选择器的进阶
复合选择器
后代选择器：选择器1 选择器2（用空格隔开）
子代选择器：选择器1>选择器2
并集选择器：选择器1>选择器2(用逗号隔开)
交集选择器：选择器1选择器2（紧挨着）
hover伪类选择器：鼠标悬停在元素上的状态（选择器：hover）
背景相关属性
background-color：设置背景颜色
background-image：设置背景图片（ background-image: url(地址);）
background-repeat：背景平铺
【repeat水平和垂直方向平铺】
【no-repeat不平铺】
【repeat-x水平方向】
【repeat-y垂直方向】
background-position:水平方向位置 垂直方向位置
background-position：设置背景图像的初始位置
background-size：设置背景图像的大小
可选值
auto：默认值，保持图像原始大小。
cover：保持图像的纵横比并尽可能填充背景区域。contain：保持图像的纵横比以适应背景区域的最大区域。
background-attachment：设置背景图像是否随内容滚动
可选值
scroll：背景图像随内容滚动（默认值）。
fixed：背景图像固定在视口中，不随内容滚动。
local：背景图像的滚动与元素的内容滚动一起移动。
flex-wrap 属性的选项
nowrap（默认值）: 不换行，所有的 flex 项都会被放置在一行内。如果项目超出容器的宽度，它们会被压缩。
wrap: 换行。如果项目超过了容器的宽度，第一个项目会首先在下一行开始新的一行。
wrap-reverse: 反向换行。和 wrap` 类似，只是换行的方向相反，即新的行会在顶部。
元素显示
块级元素（一行显示一个）
div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
行内元素（一行显示多个）
a、span 、b、u、i、s、strong、ins、em、del
行内块元素
input、textarea、button、select
转换：
display:block 转换成块级元素
display:inline-block转换成行内块元素
display:inline转换成行内元素
作业
第一题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
background-color:#f2efef;
}
.max-div{
width: 350px;
height: 500px;
margin: 0 auto;
background-color: white;
}
.text-span1{
font-size: 20px;
background-color: white;
}
.text-span2{
color: red;
background-color: white;
}
.text-img1{
width: 29px;
background-color:white;
vertical-align: middle;
font-weight:bold;
}
.text-img2{
width: 22px;
vertical-align: middle;//文字与图片垂直对齐
text-align: center;
background-color: white;
}
.text-img3{
width: 130px;
height:100px ;
margin-left: 20px;
background-color: white;
}
.text-div{
background-color:white;
}
.text-div img{
display: inline-block;
}
.text1{
display: inline-block;
width: 190px;
background-color: white;
line-height: 28px;
}
.text-p1{
font-size: 18px;
background-color: white;
}
.text-p2{
font-size: 12px;
background-color:#fff2f2;
width: 60px;
color: red;
}
.text1 span{
font-size: 14px;
color: grey;
font-family: 新宋体;
background-color: white;
}
</style>
</head>
<body>
<div class="max-div">
<img src="./img/1.png" class="text-img1" alt=""> <span class="text-span1">热门视频</span>
<img src="./img/3.png" class="text-img2" alt=""> <span class="text-span2">换一换</span><br>
<div class="text-div">
<img src="./img/2.jpg" class="text-img3" alt="">
<div class="text1">
<p class="text-p1">无论做什么鱼:最忌放盐和料酒研制</p>
<p class="text-p2">1万评论</p>
<span>148万次观看</span>
<span>司马南频道</span></div>
</div>
<div class="text-div">
<img src="./img/2.jpg" class="text-img3" alt="">
<div class="text1">
<p class="text-p1">无论做什么鱼:最忌放盐和料酒研制</p>
<p class="text-p2">1万评论</p>
<span>148万次观看</span>
<span>司马南频道</span></div>
</div>
<div class="text-div">
<img src="./img/2.jpg" class="text-img3" alt="">
<div class="text1">
<p class="text-p1">无论做什么鱼:最忌放盐和料酒研制</p>
<p class="text-p2">1万评论</p>
<span>148万次观看</span>
<span>司马南频道</span></div>
</div>
<div class="text-div">
<img src="./img/2.jpg" class="text-img3" alt="">
<div class="text1">
<p class="text-p1">无论做什么鱼:最忌放盐和料酒研制</p>
<p class="text-p2">1万评论</p>
<span>148万次观看</span>
<span>司马南频道</span></div>
</div>
</div>
</body>
</html>
运行结果：
第二题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
background-color:#f5f5f5;
}
.max-div{
width: 350px;
height: 550px;
background-color: #fff;
margin: 0 auto;
line-height: 50px;
}
img{
width: 20px;
vertical-align: middle;
background-color: #fff;
line-height: 10px;
margin-left: 10px;
}
.text-span1{
font-size: 18px;
background-color: #fff;
margin-left: 20px;
}
.text-span2{
color: grey;
font-size: 14px;
background-color: #fff;
}
.text-div1{
background-color: #fff;
}
span{
background-color: #fff;
}
.text-span3{
font-size: 12px;
color: grey;
}
.text-span4{
width: 50px;
height: 50px;
background-color: orange;
text-align: center;
}
div{
background-color: #fff;
}
.text-span5{
background-color: skyblue;
}
.text-span6{
background-color: pink;
}
</style>
</head>
<body>
<div class="max-div">
<span class="text-span1">微博热搜</span>
<img src="./img/4.png" alt="">
<span class="text-span2">点击刷新</span>
<div class="text-div1">
<img src="./img/5.png" alt="">
<span>新的赶考之路考卷常出常新...</span>
<span class="text-span3">246万</span>
<span class="text-span4"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/6.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span5"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/7.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span6"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/8.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span5"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/9.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span4"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/10.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span5"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/11.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span6"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/12.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span5"> 新 </span>
</div>
<div class="text-div2">
<img src="./img/13.png" alt="">
<span>新的赶考之路考卷常出常新</span>
<span class="text-span3">246万</span>
<span class="text-span4"> 新 </span>
</div>
</div>
</body>
</html>
运行结果：
第三题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div-max{
width: 800px;
height: 400px;
background-color: deepskyblue;
display: flex;
box-sizing: border-box;
flex-wrap: wrap;
}
.div-one{
background:linear-gradient(0deg,pink,white);
width: 150px;;
height: 315px;
margin: 15px;
}
.div-two{
background:linear-gradient(180deg,pink,white);
width: 250px;
height: 150px;
margin: 15px 0;
}
.div-three{
background:linear-gradient(0deg,pink,white);
width: 150px;
height: 150px;
margin: 0 0 15px 0;
}
.div-four{
background:linear-gradient(180deg,pink,white);
width: 250px;;
height: 150px;
margin: 15px;
}
.div-five{
background:linear-gradient(0deg,pink,white);
width: 150px;
height: 150px;
margin: 0 -85px;
}
.div-six{
background:linear-gradient(0deg,pink,white);
width: 150px;;
height: 150px;
margin: -150px 75px ;
}
</style>
</head>
<body>
<span id="div-max">
<h6 class="div-one">可是</h6>
<span>
<h6 class="div-two">遗憾的是</h6>
<h6 class="div-three">我们生活在</h6>
</span>
<span>
<h6 class="div-four">两条平行直线</h6>
<h6 class="div-five">永远不会相交</h6>
<h6 class="div-six">世界里</h6>
</span>
</span>
</body>
</html>
运行结果：
第四题：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
.max-div {
display: flex;
flex-wrap: wrap;
width: 800px;
height: 600px;
white-space: wrap;
}
.div{
display: inline-block;
}
.text-div{
position: relative;
width: 150px;
height: 200px;
background-size:cover;
background-position:center;
margin: 20px;
}
.title{
position: absolute;
color: white;
bottom: 10px;
margin-left: 10px;
background-color: rgba(0, 0, 0, 0.5);
}
.caption {
font-size: 15px;
width: 150px;
}
</style>
<body>
<div class="max-div">
<div class="div">
<div class="text-div" style="background-image: url('./img/14.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/15.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/16.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/17.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/18.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/19.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/20.jpeg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
<div class="div">
<div class="text-div" style="background-image: url('./img/21.jpg');">
<div class="title">2444.0万</div>
</div>
<p class="caption">催眠：Delta脑电波音乐减压深度睡眠</p>
</div>
</div>
</body>
</html>
运行结果：
课后总结：
通过学习基础选择器、文本样式和背景图片相关的知识，我能够更好地控制网页的布局和视觉效果。在通过不断实践和应用，设计出更美观、更实用的网页，提升用户体验。
扫一扫
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
