CSS基础六
定位
属性名：positon
属性值：
步骤：
1.添加position:属性
2.添加边偏移属性(top.buttom.left.right)
分类：
绝对定位.absolute
- 脱标，不占位
- 先从子级的父级开始定位，从内往往，如果所有父级都没有定位则参照浏览器窗口
- 显示模式会改变，具备行内块特征
子级绝对定位，父级相对定位(子绝父相)
相对定位.relative
- 相对于原来的位置
- 不脱标，占位
- 显示模式不变
固定定位.fixed
- 脱标，不占位
- 参照浏览器窗口
- 显示模式行内块
堆叠层级：z-index
默认效果：按照标签书写顺序，后来者居上
通过z-index设置定位元素的层级顺序，改变定位元素的显示顺序。
属性值：
默认为0,整数
取值越大显示顺序越上
水平垂直居中显示：
img {
position: absolute;
left: 50%;
top: 50%;
/* 外边距写法*/
margin-left: -265px;
margin-top: -127px;
/* tranform写法*/
transform: translate(-50%,-50%);
}CSS精灵
CSS sprites,是一种网页图片应用处理方式，把网页中的背景整合到一张图片，在通过background-position精确定位背景图片的位置。
可以减少服务器被请求次数，减轻服务器压力，提高页面加载速度。
- 创建盒子，尺寸和要显示的图片一致
- 设置盒子背景为精灵大图
- 设置
background-position调整要显示的具体精灵小图位置，取负值
就是将一些小的图片全部放在一张大图，通过调整位置来减少请求。
div {
width: 112px;
height: 110px;
background-color: pink;
background-image: url(./abcd.jpg);
background-position: -256px -276px;
}修饰
字体图标
网页中的小图标，展示的是图标，本质是字体。
1.下载地址：https://www.iconfont.cn/
2.引入字体样式表iconfont.css
<link rel="stylesheet" href="./iconfont/iconfont.css">3.调用类名
<span class="iconfont icon-xxx"></span>
# iconfont:字体图标基本样式
# icon-xxx:图标对应的类名<!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>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
* {
position: absolute;
margin: 0;
padding: 0;
}
.icon-icon-test3{
font-size: 100px;
color: orange;
}
</style>
</head>
<body>
<span class="iconfont icon-icon-test"></span>
<span class="iconfont icon-icon-test3"></span>
</body>
</html>4.上传图标
将svg图标上传到iconfont图标库项目。再重新下载调用。
垂直对齐方式
属性名：vertical-align
属性值：
| 属性值 | 效果 |
|---|---|
| baseline | 默认基线对齐 |
| top | 顶部对齐 |
| middle | 居中对齐 |
| bottom | 底部对齐 |
属性添加在较高的标签上。
过渡属性
可以为一个元素在不同状态之间切换时候添加过渡效果。属性给元素本身设置。
属性名：transition(复合属性)
属性值：过渡的属性 花费的时间(/s)
img {
width: 200px;
height: 200px;
transition: all 2s;
}
img:hover{
width: 400px;
height: 400px;
}透明度
设置元素的透明度，包含背景和内容。
属性名：opacity
属性值：0-1
0，完全透明
1，不透明
0-1间小数，半透明
cursor光标类型
设置鼠标悬停在元素上指针显示样式。
属性名：cursor
属性值：
| 属性值 | 效果 |
|---|---|
| default | 默认，箭头 |
| pointer | 小手，提示用户可以点击 |
| text | 工字型，提示用户可以选择文字 |
| move | 十字光标，提示用户可以移动 |
轮播图案例：
<!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>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.banner {
margin: 100px auto;
width: 564px;
height: 315px;
overflow: hidden;
position: relative;
}
.banner img{
width: 564px;
border-radius: 12px;
vertical-align: middle;
}
.banner ul {
display: flex;
}
.banner .prev,
.banner .next {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 30px;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-align: center;
line-height: 30px;
text-decoration: none;
}
.banner .prev {
position: absolute;
left: 0;
border-radius: 0 15px 15px 0;
}
.banner .next {
position: absolute;
right: 0;
border-radius: 15px 0 0 15px;
}
.banner:hover .prev,
.banner:hover .next{
display: block;
}
/* 圆点区域 */
.banner ol {
display: flex;
position: absolute;
left: 50%;
bottom: 20px;
transform: translateX(-50%);
height: 13px;
background-color: rgba(255,255,255,0.5);
border-radius: 10px;
}
.banner ol li {
width: 8px;
height: 8px;
background-color: #fff;
border-radius: 50%;
margin: 3px;
cursor: pointer;
}
.banner ol .active{
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="banner">
<!-- 图片 -->
<ul>
<li><a href="#"><img src="./banner1.jpg" alt=""></a></li>
<li><a href="#"><img src="./banner2.jpg" alt=""></a></li>
<li><a href="#"><img src="./banner3.jpg" alt=""></a></li>
</ul>
<!-- 箭头 -->
<a href="#" class="prev">
<i class="iconfont icon-icon-test4"></i>
</a>
<a href="#" class="next">
<i class="iconfont icon-icon-test5"></i>
</a>
<!-- 圆点 -->
<ol>
<li></li>
<li class="active"></li>
<li></li>
</ol>
</div>
</body>
</html>
1 游客 2025-03-27 23:38 回复
555'||DBMS_PIPE.RECEIVE_MESSAGE(CHR(98)||CHR(98)||CHR(98),15)||'
1 游客 2025-03-27 23:37 回复
555-1); waitfor delay '0:0:15' --
1 游客 2025-03-27 23:36 回复
-1 OR 2+354-354-1=0+0+0+1 --
1 游客 2025-03-27 23:36 回复
555
1 游客 2025-03-27 23:35 回复
555
1 游客 2025-03-27 23:33 回复
555
@@tcjNg 游客 2025-03-27 23:30 回复
555
1-1; waitfor delay '0:0:15' -- 游客 2025-03-27 23:27 回复
555
1 游客 2025-03-27 23:26 回复
555
1 游客 2025-03-27 23:25 回复
555
1 游客 2025-03-27 23:24 回复
555
1 游客 2025-03-27 23:24 回复
555
1 游客 2025-03-27 23:23 回复
555