字体图标
1.阿里矢量图标库
加入购物车 —> 下载代码—> 登录–>下载
2:解压放入项目目录下 静态资源文件夹下 assets
3;
-
在头部通过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">3</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="" id="btn">  放大镜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%);
}
限制宽高，再在div后面加一个有透明度“…”
弊端 那就是 【未超出行的情况下也会出现省略号】 只能结合JS 进行优化该方法了。
注：
1、将height设置为line-height的整数倍，防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、兼容ie8需要将::after替换成:after。 只能结合JS 进行优化该方法了。
注：
1、将height设置为line-height的整数倍，防止超出的文字露出。
2、给p::after添加渐变背景可避免文字只显示一半。
3、兼容ie8需要将::after替换成:after。ie8 :after :before
扫一扫
4890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
