轻度喵症

2021-06-01 09:57 已编辑黄山学院前端工程师

关注

关于阿里矢量图标

字体图标

1.阿里矢量图标库

加入购物车 —> 下载代码—> 登录–>下载

2:解压放入项目目录下静态资源文件夹下 assets

在头部通过link标签引入阿里的图标样式文件 iconfont.css

unicode 引入

写到公共样式里就行
@font-face {
     
  font-family: 'iconfont';
  src: url('iconfont.eot');
  src: url('iconfont.eot?#iefix') format('embedded-opentype'),
      url('iconfont.woff2') format('woff2'),
      url('iconfont.woff') format('woff'),
      url('iconfont.ttf') format('truetype'),
      url('iconfont.svg#iconfont') format('svg');
}
.iconfont {
     
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

使用 : iconfont类是阿里字体图标官方类 不能删除 不能换位置
<span class="iconfont">&#x33;</span>

优点:兼容性较好兼容ie6+ 缺点:容易写错并且图标含义不清楚

font class方式

<link rel="stylesheet" href="./iconfont.css">
<span class="iconfont icon-xxx"></span>   写自己想要引入的类名即可

优点: 通过类名就能知道插入的图标的类型缺点:兼容性略差 ie8+

symbol方式

<script src="./iconfont.js"></script> 放在头部就行 路径换成自己的 <style> .icon {
     
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>  粘贴到样式文件里
<svg class="icon" aria-hidden="true">
  <use xlink:href="#icon-xxx"></use>
</svg>  插入图标 写入结构里 xxx换成引入的图标名字

优点:可以引入颜色图标缺点:兼容性太差 ie9+

盒子阴影属性

盒子阴影属性名称
box-shadow: 0px 0px  10px  0px #000 inset;

1: 水平方向的阴影大小  + 右侧阴影
2:垂直方向的阴影大小  + 下侧阴影
3:阴影模糊距离
4:阴影的尺寸
5:颜色
6:内外阴影  外阴影  outset  内阴影 inset

文字阴影

text-shadow: 
1: 水平方向的阴影大小  + 右侧阴影
2:垂直方向的阴影大小  + 下侧阴影
3:阴影模糊距离
5:颜色

  <style> .box {
   

        width: 300px;
        height: 300px;
        margin: 50px auto;
        background-color: red;
        box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.3)  ;
    }
    .tu ,.au{
   
        width: 400px;
        height: 200px;
        background-color: #21B169;
        color: #21B169;

        font-weight: 700;
        font-size: 80px;
    }
    .tu {
   
        /* 右侧和下侧 , 左侧 以及上侧 */
        text-shadow: 1px 1px 1px #000,-1px -1px 1px #fff;
    }
    .au {
   
        /* 右侧和下侧 , 左侧 以及上侧 */
        text-shadow: 1px 1px 1px #fff,-1px -1px 1px #000;

    }
    </style>

头部

logo 部分

 <div class="logo">
                <!-- h1可以加大权重  文字信息会被捕捉到  -->
                <h1>
                    小米商城 - 小米CC9、小米MIX 3、Redmi K20，小米电视官方网站

                    <a href="#">

                        <img src="./image/mi-logo.png" alt="">
                    </a>
                </h1>
</div>

利用字体大小为0以及缩进属性把文字隐藏掉

BUG 搜索按钮

1:<input type="submit"    value="&#xe63d;" id="btn">  &#xe63d; 放大镜unide编码 #btn:hover {
   
bgc:#ff6700;
color:#fff;
}


2:<a><i class="iconfont icon-fangdajing"></i></a>

鼠标样式

 /* corsor : default 默认 text 文本 help 帮助 问号 crosshair 十字架 瞄准 move 拖拽 pointer 小手 url('正常路径'),auto .jpg .ico .gif */

        cursor: url(./image/favicon.ico),auto;

小箭头(双伪元素法)

.box {
position: relative;
width: 400px;
height: 400px;
border:2px solid deeppink;
margin: 20px auto;

    }
.tran::after ,.tran::before {
    content: '';
    position: absolute;
    left: 50%;

   
    width: 0px;
    height: 0px;
  
    border-width: 50px;
    border-style:solid;
    border-color:transparent  transparent   red transparent;
}
.tran::after {
    top:2px;
    border-color: transparent  transparent   #fff transparent;
    
}


### 透明度属性

```css
    <style>
    .a {
        width: 200px;
        height: 200px;
        line-height: 200px;
        text-align: center;
       
        /* deeppink 255,20,147 */
        background-color: deeppink;
        font-size: 25px;


    }
    .box1 {
        background-color: rgba(255,20,147,0.3);

    }
    .box2 {
        opacity: 0.3;
    }
    
    </style>
</head>
<body>
    <p>背景透明,文字不透明</p>
    <div class="box1 a">我是文本</div>

    <hr height="3px" color="green">

    <p>背景和文字透明</p>
    <div class="box2 a">我是文本</div>
</body>
</html>

ie8浏览器兼容问题解决

ie9以上包含ie9支持透明opacity属性 ie8下不支持opacity支持ie专属滤镜

ie8下包含ie8不认识rgba这个属性就意味着在ie8下不能通过rgba()实现背景透明文字不透明解决方法如下 ⏬

1:文字和背景一起透明

其他浏览器: opacity:0.3 ; 0-1

ie的专属透明度滤镜

 filter:Alpha(opacity=30);alpha 透明度   0-100的整数
*zoom:1; // ie6 ie7触发haslayout 去支持透明滤镜

2:背景透明,文本内容不透明

?不能用rgba()属性因为ie8不认识这个属性

1:把文本和背景盒子分离开

原来的结构

<div>文字文字</div>

现在的兼容结构

<div><p>文字文字</p></div>

2:给父元素加静态定位 position:static 给子元素添加相对定位即可

    <style> .a {
   
          width: 200px;
          height: 200px;line-height: 200px;
          text-align: center;
          font-size: 30px;
         
      }
      .box1 {
   
          /* 不认识这个东西 只认识自己的透明滤镜background-color: rgba(255,20,147,0.3); */
         
          background-color: rgb(255,20,147);
          filter:Alpha(opacity=30);

          position: static;




      }
      .box2 {
   
          /* 其他浏览器而言的 */
          opacity: 0.3;
          /* ie8而言 */
          filter:Alpha(opacity=30);
          background-color: rgb(255,20,147);
      }
      .box1-text {
   
          /* 阻断父元素透明度传递给子元素 */
          position: relative;
      }
    
    </style>
</head>
<body>
    <!-- 透明: 
     背景透明 文本不透明   rgba(0-255,0-255,0-255,0-1)
     背景和文本同时透明  opacity : 0-1 1不透明 0完全透明
    
    -->

<p> ie8背景透明 文本不透明</p>

<div class="box1 a">
    
   <p class="box1-text">文字rgba</p> 

</div>




<p>ie8解决背景和文本同时透明  ie的透明度专属滤镜 </p>

<div class="box2 a">文本 opacity </div>
</body>
</html> filter:Alpha(opacity=30);alpha 透明度   0-100的整数

IE专属滤镜 filter:Alpha(opacity=x)

仅支持IE6、7、8、9，在IE10版本被废除
在IE6、7中，需要激活IE的haslayout属性(如：*zoom:1或者*overflow:hidden)，让它读懂filter:Alpha
在ie8中，设置了filter:Alpha的元素，父元素设置position:static(默认属性)，其子元素为相对定位，可让子元素不透明 ◀️背景透明文字不透明

ie6,ie7,ie8不支持rgba(0,0,0,.3)属性 ie9以上都支持

文本溢出处理

单行文本溢出

overflow: hidden; 
text-overflow:ellipsis;  //clip裁剪，ellipsis省略号
white-space: nowrap; //不换行

多行文本溢出

方法1:

display: -webkit-box; 
-webkit-box-orient: vertical; 
-webkit-line-clamp: 3; 
overflow: hidden;
text-overflow: ellipsis;

适用范围：
因使用了WebKit的CSS扩展属性，该方法适用于WebKit浏览器及移动端；

注：
1、-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
2、display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
3、-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

方法2

div {
    
    position: relative; 
    line-height: 20px; 
    max-height: 40px; 
    overflow: hidden; 
} 
div:after {
    
    content: "..."; 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    padding-left: 40px; 
    background: -webkit-linear-gradient(left, transparent, #fff 55%); 
    background: -o-linear-gradient(right, transparent, #fff 55%); 
    background: -moz-linear-gradient(right, transparent, #fff 55%); 
    background: linear-gradient(to right, transparent, #fff 55%);
}