列表属性
列表前面是图片的效果图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表属性</title>
<style>
/*
list-style-type 列表前面点的属性
属性值 circle 空心圆
disc 实心圆
square 实心正方形
none 前面不显示
list-style-image
属性值 url(图片url);
list-style-position
属性值 outside 默认值,在border边框外面
inside 在border边框里面
合并写法:
list-style
属性值 inside none url(images/01.png)
none
*/
/* ul{
list-style-type: none;
} */
.list1{
list-style-image: url(images/01.png);
}
.list2{
list-style-image: url(images/02.png);
}
.list3{
list-style-image: url(images/03.png);
}
li{
border: 1px solid red;
list-style-position: inside;
}
/* 合并写法 */
.box{
/* list-style: inside none url(images/01.png); */
list-style: none;
}
</style>
</head>
<body>
<ul>
<li class="list1">1111111</li>
<li class="list2">2222222</li>
<li class="list3">3333333</li>
</ul>
<ul class="box">
<li>111111</li>
<li>222222</li>
<li>333333</li>
</ul>
</body>
</html>
最常用的就是列表属性什么也不加,list-style: none;
操作列表更加灵活。
如: https://news.baidu.com/
这里好看的样式实际上是给列表前面加一个span标签,然后给span标签设置一个背景图片来完成的。
背景属性
背景颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景颜色</title>
<style>
/*
background-color
属性值:颜色 yellow
16进制 #0f0f0f
rgb
rgba 第四个参数是透明度
*/
.box1{
width: 300px;
height: 300px;
/* background-color: yellow; */
/* background-color: #0f0f0f; */
background-color: rgb(255,0,0);
}
.box2{
width: 100px;
height: 100px;
background-color: rgba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="box1">
你好,大世界!
<div class="box2"></div>
</div>
</body>
</html>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景图片</title>
<style>
/*
background-color 颜色
background-image 默认平铺
如果图片比盒子小,那么平铺会有很多个
如果图片比盒子大,会自动裁剪一部分展示
background-repeat: repeat; 默认平铺
repeat-x x轴平铺
repeat-y y轴平铺
no-repeat 不平铺
background-position: 水平方向 垂直方向;
1. 20px 20px;
2. 10% 10%;
3. left/center/right top/center/bottom;
*/
/* 盒子大,图片小 */
.box1{
width: 400px;
height: 400px;
background-color: yellow;
background-image: url(images/01.png);
/* background-image: url(images/04.jpg); */
background-repeat: no-repeat;
background-position: right bottom;
}
/* 盒子小,图片大,会裁掉一部分,可以控制图片展示最好看的位置 */
.box2{
width: 300px;
height: 300px;
background-color: yellow;
background-image: url(images/04.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
背景大小
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景大小</title>
<style>
/*
background-size:宽度 高度; --背景图片大小
属性值 400px 400px; 宽高像素(图片会拉伸模糊)
100% 100%; 宽高百分比(图片会拉伸模糊)
cover; 把背景图扩大到最大尺寸,以使其高度和宽度完全适应内容区域,
展示不全会被裁剪
contain; 把背景图扩大到最大尺寸,以使其高度和宽度完全适应内容区域,
以图片完整性为主,铺不满就留白
*/
/* 盒子大,图片小 */
.box1{
width: 400px;
height: 400px;
/* background-color: antiquewhite; */
background-image: url(./images/05.png);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
/* 盒子小,图片大,会裁剪掉一部分,可以控制图片展示到最好看的位置 */
.box2{
width: 399px;
height: 399px;
background-color: antiquewhite;
background-image: url(./images/1000.webp);
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
背景的固定与滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>背景的固定与滚动</title>
<style>
/*
background-attachment 背景图片的固定
属性值:scroll(滚动)/fixed(固定)
固定是相对于浏览器的窗口,从左上角开始,固定在浏览器窗口里面
*/
.box1{
width: 200px;
height: 3000px;
background-color: yellow;
background-image: url(images/05.png);
background-repeat: no-repeat;
background-attachment: fixed;
/*
加上margin: 0 auto;之后盒子会在浏览器中间,
但是background-attachment: fixed;是固定在浏览器窗口左上角,脱离了三界之外,会不显示
*/
/* margin: 0 auto; */
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
视觉差案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视觉差案例</title>
<style>
div{
width: 500px;
height: 1000px;
}
.box1{
background-image: url(images/06.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
background-size: 300px 800px;
background-color: yellow;
background-attachment: fixed;
}
.box2{
background-image: url(images/07.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
background-size: 300px 800px;
background-color: red;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
知乎案例
https://www.zhihu.com/signin?next=%2F
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>知乎案例</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 1000px;
background-color: yellow;
margin: 0 auto;
}
body{
background-image: url(images/08.png);
background-size: 100% 100%;
background-attachment: fixed;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
背景的复合写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合写法</title>
<style>
/*
复合写法:
1. 用空格隔开
2. 顺序可以换
3. 可以只取一个值,放在后面能覆盖前面的值
background-size 属性只能单独使用
*/
.box1{
/*
background-attachment: fixed;是固定这个div ,
background-position: center;是把元素放到了中间
此时如果盒子不够大,则无法显示出来
*/
/* width: 300px;
height: 300px; */
width: 1200px;
height: 600px;
/* background-color: yellow;
background-image: url(images/05.png);
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed; */
background: yellow url(images/05.png) no-repeat center fixed;
}
.box2{
width: 300px;
height: 300px;
/* 放在后面的图片覆盖了前面的背景颜色 */
background-color: yellow;
background: url(images/05.png) no-repeat center top;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>