HTML5+CSS3学习笔记第七天

最新推荐文章于 2024-09-10 17:45:18 发布

学习使我快乐01

最新推荐文章于 2024-09-10 17:45:18 发布

阅读量991

点赞数 23

分类专栏： web前端HTML5+CSS3 文章标签： html5 css3 学习

本文链接：https://blog.csdn.net/weixin_72043867/article/details/140938308

版权

web前端HTML5+CSS3 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

七、CSS第五天（定位、CSS高级技巧、修饰属性）

1.定位——灵活改变盒子在网页中的位置（使标签之间可以叠着放）

定位模式：position
边偏移：设置盒子位置
- left
- right
- top
- bottom

（1）相对定位：position：relative

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

 <style>
    div{
      position: relative;
      top:100px;
      left:200px;
    }
  </style>

（2）绝对定位：position：absolute

脱标，不占位
默认参照浏览器窗口定位
当父级设置相对定位时，参照父级定位（常用）——子绝父相
显示模式特点具备行内块特点——宽高生效

（3）固定定位：position:fixed——元素位置网页滚动时不改变

脱标，不占位
参照浏览器窗口定位
显示模式特点具备行内块特点

（4）使用定位实现居中

使用绝对定位
水平垂直边偏移50%
子级向左、上移动自身尺寸的一半
- 使用外边距margin
- transform:translate(-50%,-50%)

（5）堆叠层级——z-index（改变定位元素的层级顺序）

默认为0，取值越大显示顺序越靠上

2.CSS精灵CSS Sprites——网页图片应用处理方式

将网页中的背景图片整合到一张图片文件中，再background-position精确的定位出背景图片的位置

优点：当页面有很多小图时，减少服务器被请求次数，减轻服务器的压力，提高页面加载速度

实现步骤：

（1）创建盒子，盒子尺寸与小图尺寸相同

（2）设置盒子背景图为精灵图（即背景图片整合的那张整体图）

（3）添加 background-position 属性，改变背景图位置，将精灵图中对应的小图移动到盒子中

3.CSS字体图标

<link rel="stylesheet" href="./iconfont/iconfont/iconfont.css">
  <style>
    .iconfont {
      font-size: 200px;
      color: pink;
    }
  </style>
</head>
<body>
  <span class="iconfont icon-xihuan"></span>
</body>

下载字体图标库——iconfont官网（先加入购物车，再下载至本地）
压缩并导入项目
使用link外部链接到该页面，然后设置类名class=“iconfont icon-xxx”
根据需要设置字体图标的属性，属性与字体属性一致

（不显示时一定要检查一下导入项目后该文件夹所在的位置，确保正确链接）

+上传矢量图——图标库中没有时，将自己特别的矢量图上传到图标库并自动生成类名

4.CSS修饰属性

垂直对齐方式：vertical-align（浏览器对齐方式是根据最高内容的对齐方式来的）

属性值	效果
baseline	基线对齐（默认）
top	顶部对齐
middle	居中对齐
bottom	底部对齐

注意：浏览器将行内块和行内标签当做文字处理，默认按基线对齐，所以一般距离底部会有一点点距离，可以通过修改垂直对齐方式或者修改为块级标签两种方式去除底部空隙。

过渡transition——为一个元素不同状态切换的时候添加过渡效果

transition : 过渡的属性花费时间（s)

 <style>
     img{
       width: 200px;
       height: 150px;
       transition: all 2s;
     }
     img:hover{
      width: 500px;
      height: 400px;
     }
  </style>
</head>
<body>
  <img src="./壁纸.jpg" alt="">

透明度opacity : 0-1
光标类型cursor

属性值效果
default 默认值，箭头
pointer 小手效果，提示用户可以点击
text 工字型，提示用户可以选择文字
move 十字光标，提示用户可以移动

属性值	效果
default	默认值，箭头
pointer	小手效果，提示用户可以点击
text	工字型，提示用户可以选择文字
move	十字光标，提示用户可以移动