css
ColourfulTiger
这个作者很懒,什么都没留下…
展开
-
进度条制作
简单描述一下小例子:这个进度条是可以通过js控制的,即点击按钮触发函数,动态的改变百分比的值与进度条的状态。当超过100%时,不再响应,按钮禁用。html部分:<div class="progress-bar"> <div class='box'> <div class='clip' id="context"> ...原创 2018-09-30 16:06:14 · 1553 阅读 · 0 评论 -
css动画遮罩效果自上而下与自下而上
基本结构<div class="header"> <div class="inner"> <a href="#">标题栏</a> </div> </div>1、自上而下scss:被注释的部分是另外一种自下而上的情况。 .header { w原创 2018-09-07 12:40:19 · 3995 阅读 · 0 评论 -
多个css文件在同一个html中的执行顺序2
1、文件位置在head里面引入,无 !important 时 或 文件位置在body里面引入,无 !important 时 按照从上到下的顺序依次执行,同一样式会选择最后一个文件里面的渲染[就近原则]。 若想实现自己的样式最先,文件在head或body里面引入,都要放置在最后!2、文件位置在head里面引入,相关样式有!important时 或 文件位置在bo...原创 2018-09-03 10:14:06 · 3404 阅读 · 0 评论 -
引入style的位置在head里与在body里的区别1
在使用css的时候少不了会在某一html页面通过style标签写自己的样式,但是在html页面中将style的内容放置在head和body里面有什么区别呢?1、打开head里面的style,关闭body里面的style<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <...原创 2018-09-03 09:44:27 · 11331 阅读 · 0 评论 -
css 中 not选择器的探索
在使用css的时候,少不了接触伪类,而not这种选择器之前基本没有写过,在今天遇到后,就来和大家一起探索探索。1、案例1: <style> p{ color:#000000; } :not(p){ color:#ff0000; } </style> <div class="te...原创 2018-08-22 23:01:15 · 7960 阅读 · 0 评论 -
改变水平线hr的颜色
在使用hr的时候很容易误解为border就是水平线,改变border就能改变水平线的颜色,然而事实并不是这样的,要想改变水平线的颜色,要从下面的i几个属性出发:border:设置为none或者0px;height:给定一个高度,在水平线中指的是水平线有多粗;width:给定一个长度,即水平线大概有多长,占页面的多少;background-color:设置水平线的颜色。具体代码如...原创 2018-07-31 23:21:05 · 18560 阅读 · 0 评论 -
CSS中class的"."连着写的含义
在使用css的class属性中,我们写的最多的就是一个class 后面有多个属性值连接在一起,然后映射到具体的样式中去,例子:.btn .btn-one .btn-two 解释: 举例如下: <a class="btn btn-one btn-two">123</a> 各自写各自的样式: .btn...原创 2018-08-09 14:34:21 · 4247 阅读 · 0 评论 -
纯css改变复选框的默认样式
怎样使用css实现改变默认复选框的样式?效果及方法如下:1、未选中状态下左侧是默认样式,右侧的为设计的样式2、选中状态下实现原理:实现的最终目标,没有默认的checkbox存在,只有我们设计的最终效果样式存在,而且能够选中,未选中效果。1)隐藏原有的checkbox2)利用position,将设计的checkbox放置到原来默认的checkbox的位置上3)...原创 2018-07-29 20:36:11 · 1262 阅读 · 0 评论