![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端学习
发誓要奋斗的苑小姐
这个作者很懒,什么都没留下…
展开
-
网站变灰是如何实现的
在全国性的悼念活动,比如清明节、汶川地震周年悼念等,一些网站整体变灰如何实现的呢?话不多说,直接上代码:html{ filter: grayscale(100%);}下面,详细介绍下该 css 样式。filter,滤镜属性,是CSS3增加的新属性,用来更改元素的模糊和饱和度。该属性包含多种预设的滤镜函数,其中grayscale(amount) 函数是用来将图像转换为灰度图像,amount 用来值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到...原创 2020-05-13 11:22:36 · 250 阅读 · 0 评论 -
iview的Select组件远程搜索的BUG优化--以及JS函数节流的应用
1. 业务场景:模糊搜索姓名,点击选择2. 示例代码template:<Select @on-change='check' filterable remote :remote-method='fuzzySearch' :loading="loading1" placeholder='请输入姓名'> <Option v-for="item in...转载 2019-05-23 20:59:48 · 1213 阅读 · 0 评论 -
关于display样式、overflow样式、文档流、浮动、定位
一、显示与隐藏 1 通过display样式 - none隐藏 语法 - display:none; 特点 - 隐藏以后,元素原有的位置会被占用, 2 通过visibility - hidden隐藏 - visible显示(默认值) 语法 - visibility:hidden; 特点 - 隐藏以后,元素原创 2017-07-26 19:56:15 · 1352 阅读 · 0 评论 -
盒子模型补充
一、内边距(padding)*padding简写属性:设置四个方向的内边距。 * padding-top - 上内边距 * padding-right - 右内边距 * padding-bottom - 下内边距 * padding-left - 左内边距*作用:在实际开发中,可以利用a标签来做按钮的效果。二、外边距(margin)*marg原创 2017-07-26 19:45:05 · 264 阅读 · 0 评论 -
前端基础之三HTML元素分类
一、块元素:永远独占一行,即使他的长度很短。块元素作用是用来在页面中进行布局,一般情况下块元素可以包含内联元素或块元素,而内联元素不能包含块元素。 但是a元素特殊,可以包含任何元素,但是不能包含它本身。但是p元素不能包含任何块元素。1、div元素:对内容没有任何效果,没有任何语义,主要用于对页面进行布局。2、h1~h6、p、div二、内联元素(行内元素):只占用它本身的长度大小原创 2017-03-09 20:43:24 · 294 阅读 · 0 评论 -
前端基础之十---关于文字和颜色
1、涉及到的长度单位(1)px像素:这个是我们最常用的单位,我们屏幕就是一个一个像素点构成的,一个像素点就是一个像素。不同的屏幕一个像素的大小是不同的。(2)百分比:当设置一个百分比时,浏览器会自动根据其父元素的属性来计算大小。优点是,当父元素的属性发生改变时,子元素按照比例相应改变。 百分比相对的属性不一定(参考W3Cschool): 比如:改变子元原创 2017-04-10 17:13:39 · 3947 阅读 · 0 评论 -
前端基础十一 --- 盒子模型
1、盒子模型也称框模型,方便完成网页的布局。盒子分为四个部分:内容区:content 内容区的大小可以通过 width和height来进行设置,而整个盒子可见区的大小=内容区的大小+border 的大小+padding的大小内边距:padding边框:border:四条边三样式,所有样式都不能继承。 border有三个样式,可以通过一个属性同时原创 2017-04-16 20:46:28 · 233 阅读 · 0 评论 -
前端基础二CSS知识点
1、CSS 层叠样式表(Cascading Style Sheets)所谓层叠,可以将整个网页想象成一层一层的结构,层次高的覆盖层次低的。2、三种设置CSS样式的方法:(1)、可以在标签内部的style属性中设置样式,但是我们直接将样式编写到元素内部中,样式不能复用,而且维护性很差,一般开发中不会使用这种内联样式(也叫行内样式)。(2)、可以将样式写在head中的style标签中。原创 2017-02-27 10:33:14 · 240 阅读 · 0 评论 -
前端基础八之文本标签
当我们通过a的伪类为超链接设置样式时,它这些选择器的优先级都是一样的。这样就会带来一个问题,永远会优先显示靠下的样式。注意,编写a的伪类时,注意顺序。link>visited>hover>active原创 2017-04-09 10:56:34 · 513 阅读 · 1 评论 -
前端基础之九--列表
1、无序列表ul在ul两种使用li创建一个列表项。我们可以通过type属性修改列表项的项目符号格式。 无序列表的项目符号一般不使用,因为不同的浏览器下显示效果不同。 去掉无序列表的项目符号用 list-style:none常用:导航栏2、有序列表ol有序列表使用ol创建,列表项同样使用li.注意:有序列表和无序列表的区别就是有序列表使用有序的序号作原创 2017-04-10 10:14:55 · 296 阅读 · 0 评论 -
前端基础之六 伪类元素和伪类选择器
1、a的伪类案例:设置访问过的链接为红色,用户有没有访问过,我们可以通过浏览器的用户历史记录识别。(1)a:visited 设置已经访问过的链接的文字,但是只能为字体设置颜色,而不能设置其他样式。(2)a:link 表示没有访问过的正常的链接(3)a:hover 设置当鼠标移入到超链接上时,超链接的文字的状态(4)a:active 当鼠标点击超链接(但是不松开)原创 2017-03-10 09:59:56 · 385 阅读 · 0 评论 -
前端基础七之选择器补充
1、实际上所有的选择器都可以去组合使用,但是要注意的是,我们使用选择器越简单越好,浏览器在解析css选择器时他是按照从右向左的顺序去解析的,然后还要注意尽量避免使用 * 。2、css中的样式设置具有继承性。祖先元素的样式会自动应用到他的后代元素中.但是并不是所有的样式都具有继承性,比如,背景颜色就不能继承,他的默认值是transparent,表示透明。如下图原创 2017-04-09 10:13:42 · 251 阅读 · 1 评论 -
前端基础之五 元素关系及选择器
1、id和class:必须以字母开头,可以有数字。在前端开发中,编写css时,一般用class选择器,尽量避免使用id选择器。id选择器 #id 。 id是一个元素的唯一标识。class选择器 .class 。class属性用来为一个元素分组,页面中相同的class属性值可以出现多个,并且一个元素可以拥有多个class.2、标签中还支持一个属性,叫做title. 一原创 2017-03-09 21:36:00 · 328 阅读 · 0 评论 -
前端基础之四选择器分类
1、元素选择器:可以选中页面中所有指定的元素,语法:标签名{},如 p{}2、ID选择器可以根据id的属性值选中一个元素。语法:#id属性值{},如 #p1{}3、类选择器: 我们还可以为标签指定一个class属性,class属性用来为标签分类,class属性和id类似,但是class属性在页面中可以设置多个元素。 类选择器可以根据class属性,选取一组原创 2017-03-09 20:46:26 · 750 阅读 · 0 评论 -
前端基础一
1、HTML的注释不能嵌套,如以下格式不对: -->2、标签必须正确结束,要么成对出现(成对标签),要么就是自结束标签(单标签)。3、属性必须有值,且值必须加引号,可以是单引号或者双引号。例如:我是一个段落4、html中不区分大小写,但是所有的规范里都推荐我们使用小写。5、标签可以嵌套,但是不能交叉嵌套。如以下格式不对:我是color="red原创 2017-02-26 20:55:50 · 168 阅读 · 0 评论 -
前端小白奋斗之路开始了
一向对操作性的东西感兴趣,即使脑子不够使,但静下心来努力还是有希望的,那么,前端小白的奋斗之路就要开始咯。目前状况:html+css有点基础,但我觉得远远不够,并且做项目的时候缺乏经验,不容易想到简单规范的方法。另外,有接触过数据库和php,但是完全不扎实,只是很表面的东西。近期目标:(1)html+css还是要多学习、多练习,规范自己的代码格式。 (2原创 2017-02-26 09:58:34 · 552 阅读 · 0 评论