前端
关注
分享
扫一扫
CSS,第三方图标
极客研究者
空余时间喜欢研究、钻研技术,入行不久的一枚菜鸟
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
HTML之超链接
超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置使用 a 标签来定义超链接属性：href 指定跳转的目标路径- 值可以是一个外部网站的地址- 也可以写一个内部页面的地址超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素Demo 01:<!DOCTYPE html><html lang="en"><head>...原创 2020-04-17 14:21:16 · 243 阅读 · 0 评论 -
HTML之meta标签
meta主要用于设置网页中的一些元数据，元数据不是给用户看charset 指定网页的字符集name 指定的数据的名称content 指定的数据的内容keywords 表示网站的关键字，可以同时指定多个关键字，关键字间使用,隔开<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"...原创 2020-04-17 12:16:49 · 140 阅读 · 0 评论 -
HTML之列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <!-- 列表（list） 1、铅笔...原创 2020-04-17 12:12:50 · 204 阅读 · 0 评论 -
HTML之实体
在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格在HTML中有些时候，我们不能直接书写一些特殊符号比如：多个连续的空格，比如字母两侧的大于和小于号如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）实体的语法：&实体的名字; 空格> 大于号< 小于号© 版权符号Demo:<!DOCTYPE html&g...原创 2020-04-17 12:09:37 · 185 阅读 · 0 评论 -
HTML之图片标签
图片标签用于向当前页面中引入一个外部图片使用img标签来引入外部图片，img标签是一个自结束标签img这种元素属于替换元素（块和行内元素之间，具有两种元素的特点）属性：src 属性指定的是外部图片的路径（路径规则和超链接是一样的）alt 图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示搜索引擎会根据alt中的内容来识别图片，如果不写alt属性则图片不会被搜索引擎所...原创 2020-04-17 12:07:22 · 1314 阅读 · 0 评论 -
HTML之语义化标签(3)
布局标签:header 表示网页的头部main 表示网页的主体部分(一个页面中只会有一个main)footer 表示网页的底部nav 表示网页中的导航aside 和主体相关的其他内容（侧边栏）article 表示一个独立的文章section 表示一个独立的区块，上边的标签都不能表示时使用sectiondiv 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素spa...原创 2020-04-17 11:59:42 · 206 阅读 · 0 评论 -
HTML之语义化标签(2)
块元素（block element）:在网页中一般通过块元素来对页面进行布局行内元素（inline element）行内元素主要用来包裹文字一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素块元素中基本上什么都能放p元素中不能放任何的块元素浏览器在解析网页时，会自动对网页中不符合规范的内容进行修正比如：标签写在了根元素的外部p元素中嵌套了块元素...原创 2020-04-17 11:57:12 · 215 阅读 · 0 评论 -
HTML之语义化标签(1)
在网页中HTML专门用来负责网页的结构所以在使用html标签时，应该关注的是标签的语义，而不是它的样式标题标签：h1 ~ h6 一共有六级标题从h1~h6重要性递减，h1最重要，h6最不重要h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1一般情况下标题标签只会使用到h1h3，h4h6很少用标题标签都是块元素在页面中独占一行的元素称为块元素（block e...原创 2020-04-17 11:54:28 · 144 阅读 · 0 评论 -
表格
Html中的表格如Excel中的表格一样。Table 01:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&...原创 2020-04-17 10:52:10 · 294 阅读 · 0 评论 -
form表单
Demo 01:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...原创 2020-04-17 10:46:50 · 238 阅读 · 0 评论 -
网页的简单布局
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...原创 2020-04-17 00:35:30 · 223 阅读 · 0 评论 -
Html之行内元素与块元素
块元素:在网页中一般通过块元素进行布局行内元素:主要用来包裹文字以及其他行内元素一般情况下,块元素放行内元素,而不会在行内元素内放块元素块元素基本上什么都能放p元素内不能放任何块元素浏览器在解析网页时,会自动对网页中不符合规范的内容进行修正比如:标签写在了根元素的外部p元素中嵌套了块元素根元素出现了除head和body外的子元素<!DOCTYPE html><...原创 2020-04-16 21:57:05 · 172 阅读 · 0 评论 -
CSS之文档流
文档流:网页是一个多层的结构,一层叠一层通过CSS可以为每层设置样式作为用户来说,只能看到最顶层我们所创建的元素都在文档流中进行排序元素主要有两种状态:1.在文档流中2.在文档流中(脱离文档流)元素在文档流中的特点:1.块元素:会在页面中独占一行默认宽度是父元素的全部(会把父元素充满)2.行内元素:不会独占一行,一行满了自动换行行内元素的默认宽度和高度都是被内容撑开Dem...原创 2020-04-16 21:54:35 · 163 阅读 · 0 评论 -
Less的入门使用(1)
Less的入门使用：在编写网页代码,调样式时,我们一般使用CSS去处理调整style,但发现实际上都是些没有什么逻辑的代码,也不好维护。其实拓展性也不好,比如有一个值在整个网页中会多个使用,css提供自定义属性可以解决,但是兼容性不好,有的浏览器不支持Demo:<!DOCTYPE html><html lang="en"><head> <...原创 2020-04-16 21:08:08 · 183 阅读 · 0 评论 -
在网页中使用fontawesome图标库
图标字体:在网页中经常需要使用图标,可以通过图片引入图标但图片本身大小比较大,不好控制 在使用图标时,可以将图标直接设置为字体处理 fontawesome图标字体类库的使用 1.下载解压后 2.将css和webfont两个文件下复制到当前项目下(位于同一级目录下) 3.将all.css引入到当前网页 4.使用图标字体 直接通过...原创 2020-04-12 11:41:31 · 961 阅读 · 1 评论 -
CSS雪碧图的使用
CSS 雪碧图应用原理：使用PS将多个小图标合并到一张图片上,然后通过设置background-position来切换,不同的图标,这样图片会同时加载到网页中,有效的避免出现闪烁的问题。 雪碧图的使用步骤： 1.确定要使用的图标 2.测量图标 3.根据测量结果创建元素(元素的宽高为图标的宽高) 4.将雪碧图片设置为元...原创 2020-04-09 16:39:21 · 562 阅读 · 0 评论 -
HTML+CSS 创建京东导航栏
使用HTML+CSS 搭建京东首页导航栏,主要实现的功能:静态部分以及鼠标移入显示下拉列表信息位置和向下图标使用Font Awesome图标字体库<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co...原创 2020-04-08 17:47:16 · 5329 阅读 · 1 评论 -
网页中使用阿里图标iconfont
iconfont:是由阿里提供的图标库,开发者可以使用,这里可能会涉及到版权问题。商用的话,最好与作者联系沟通一下。Address:iconfont进入页面后,选择你想要的图标,然后加入到购物车:点击右上角购物车: 将图标添加到项目:会自动跳到我的项目:下载完解压缩后:我这里使用VS CODE演示,新建一个文件夹iconfont,把所有文件复制到此中,删掉两个demo文件:...原创 2020-04-07 13:03:05 · 1331 阅读 · 0 评论