系列文章目录
第一章 前端Web开发HTML5+CSS3
目录
前言
之前有在断断续续地学习前端和后端的知识,现在想系统地学习并进行记录,作为自己一个后续查阅的电子笔记本。
今天的内容包括四个基础知识(定位、精灵图、字体图标和修饰属性)和两个综合案例(京东精灵图和淘宝轮播图)
1. 定位
1.1 作用
灵活的改变盒子在网页中的位置
1.2 实现
(1)定位模式:position
relative absolute fixed
(2)边偏移:设置盒子的位置
left right top bottom
relative:
- 改变位置的参照物是 自己原来的位置
- 不脱标,占位
- 标签显示模式特点 不变
- 往往是配合使用
absolute:
- 使用场景:子级绝对定位,父级相对定位--子绝父相
- 脱标,不占位
- 改变位置的参照物是 先找最近的已经定位的祖先元素,弱国所有祖先元素都没有定位,参照浏览器可视区改位置。
- 显示模式特点改变,宽高生效(具备了行内块的特点)
fixed:
- 脱标,不占位
- 改变位置的参照物是 浏览器可视区
- 显示模式特点改变,宽高生效(具备了行内块的特点)
1.3 堆叠层级 z-index
- 定位默认后来者居上。
- z-index取值是整数,默认是0,取值越大显示顺序越靠上。
1.4 总结
2. CSS精灵图
CSS精灵,也叫CSS Sprites,是一种网页图片应用处理方式。把网页中一些背景图片整合到一张图片文件中,再background-position精确的定位出背景图片的位置。
优点:减少服务器被请求次数,减轻服务器的压力,提高页面加载速度
2.1 实现步骤
- 创建盒子,盒子尺寸与小图尺寸相同
- 设置盒子背景图为精灵图
- 添加background-position属性,改变背景图位置
- 使用PxCook测量小图片左上角坐标
- 取负数坐标为background-position属性值(向左上移动图片位置)
3. 字体图标
展示的是图标,本质是字体
作用:在网页中添加简单的、颜色单一的小图标
优点:
- 灵活性:灵活地修改样式,例如尺寸、颜色等
- 轻量级:体积小、渲染快、降低服务器请求次数
- 兼容性:几乎兼容所有主流浏览器
- 使用方便:先下载再使用
具体下载和使用流程:100-字体图标-下载和使用_哔哩哔哩_bilibili
4. 修饰属性
4.1 垂直对齐方式 vertical-align
默认情况下图片偏上,该属性可以让图片和文字水平对齐(属性值设置为middle)
另一种解决方法:将图片转为块元素(因为浏览器把行内块、行内标签当作文字处理,默认按基线对齐,所以图片底下有空白)
4.2 过渡 transition
作用:可以为一个元素在不同状态之间切换的时候添加效果
属性名:transition(复合属性)
属性值:过渡的属性 花费时间(s)
提示:
- 过渡的属性可以是具体的CSS属性
- 也可以为all(两个状态属性值不同的所有属性,都产生过渡效果)
- transition设置给元素本身
4.3 透明度 opacity
作用:设置整个元素的透明度(包含背景和内容)
属性名:opacity
属性值:0-1
- 0:完全透明(元素不可见)
- 1:不透明
- 0-1之间小数:半透明
4.4 光标属性 cursor
作用:鼠标悬停在元素上时指针显示样式
属性名:cursor
5. 案例:淘宝轮播图
技术点:
- 定位
- 字体图标
- flex布局
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>淘宝轮播图</title>
<link rel="stylesheet" href="iconfont/iconfont.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.banner {
position: relative;
margin: 100px auto;
width: 564px;
height: 315px;
overflow: hidden;
}
.banner:hover .prev,
.banner:hover .next {
display: block;
}
.banner ul {
display: flex;
}
.banner ul li img {
width: 564px;
border-radius: 12px;
}
.banner .prev,
.banner .next {
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 30px;
line-height: 30px;
color: #fff;
background-color: rgba(0, 0, 0, 0.5);
}
.banner .prev {
left: 0;
border-radius: 0 15px 15px 0;
}
.banner .next {
right: 0;
border-radius: 15px 0 0 15px;
text-align: center;
}
.banner ol {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
display: flex;
height: 14px;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 10px;
}
.banner ol li {
margin: 3px;
background-color: #fff;
width: 8px;
height: 8px;
border-radius: 50%;
cursor: pointer;
}
.banner ol .active {
background-color: #ff5000;
}
</style>
</head>
<body>
<div class="banner">
<!-- 图片 -->
<ul>
<li>
<a href="#"><img src="images/banner1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="images/banner2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="images/banner3.jpg" alt=""></a>
</li>
</ul>
<!-- 箭头 -->
<a class="prev"><i class="iconfont icon-arrow-double-left"></i></a>
<a class="next"><i class="iconfont icon-arrow-double-right"></i></a>
<!-- 圆点 -->
<ol>
<li></li>
<li class="active"></li>
<li></li>
</ol>
</div>
</body>
</html>