用css3做一个关闭icon,
Posted anthonyliu
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用css3做一个关闭icon,相关的知识,希望对你有一定的参考价值。
1. 用css3做一个关闭icon
html代码:
<div class="nav-icon"> <div>合作机构授权<span class="close"></span></div> </div>
css3代码:
.nav-icon{ position: relative; padding: 24px 0; background:#ffffff; width: 100%; font-family: PingFangSC-Regular; font-size: 18px; color: rgba(0,0,0,0.75); letter-spacing: 0; text-align: center; } .close { position: absolute; right: 10px; line-height: 20px; font-size: 30px; color: #C0C0C0; } .close::before { content: "\\00D7"; }
对于按钮中的叉按钮,用的是Unicode中的一种标识,以下这些也可以使用,标识 编码(16进制) Name
✖ \\2716 粗体乘法
✗ \\2717 交叉
✘ \\2718 粗体交叉
× \\00D7 乘法符号
⨯ \\2A2F 向量乘积
x \\78 小写字母
X \\58 大写字母
效果:
2.场景:文本一行右对齐,多行左对齐
.parent { flex:1; //左右撑大 overflow: visible; //都是可见的 white-space:normal //默认,可以换行 text-align:right //一行向右对齐 } .child { display:inline-block //一行显示行类,多行为块级元素 text-align: left; //多行左对齐 word-break: break-all; 文本打散,解决中英文,中文一行,英文一行 } <div class="parent"> <p class="child">显示的文本</p> </div>
3.sticky foot
在浏览器中,无论是内容超过一屏还是没有超过一屏,底下的按钮始终在页面底部而不是在浏览器底部。 可以通过一个div放在页面底部:
position:absolute;
width: 100%;
bottom:0;
4.利用伪类弹框居中
借助伪类设置一个行内元素,设置height=100% vertical-align: middle; 弹出框相对伪类元素的样式显示,可以让弹出框居中。
<style> .container{ position: fixed; top:0; left:0; bottom: 0; right: 0; background: rgba(0,0,0,.5); text-align: center; font-size: 0; white-space: nowrap; overflow: auto; } .container::after { content: \'hello world!\'; display: inline-block; height: 100%; vertical-align: middle; } .dialog { display: inline-block; width: 10rem; height: 10rem; vertical-align: middle; text-align: left; font-size: 14px; white-space: normal; background: #ffffff; padding: 10px; } </style> <body> <div class="container"> <div class="dialog"> 基于vertical-align的水平垂直居中 ---css精选 </div> </div> </body>
5.通过hover伪类来控制div的显示和隐藏
.mgf_tips_icons:hover .float_tips_area{ display:block; border: 1px solid #dedede; }
以上是关于用css3做一个关闭icon,的主要内容,如果未能解决你的问题,请参考以下文章