Html定位的学习

Virtue-x

于 2022-11-29 19:30:51 发布

阅读量53

点赞数

文章标签：学习 html

本文链接：https://blog.csdn.net/uinokn/article/details/128103785

版权

这篇博客介绍了前端开发中的图标字体使用，如阿里巴巴矢量图标库，以及如何通过CSS设置层级透明度，区分opacity和rgba、transparent的区别。此外，还探讨了手写轮播图的两种常见实现方法，包括浮动布局和定位方式，并给出了相关代码示例。

摘要由CSDN通过智能技术生成

前言：

今天的学习内容是定位的后续

学习内容：

1、图标字体使用
2、层级透明度
3、理解轮播图的三种写法

图标字体使用：

图标字体（iconfont）

网页中会有很多小的图片，例如，购物车，小箭头，定位等，

这些内容可以直接用图片代替，但图片一般都是比较大的，而且修改起来也不方便

所以可以直接使用图标字体，把它们就当成字体，可以用字体相关的样式，去修改

图标字体，例如可以改变大小，颜色。

图标字体在一些大的框架系统里，或者一些大的网站，很多大牛都已经归纳好，那我们

直接使用即可，使用的方式方法大同小异。

目前只要掌握一到两个网站即可

阿里巴巴矢量图标库 https://www.iconfont.cn/

使用图标库

第一步：选择你需要的图标

第二步：将你选中图标对应的css文件引入到你的html文件当中

css文件可以线上版本，也可以下载下来，引入线下版本

第三步：在结构中可以通过不同的使用方式，显示在页面中

层级透明度：

面试题：opacity、rgba、transparent

都可以设置透明的时候，几者的区别是什么？

1、 opacity是样式名，通过样式值的不同设置透明效果

rgba、transparent是样式值，必须跟在特定的样式名后，才可以设置透明效果

2、opacity可以给任何元素设置透明效果，就像在元素前面加一个模糊镜子一样

rgba、transparent只能给背景色，颜色等特定的元素设定

3、opacity具有继承性，rgba、transparent不具有继承

理解轮播图的三种写法：

<!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>
    <style>
      *{
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      #wrap{
        width: 590px;
        height: 470px;
        margin: 50px auto;
        border: 10px red solid;
        position: relative;
      }
      img{
        vertical-align: middle;
      }
      /* .imgs{
      } */
      .imgs>img{
        position: absolute;
      }
      .imgs>img:nth-child(4){
        z-index: 3;
      }
      .piont{
        position: absolute;
        left: 30px;
        bottom: 20px;
        z-index:99;
      }
      .piont>a{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgb(243,206,139);
        margin: 0 3px;
        border: 2px solid transparent;
        /* 背景色只到内容区，边框没有背景 */
        background-clip: content-box;
      }
      .piont>a:hover{
        background-color: #fff;
        border: 2px solid rgb(100,100,109);
      }
    </style>
  </head>
  <body>
    <!-- 
     手写轮播图两种写法（结合js）
       1、float
       2、定位方式
    -->
    <!--3、 swiper插件一种写法 （会引用，会修改即可） -->
    <!-- 轮播图 -->
    <div id="wrap">
      <!-- 图片 -->
      <div class="imgs">
        <img src="./img/2.jpg" alt="">
        <img src="./img/1.jpg" alt="">
        
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
      </div>
      <!-- 小圆点 -->
      <div class="piont">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
    </div>


  </body>

<!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>
    <!-- 拓展：利用锚点功能或者其他方式，纯css实现图片切换 -->
    <style>
      *{
        padding: 0;
        margin: 0;
        list-style: none;
        text-decoration: none;
      }
      #wrap{
        width: 590px;
        height: 470px;
        margin: 50px auto;
        /* border: 10px red solid; */
        overflow: hidden;
        position: relative;
      }
      img{
        vertical-align: middle;
      }
      .imgs{
        width: 2950px;
      }
      .imgs>img{
        float: left;
      }
      .piont{
        position: absolute;
        left: 30px;
        bottom: 20px;
      }
      .piont>a{
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgb(243,206,139);
        margin: 0 3px;
        border: 2px solid transparent;
        /* 背景色只到内容区，边框没有背景 */
        background-clip: content-box;
      }
      .piont>a:hover{
        background-color: #fff;
        border: 2px solid rgb(100,100,109);
      }
    </style>
  </head>
  <body>
    <!-- 
     手写轮播图两种写法（结合js）
       1、float
       2、定位方式
    -->
    <!--3、swiper插件一种写法 （会引用，会修改即可） -->
    <!-- 轮播图 -->
    <div id="wrap">
      <!-- 图片 -->
      <div class="imgs">
        <img src="./img/1.jpg" alt="">
        <img src="./img/2.jpg" alt="">
        <img src="./img/3.jpg" alt="">
        <img src="./img/4.jpg" alt="">
        <img src="./img/5.jpg" alt="">
      </div>
      <!-- 小圆点 -->
      <div class="piont">
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
        <a href="#"></a>
      </div>
      <!-- 上一张下一张 -->
      <div>
        <span></span>
        <span></span>
      </div>
    </div>


  </body>
</html>