Web前端技术分享：CSS菜单图标相关知识

CSS是一种用来表现HTML或XML等文件样式的计算机语言，它是Web前端人才必须要掌握的基础技能之一。想要学习Web前端，最开始的基础学习一定是CSS。接下来我就给大家简单分享CSS菜单图标相关知识。

一般在写网页的时候会遇到一些小图标，通常一些复杂的图标我们可以选择使用第三方图标库，但是一些比较简单的小图标，像这种（如下图）：

小图标就可以不用引入第三方图标库，通过CSS就可以轻易实现。那么我们一起来看一下怎么实现的。

其实这个图标可以使用border边框这个属性实现的，不同的border-style会展现不同的小图标。这个图标可以使用边框中double（双线）和solid（实线）这两个属性值来实现，我们来分析一下这个图标（如下图）：

上半部分可以使用double这个值，边框double（双线）中两根线及中间的距离可以写成等分的，比如写的双线宽度是9px，上半部分的第一根线分得3px，中间距离分得3px，第二根线分得3px。

下半部分可以使用solid这个值，小图标上这三根线的宽度是一样的，所以写的宽度要跟double双线等分的值是一致，第二根线和第三根线中间的空隙可以通过高度实现，代码如下：

/* CSS修饰 */

.menu{

border-top: double 9px #000;

border-bottom: solid 3px #000;

height: 3px;

width: 18px; /* 设置小图标的大小 */

}

咱们除了可以通过标签实现，也可以通过伪元素实现，代码如下：

/* CSS修饰 */

.menu:after{

content:’’;

display: block;

border-top: double 9px #000;

border-bottom: solid 3px #000;

height: 3px;

width: 18px;

}

CSS的主要用途是静态地修饰网页以及配合各种脚本语言动态地对网页各元素进行格式化，在日常工作中，HTML+CSS+JavaScript是Web前端人才工作的三大神器。而随着越来越多的人加入到前端行列以及企业招聘技能的提升，想要拿高薪我们需要更系统的学习和更丰富的实战。

Web前端技术分享：CSS菜单图标相关知识相关推荐

好程序员web前端技术分享媒体查询
为什么80%的码农都做不了架构师?>>> 好程序员web前端技术分享媒体查询什么是媒体查询媒体查询可以让我们根据设备显示器的特性(如视口宽度.屏幕比例.设备方向:横向或纵向 ...
达内html5是什么,Web前端工程师应该知道的HTML5相关知识有哪些
今天小编要跟大家分享的文章是关于Web前端工程师应该知道的HTML5相关知识有哪些?随着互联网技术的快速发展,人们对互联网的使用越来越大,对于界面和用户体验的要求越来越高.因此Web前端越来越火,前端 ...
Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
web前端技术分享：前端开发与后端开发的区别是什么？
相信很多人在技术岗都听到过前端和后端这两个职位,但是大部分人对前端开发与后端开发的区别是什么?并不是很清楚,下面小千就为大家详细的介绍一下两者的区别之处. web前端分享:前端开发与后端开发的区别是什 ...
千锋重庆web前端技术分享之前端VSCode常用插件
一.VSCode常用的插件vscode之所以被称为宇宙第一神器,其中丰富的插件功不可没,安装起来超级简单,给我们开发带来了极大的便捷. 注意,新手学习期间,不建议安装形形色色的插件,用到啥就安装啥.因 ...
web前端技术分享：常用JavaScript框架有哪些？
常用JavaScript框架有哪些?对于前端开发工作者来说,JavaScript绝对是绕不开的一个点,可以所前端的大部分动态交互都是由JS完成,所以学好JavaScript基本上你就成功了一半.下面小 ...
Web前端技术分享之前后端分离接口
随着互联网的高速发展以及IT开发技术的升级,前后端分离已成为互联网项目开发的业界标准使用方式.在实际工作中,前后端的接口联调对接工作量占Web前端人员日常工作的30%-50%,甚至会更高.接下来就给大 ...
web前端技术分享：web前端的求职前景好不好？
想要进军互联网行业,大部分人会选择web前端和web前端这两个技术,因为两者之间的发展前景是非常好的.下面我们就先来了解一下web前端的求职前景好不好? web前端的求职前景好不好?近几年的热门行业里 ...
web前端技术分享：详解模块化require 和 import的区别
在前端开发中,我们可以使用很多模块化的库来帮助我们更好的实现效果,有一些库的功能类似很多同学就不知道该如何选择,比如require和import,今天小千就给大家介绍一下两者的区别. 一.区别 1.r ...

Web前端技术分享：CSS菜单图标相关知识

Web前端技术分享：CSS菜单图标相关知识相关推荐

最新文章

热门文章