用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 大写字母

效果:

原文地址:https://www.cnblogs.com/liuyinlei/p/9065920.html

时间: 2024-10-09 19:07:09

用css3做一个关闭icon,的相关文章

用css3做一个3D立方体

首先看一下效果图 1.坐标系,要在脑海里先建立一个3D坐标系 如下图,看清楚x,y,z轴 2.html代码. <div class="container"> <!--包裹六个面的元素--> <div class="cube"> <!--立方体的六个面--> <div class="plane-front">前面</div> <div class="plane-

用CSS3的transform来做一个立方体

有一次上数据结构课老师布置了一个用队列的思想通过js和Html来做一个“跳舞配对”的网页,当时那个跳舞的部分用了css3里面transform的相关属性做了个个让图片无限翻转的效果,可能正是由于这个效果,让我想到了--可以不可以通过transform来弄个3D的立方体呢?后来慢慢的去做,遇到好多问题,下面把这次小尝试记录下,等到日后有灵感再去弄... 代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head>

CSS3做小三角形

上图是项目得到的图片,代码如下 1 <div class="welcome"> 2 <span>管理员:8888</span> 3 您的登陆时间是:2015/3/17 21:31:39 4 </div> 代码非常简单直接,就是一个登陆信息的展示. 前面的小三角形是用CSS3做的.CSS代码如下: 1 div.welcome:before { 2 content:""; 3 border-width: 10px 0 10

.Net MVC&amp;&amp;datatables.js&amp;&amp;bootstrap做一个界面的CRUD有多简单

我们在项目开发中,做得最多的可能就是CRUD,那么我们如何在ASP.NET MVC中来做CRUD呢?如果说只是单纯实现功能,那自然是再简单不过了,可是我们要考虑如何来做得比较好维护比较好扩展,如何做得比较漂亮.做开发要有工匠精神,不要只求完成开发任务,那样的话,永远停留在只是简单的写业务逻辑代码水平,我们要做有追求的程序员.本来这么简单的东西,我真是懒得写,但是看到即便是一些工作了好些年的人,做东西也是只管实现功能,啥都不管,还有些界面css样式要么就硬编要么就毫无规则的在页面中进行穿插,遇到要

做一个会PS切图的前端开发

系列链接 做一个会使用PS的前端开发 做一个会PS切图的前端开发 切图方法分类 PhotoShop从CS版本演变到现在的CC版本,切图功能发生了比较大的变化,我们可以把PhotoShop CS版本时的切图功能称为传统切图,而从PhotoShop CC版本开始PS提出了精准切图.所谓传统切图就是切图人员基本上都是自己分割图层切图,传统切图又分为全手工切图和参考线切图:现在CC版本提出的精准切图,切图人员可以依赖计算机把图层对象精确的切割出来,这样切割出来的图层肯定比传统切图切出来的精准度高.另一方

用CSS3做网页中的小三角,以及transition的用法

自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了,css3的部分也看过了,但是觉得讲得不太好,全部都是点到为止.无意中找到了传智播客的视频讲了一些css3的小技巧,今天就写一下用CSS3做网页中的小三角. 大致网上关于小三角的做法无非三种: 直接用背景图片,这个没什么好说的: 用块元素设置宽高都为0,三角的高用一条边框宽度,其他三条边框用dashe

使用Multiplayer Networking做一个简单的多人游戏例子-2/3(Unity3D开发之二十六)

猴子原创,欢迎转载.转载请注明: 转载自Cocos2Der-CSDN,谢谢! 原文地址: http://blog.csdn.net/cocos2der/article/details/51007512 使用Multiplayer Networking做一个简单的多人游戏例子-1/3 使用Multiplayer Networking做一个简单的多人游戏例子-2/3 使用Multiplayer Networking做一个简单的多人游戏例子-3/3 7. 在网络中控制Player移动 上一篇中,玩家操

如何做一个好的前端重构工程师

编者注:这里的"重构"指的是将设计图(比如PSD)转换为html + css + js. 用这个标题,是因为前一段时间组里有一个开放式讨论:怎样才算一个好重构? 其实,"好"与"坏"向来都是相对的,因为每个人眼中看待"好"与"坏"的标准不一样,不如从自身的角度考虑一下:如何做一个好重构? 先来看一个平时我们遇到的最多的两栏布局: 基本的html代码: 来看具体的CSS代码实现(忽略margin): 很明显在

做一个 App 前需要考虑的几件事

做一个 App 前需要考虑的几件事 来源:limboy的博客 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后,再感慨当初为什么没有多留点心. 完善的日志系统 以 iOS 为例,有时图方便,就直接用 NSLog 了,甚至线上都一直开着.一方面会影响性能,尤其是输出比较频繁的时候,另一方面也容易泄露敏感信息,所以一般做法是在 Release 模式下禁用 NSLog,比如在 pch 文件中,通过