CSS Day10

发布时间：2024年01月17日
10.1 2D位移

属性名：transform

属性值：translateX 水平方向的位移 相对于自身位置移动

translateY 垂直方向的位移 相对于自身位置移动

transform：translate(x,y);

位移和定位搭配使用：
position:absolute;
top:50%;
left:50%;
transform：translate(-50%,-50%);

10.2 2D缩放(面试题)
<!DOCTYPE html>
<html lang="en">
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ? ? .box {
 ? ? ? ? ? ?width: 100px;
 ? ? ? ? ? ?height: 1px;
 ? ? ? ? ? ?transform: scale(0.1);
 ? ? ? ? ? ?background-color: red;
 ? ? ?  }
 ? ?</style>
</head>
<body>
 ? ?<div class="box"></div>
</body>
</html>
10.3 2D旋转

transform:rotate(60deg);

正值-顺时针，负值-逆时针

10.4 图标的引用

参考阿里巴巴图标库

10.5 精灵图（雪碧图）

图片整合技术

  • 优点：

    1、将多个图片整合成为一张图，浏览器只需要发送一次请求，就可以同时加载多个图片提高访问效率，提高用户的体验度

    2、将多个图片整合成一张图，减少了图片的总大小

  • 精灵图使用步骤：

    1、确定要使用的精灵图

    2、测量每个图片的大小以及图片所在的位置

    3、将精灵图设置为背景图片

    4、使用背景图位置属性展示每个精灵图

案例

<!DOCTYPE html>
<html lang="en">
?
<head>
 ? ?<meta charset="UTF-8">
 ? ?<meta name="viewport" content="width=device-width, initial-scale=1.0">
 ? ?<title>Document</title>
 ? ?<style>
 ? ? ?  *{
 ? ? ? ? ? ?margin: 0;
 ? ? ? ? ? ?padding: 0;
 ? ? ? ? ? ?text-decoration: none;
 ? ? ? ? ? ?list-style: none;
 ? ? ?  }
 ? ? ? ?.box {
 ? ? ? ? ? ?width: 300px;
 ? ? ? ? ? ?height: 250px;
 ? ? ? ? ? ?margin: 100px auto;
 ? ? ? ? ? ?background-color: rgb(241, 238, 238);
 ? ? ?  }
 ? ? ? ?.wz{
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 70px;
 ? ? ? ? ? ?height: 20px;
 ? ? ? ? ? ?margin-top: 15px;
 ? ? ? ? ? ?margin-left: 22px;
 ? ? ? ? ? ?color: rgb(100, 100, 100);
 ? ? ?  }
 ? ? ? ?ul{
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 240px;
 ? ? ? ? ? ?height: 180px;
 ? ? ? ? ? ?margin-left: 30px;
 ? ? ? ? ? ?/* background-color: red; */
 ? ? ?  }
 ? ? ? ?li{
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 80px;
 ? ? ? ? ? ?height: 90px;
 ? ? ? ? ? ?/* background-color: skyblue; */
 ? ? ?  }
 ? ? ? ?li:first-child{
 ? ? ? ? ? ?background-image: url(images/ToolsIcon.png);
 ? ? ? ? ? ?background-repeat: no-repeat;
 ? ? ? ? ? ?background-position: 27px 28px;
 ? ? ?  }
 ? ? ? ?li:nth-child(2){
 ? ? ? ? ? ?background-image: url(images/ToolsIcon.png);
 ? ? ? ? ? ?background-repeat: no-repeat;
 ? ? ? ? ? ?background-position: 27px -41px;
 ? ? ?  }
 ? ? ? ?li:nth-child(3){
 ? ? ? ? ? ?background-image: url(images/ToolsIcon.png);
 ? ? ? ? ? ?background-repeat: no-repeat;
 ? ? ? ? ? ?background-position: 27px -111px;
 ? ? ?  }
 ? ? ? ?li:nth-child(4){
 ? ? ? ? ? ?background-image: url(images/ToolsIcon.png);
 ? ? ? ? ? ?background-repeat: no-repeat;
 ? ? ? ? ? ?background-position: 27px -182px;
 ? ? ?  }
 ? ? ? ?li:nth-child(5){
 ? ? ? ? ? ?background-image: url(images/ToolsIcon.png);
 ? ? ? ? ? ?background-repeat: no-repeat;
 ? ? ? ? ? ?background-position: 27px -252px;
 ? ? ?  }
 ? ? ? ?li:nth-child(6){
 ? ? ? ? ? ?background-image: url(images/ToolsIcon.png);
 ? ? ? ? ? ?background-repeat: no-repeat;
 ? ? ? ? ? ?background-position: 27px -321px;
 ? ? ?  }
 ? ? ? ?p{
 ? ? ? ? ? ?float: left;
 ? ? ? ? ? ?width: 70px;
 ? ? ? ? ? ?height: 15px;
 ? ? ? ? ? ?margin-top: 60px;
 ? ? ? ? ? ?margin-left: 8px;
 ? ? ? ? ? ?color: gray;
 ? ? ?  }
 ? ? ? ?p:hover{
 ? ? ? ? ? ?color: red;
 ? ? ?  }
 ? ?</style>
</head>
?
<body>
 ? ?<div class="box">
 ? ? ? ?<p class="wz">职场取经</p>
 ? ? ? ?<ul>
 ? ? ? ? ? ?<li><p>求职技巧</p></li>
 ? ? ? ? ? ?<li><p>行业薪资</p></li>
 ? ? ? ? ? ?<li><p>简历模板</p></li>
 ? ? ? ? ? ?<li><p>就业指导</p></li>
 ? ? ? ? ? ?<li><p>实习兼职</p></li>
 ? ? ? ? ? ?<li><p>沟通技巧</p></li>
 ? ? ? ?</ul>
 ? ?</div>
</body>
?
</html>

?

文章来源:https://blog.csdn.net/2301_76534754/article/details/135658223
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章