淘宝补单平台网站_软考中级哪个含金量高_个人博客网站设计毕业论文_营销技巧培训

站《前端Web开发HTML5+CSS3+移动web视频教程》第八天课程：CSS定位、CSS高级技巧、CSS修饰属性

一、CSS定位

1.作用

CSS定位模式：position，边偏移有：left、right、top、bottom。可以灵活的改变盒子的位置

2.相对定位：`position:relative;`

①特点：

改变位置的参照物是自己原来的位置
不脱标，占位
标签显示模式不变

②提示：工作中不单独使用相对定位，配合其他定位使用

3.绝对定位`position: absolute;`

①特点

绝对定位的参照物是离自己最近的定位的祖先，如果所有的祖先都没有定位的话，参照浏览器窗口
会脱标，不占位
标签的显示模式改变，宽高生效（具有行内快的特点）。

②提示：相对定位和绝对定位搭配使用，遵循子绝父相的原则（子级用绝对定位，父级用相对定位）

4.水平居中

①应用场景：登录注册弹窗位于页面的中间
②实现方法

弹窗盒子绝对定位
边偏移：水平垂直边偏移50%（left50%和top50%，实现的效果是图片的左上角的顶点在浏览器的中间，而图片本身不在浏览器中间。）
使用margin-left和margin-top，取值分别是(-宽/2)，和（-高/2），让图片整体位于浏览器的中间。
第三条也可以换成transform: translate(-50%, -50%);起到相同的效果，实现图片的居中
③代码实例

<!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 {position: absolute;left: 50%;top: 50%;/* margin-left: -265px;margin-top: -127px; */transform: translate(-50%,-50%);}</style></head>
<body><div><img src="../day08_study/images/login.webp" alt=""></div>
</body>
</html>

5.固定定位`position: fixed;`

①应用场景：拖动滚动条的时候网页头部固定不变
②特点

脱标不占位
改变显示模式，宽高生效，有行内快的特点
参照物是浏览器

6.堆叠层级：`z-index`

①作用：盒子定位之后，默认的显示效果是按照标签的书写顺序，后来者居上，z-index可以设置定位元素的层级顺序，从而改变定位元素的显示模式
②注意：z-index取值默认是整数，取值越大显示顺序越靠前。
③代码实例

<!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>.class1 {width: 200px;height: 200px;background-color: pink ;position: absolute;left: 0;top: 0;z-index: 1;}.class2 {width: 200px;height: 200px;background-color: blue;position: absolute;left: 100px;top: 100px;z-index: 0;}</style>
</head>
<body><div class="class1"></div><div class="class2"></div>
</body>
</html>

总结

在这里插入图片描述

二、CSS高级技巧

1.CSS精灵

①介绍：CSS精灵，也叫CSS Sprites，是一种网页图片应用处理方式。把网页中的一些背景图片，整合到一张图片中，再用background-position精确的定位出背景图片的位置。
②优点：减少服务器被请求的次数，减轻服务器的压力，提高页面加载效果
③实现步骤

创建盒子，盒子的大小和想要显示图片的尺寸一致
设置盒子背景图为精灵背景大图
添加background-position属性，改变背景图的位置（使用像素大厨量出要显示小图的左上角的坐标，取坐标的负数为background-position属性值）
④例子：显示下图中的N字母

代码

<!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>CSS精灵</title><style>div {width: 112px;height: 110px;background-color: pink;background-image: url("./images/abcd.jpg");background-position: -256px -276px;}</style>
</head>
<body><div></div>
</body>
</html>

效果图
在这里插入图片描述

2.字体图标

①介绍：展示的是图标，本质是字体，也能实现网页小图标的效果。适用于简单的、颜色单一的小图标。如果是颜色比较复杂的小图标推荐使用CSS精灵。
②优点

灵活性更高，灵活的修改样式，例如尺寸、颜色等等
轻量级：体积小渲染块，降低服务请求次数
兼容性：几乎兼容所有主流的浏览器
使用方便：先下载再使用

③字体图标的下载

iconfont图标库：https://www.iconfont.cn/
下载字体：登录–素材库–官方图标库–进入图标库–选图标，加入购物车–购物车，添加项目，确定–下载至本地

④使用方法

引入字体样式表 <link rel="stylesheet" href="./iconfont/iconfont.css">
标签使用字体图标类名
iconfont：字体图标基本样式
icon-****：图标对应的类名。

⑤例子

<!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><link rel="stylesheet" href="./iconfont/iconfont.css"><style>.icon-yunshangchuan {font-size: 50px;}</style>
</head>
<body><div class="iconfont icon-yunshangchuan"></div>
</body>
</html>

效果图

在这里插入图片描述

三、CSS修饰属性

1.垂直对齐方式`vertical-align`

①属性名：vertical-align
②属性值：
在这里插入图片描述
浏览器默认把行内块和行内元素当成文字处理，且浏览器默认是基线对齐图片下方会有默认的空白，如下图

使用vertical属性可以实现行内元素图文的垂直对齐方式，可以去处图片下方的空白，去处图片下方的空白还可以将图片转换成块级模式。

2.过渡`transition`

①作用：可以为一个元素在不同状态之间切换的时候添加过渡效果，有图片文字的大小、位置等
②属性名：transition（复合属性）
③属性值：过渡属性花费时间
④提示：

过渡属性可以是具体的CSS属性
也可以为all（两个状态属性值不同的所有属性，都产生过渡效果）
transition设置给元素本身
⑤实例

<!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>transition效果</title><style>img {width: 200px;height: 150px;transition: all 1s;}img:hover {width: 500px;height: 400px;}</style>
</head>
<body><img src="./images/huawei.jpg" alt="">
</body>
</html>

3.透明度`opacity`

①作用：设置整个元素的透明度（包含背景和内容）
②属性名：opacity
③属性值：0-1（0是完全透明，1是不透明，0-1之间的小数是半透明）
④实例

<!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: 500px;background-color: pink;opacity: 0.5;}</style>
</head>
<body><div><img src="./images/phone.png" alt=""></div></body>
</html>

效果图
在这里插入图片描述

4.光标类型`cursor`

①作用：改变鼠标悬停在元素上时指针的显示样式
②作用名：cursor
③属性值：
在这里插入图片描述

综合案例一：CSS精灵京东服务

<!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>CSS精灵—京东服务</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}div {margin: 100px auto;width: 1190px;height: 42px;/* background-color: pink; */}div ul {display: flex;}div li {display: flex;padding-left: 40px;width: 297px;height: 42px;}div li h5 {margin-right: 10px;width: 36px;height: 42px;background-color: pink;background: url("./images/sprite.png") 0 -191px ;}div li:nth-child(2) h5 {background-position: -40px -191px;}div li:nth-child(3) h5 {background-position: -82px -191px;}div li:nth-child(4) h5 {background-position: -123px -191px;}div li p {font-size: 18px;color: #444;font-weight: 700;line-height: 42px;}</style></head>
<body><div><ul><li><h5></h5><p>品类齐全，轻松购物</p></li><li><h5></h5><p>品类齐全，轻松购物</p></li><li><h5></h5><p>品类齐全，轻松购物</p></li><li><h5></h5><p>品类齐全，轻松购物</p></li></ul></div></body>
</html>

效果图
在这里插入图片描述

综合案例二：轮播图

技术点：定位、字体图标、flex布局

<!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><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;/* background-color: pink; */overflow: hidden;}.banner ul {display: flex;}.banner ul img {width: 564px;/* height: 315px; */border-radius: 12px;vertical-align: middle;}/* 箭头 */.banner .prev,.banner .next {/* 隐藏 */display: none;position: absolute;top: 50%;transform: translateY(-50%);width: 20px;height: 30px;background-color: rgba(0,0,0,0.3);text-decoration: none;color: #fff;line-height: 30px;}/* 当鼠标划到banner上的时候，要显示左右的箭头 */.banner:hover .prev,.banner:hover .next {display: block;}.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 {display: flex;position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);height: 13px;background-color: rgba(255,255,255,0.3);border-radius: 10px;}.banner ol li {margin: 2px;width: 8px;height: 8px;background-color: #fff;border-radius: 50%;cursor: pointer;}/* 橙色的小圆点 */.banner ol .active {background-color: #ff5000;}</style>
</head>
<body><!-- .banner> 图+箭头+圆点--><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><!-- 上一张prev --><a href="#" class="prev"><i class="iconfont icon-zuoce"></i></a><!-- 下一张 next--><a href="#" class="next"><i class="iconfont icon-youce"></i></a><!-- 圆点 --><ol><li></li><li class="active"></li><li></li></ol></div>
</body>
</html>