css
文章平均质量分 85
dongsdh
少熬夜,多运动,记得笑
展开
-
动画css ---无限旋转
前言: 读取数据后,需要根据状态显示对应的图片 如果是状态为运行中,图片对应的icon图片需要沿中心点旋转起来.logo{ width:20px; height: 20px; background: red; -webkit-animation:haha1 .8s linear infinite; } @-webkit-key...原创 2018-08-11 20:39:24 · 53202 阅读 · 2 评论 -
当body出现或消失滚动条时,页面不会跳动
原创 2018-04-02 14:41:57 · 534 阅读 · 0 评论 -
reset.css
body{ line-height:1.4; color:#333; font-family:arial; font-size: 12px; } input,textarea,select{ font-size:100%; font-family:inherit; } body,form,div,ul...原创 2019-11-08 09:58:59 · 152 阅读 · 0 评论 -
css-背景图设置大小单位可以是百分比,或者px
前言:之前只用了background-size的百分比单位,用px单位不会失真,看项目具体情况了css .box { width: 300px; height: 300px; border: 1px solid #ddd; } .imgbox { width: 100%; height: 100...原创 2018-04-04 11:12:42 · 2436 阅读 · 0 评论 -
选中文本后的颜色和背景:默认是蓝底白字
前言:无意间看到这个小操作,这算什么交互cssp::selection{ color: green; background: red; }html<p>这是一段文本这是一段文本</p>原创 2018-04-17 15:08:12 · 1810 阅读 · 0 评论 -
实用的css代码
1,基于文件格式使用不同的样式a[href^="http://"]{ padding-right: 20px; background: red;}a[href$=pdf]{ padding-right: 20px; background: green;}<a href="http://www.baidu.com">这里是百度</a> <a href="...转载 2018-04-17 16:55:09 · 185 阅读 · 0 评论 -
是否展示》显示更多》按钮
前言:<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>Document</title> <script src="jquery.min.js">&原创 2018-07-11 11:25:18 · 374 阅读 · 0 评论 -
position: sticky;固定头部的导航(配合top值使用)
前言:固定头部的导航<!DOCTYPE html><html style="height: 100%"><head> <meta charset="utf-8"> <title>固定头部的导航</title> <style> .item原创 2018-07-05 21:09:41 · 2386 阅读 · 0 评论 -
内容垂直居中
前言:.container { height:200px; display: table-cell; vertical-align: middle;}用height而不用line-height的方式好处是,不会把.container里面的内容行高撑高而是把.container里面的所有内容看成是一个整体,让他上下居中.container { min-height: ...原创 2018-07-06 16:39:22 · 662 阅读 · 0 评论 -
空心字
前言:有点意思<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <style> p{ text-shadow: 0 0 2px #000; color: #fff; } </style>&原创 2018-10-11 10:53:39 · 848 阅读 · 0 评论 -
不同链接加载不同模块
前言:不同链接加载不同模块,根据地址栏参数的不同<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <title>Document</title></head><body原创 2018-11-14 16:47:06 · 205 阅读 · 0 评论 -
html引入阿里巴巴图标
前言: 用第三方图标库,我觉得比较方便的就是可以很方便的替换颜色,图标也是矢量的,不会拉伸失真 不用设计人员再单独做雪碧图或其他操作了1,先搞点事情,在阿里巴巴矢量图标库网站首页,搜索自己想要的图标https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.22,搜索之后,...原创 2019-01-16 11:01:09 · 5850 阅读 · 2 评论 -
横向箭头菜单
前言:横向箭头菜单<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>menu</title> <style type="text/css"> *{margi...原创 2019-07-04 10:45:37 · 564 阅读 · 0 评论 -
利用css实现鼠标经过元素,下划线由中间向两边展开
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>鼠标移入下划线展开</title><style type="text/css">#underline{转载 2018-04-04 10:51:17 · 2983 阅读 · 0 评论 -
纯css导航栏下标线跟随效果
前言:看着效果不错,仿做了一下,其实就是c3动画移动div伪装的下边框线主要:li的结束标签与第二项的li开始标签不要有空格及换行,消除间隙css* { box-sizing: border-box; } * { margin: 0; padding: 0; } #main { position: relative; ...原创 2018-04-04 10:38:58 · 2181 阅读 · 0 评论 -
选项卡切换(可优化使用下标)
html <header> <div id="aa" class="blo">1111</div> <div id="bb">222</div> <div id="cc">333</div> <div id原创 2018-03-16 10:57:33 · 283 阅读 · 0 评论 -
通栏形式的划出栏显示(使用于导航菜单)
前言:用下标找导航栏对应的div,让其显示出来html <ul> <li></li> <li></li> <li></li> </ul> <header> <div> <p>1&原创 2018-03-19 15:45:37 · 786 阅读 · 0 评论 -
boder各种样式
原创 2018-03-19 15:43:28 · 732 阅读 · 0 评论 -
居中的套路(上下及左右居中)
html <div class="box"> <img src="1.png" alt="" /> </div>css *{margin:0;padding:0;} .box{ height:200px; width:400px; border:1px solid red; position:relative; } img{ po..原创 2018-03-16 10:55:43 · 317 阅读 · 0 评论 -
内边框直角,外边框圆角
原创 2018-04-02 14:41:35 · 1431 阅读 · 0 评论 -
尝试一种新的布局方式
前言:总结前辈的经验,尝试一种的新的布局方式,用定位后可省去多余的层级嵌套标签,方便实用对定位要点要熟悉css *{box-sizing: border-box;margin: 0; padding: 0;} .box{ position: relative; border: 1px solid #ddd; height: 82px; ...转载 2018-04-08 09:25:04 · 145 阅读 · 0 评论 -
精简版reset.css
前言:总结前辈的经验,写最精简实用的东西。相比于以前的reset重置,省去了太多东西有一些reset感觉还是少了一下,也许大神的想法和我们的不一样。我其实想站在别人的肩膀看得更远。比如1)a标签默认有下划线,这里是没有进行取消下划线的重置。比如2)input type=number时,框中还是有上下箭头按钮。比如3)。。。总结:按需求添加重置。也许需求不会有上面两种情况呢,对吧body{ ...原创 2018-04-08 10:05:19 · 2933 阅读 · 1 评论 -
background-position实现渐变过渡
前言:前辈的想法总是那么出乎意外,background-size:200%,背景色是两个单位的位置CSS* { margin: 0; padding: 0;}.box { max-width: 400px; height: 200px; background: linear-gradient(to right, red, green, #024); background-size:...转载 2018-04-08 13:52:17 · 1380 阅读 · 0 评论 -
background-color实现渐变过渡
css* { margin: 0; padding: 0;}.box { max-width: 400px; height: 200px; background: red linear-gradient(to right, rgba(0,255,0,0), rgba(0,255,0,.5)); background-size: 200%; transition: backgrou...原创 2018-04-08 14:02:06 · 33654 阅读 · 0 评论 -
opacity实现渐变过渡
css* { margin: 0; padding: 0;}.box { max-width: 400px; height: 200px; background: linear-gradient(to right, olive, green); position: relative; z-index: 0; }.box::before { ...转载 2018-04-08 14:06:03 · 6598 阅读 · 0 评论 -
:default伪类选择器只能作用在表单元素上,表示默认状态的表单元素。
前言 :default伪类选择器只能作用在表单元素上,表示默认状态的表单元素。且只有当checked为true时,:default伪类选择器才会起作用。选择其他项时,“推荐”的选项不变。根据需求,要维护的时候只需更换input的checked的属性,给予用户默认推荐。cssinput:default + label::after { content: '(推荐)';}html<p&...转载 2018-04-08 14:26:08 · 262 阅读 · 0 评论 -
loading...动画的新方式(\A换行,循环运动)
css* { margin: 0; padding: 0;}dot { display: inline-block; height: 1em; line-height: 1; vertical-align: -.25em; overflow: hidden;}dot::before { display: block; content: ...转载 2018-04-08 15:01:17 · 303 阅读 · 0 评论 -
纯css3自定义滚动条
前言:找到一个纯css3写的滚动条,以前总觉得,滚动条要用js插件写的,其实可以有更简单的方法。当内容超出容器时,容器会出现滚动条,其自带的滚动条有时无法满足我们审美要求,那么我们可以通过css伪类来实现对滚动条的自定义。首先我们要了解滚动条。滚动条从外观来看是由两部分组成:1,可以滑动的部分,我们叫它滑块2,滚动条的轨道,即滑块的轨道,一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式主要有...转载 2018-04-11 15:26:15 · 437 阅读 · 0 评论 -
css - 加载中...的动画
html <b>加载中</b> <a href=""><span>. .. ...</span></a>css a { text-decoration: none; display: inline-block; width: 12px; he原创 2018-03-15 12:01:48 · 334 阅读 · 3 评论