我也要用
+ CSS
null
王佳斌
13191835106
-
原创 CSS - 移动端容器背景大图片自动适应屏幕
前言有时候，我们希望容器背景大图片自动适用容器宽高，均匀平铺在页面，几行 CSS 代码即可搞定。实现给父容器设置即可。.view{ background-image: url(x.jpg); background-repeat: no-repeat; background-position: center; background-size: cover;}...2021-03-11 15:16:22
777
1
-
原创 CSS - 炫酷Canvas动画动态效果及鼠标效果背景（无需图片）
效果图总计 8 个，大概效果如下。简介页面除了主要功能非常干净整洁。适合在 PC 页面，做首页或登录页的炫酷动态效果大背景，无需一张图片。使用方法Gitee: https://gitee.com/wangjiabin-x/h5Canvas直接 克隆项目到本地，然后导入项目运行起来。...2021-02-01 13:36:50
273
0
-
原创 CSS - H5 页面禁止页面上拉下拉及滚动
前言开发 H5 页面时，我们需要将页面固定住禁止上拉下拉及滚动，网上很多方法，多数是 JS 来判断滚动条来实现。实现我推荐使用 CSS 实现，几行代码就能达到同样的效果。/* 在根节点加入以下代码 */body{ height: 100%; width: 100%; position: fixed; top: 0; left: 0;}...2021-02-01 12:52:11
463
0
-
原创 CSS - 改变 input 输入框 placeholder 的字体颜色大小
前言该方法只适用于 pc 端，移动端无效。代码input::-webkit-input-placeholder { /* WebKit browsers */ font-size:14px; color: #333;} input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size:14px; color: #333;} input:-ms-input-placeholder {2021-01-30 23:30:30
429
0
-
原创 CSS - 让图文不可复制
前言这种方式只能防止电脑小白，否则无论如何都能拿走你的图片或文字。有时候，我们并不想让页面或者某一容器内的文字或图片不可选中和复制，5 行代码即可搞定。整个页面无法选中和复制body { -webkit-user-select: none; -ms-user-select: none; -moz-user-select: none; -khtml-user-select: none; user-select: none;}某一区域内无法选中和复制div { -webkit-2021-01-30 23:25:00
393
1
-
原创 CSS - 左右摇曳摆动动画（无限循环）
效果图代码@-webkit-keyframes demo{ 10% { transform: rotate(15deg); } 20% { transform: rotate(-10deg); } 30% { transform: rotate(5deg); } 40% { transform: rotate(-5deg); } 50%,100% { transform: rotate(0deg); } }/* 使用2020-12-28 15:18:13
872
1
-
原创 CSS - 呼吸灯效果动画（淡隐淡出效果）
效果图只是简单的呼吸效果，您按照需求自己拓展即可。代码@keyframes light{ from{ opacity: 1; } to{ opacity: 0.2; } }使用.view{ animation-name: light; animation-duration: 1s; animation-timing-function: linear; animation-iteration-count: in2020-11-28 12:59:52
661
0
-
原创 CSS - 元素旋转动画（360度转圈）
效果图代码@keyframes rotate { 0%{-webkit-transform:rotate(0deg);} 25%{-webkit-transform:rotate(90deg);} 50%{-webkit-transform:rotate(180deg);} 75%{-webkit-transform:rotate(270deg);} 100%{-webkit-transform:rotate(360deg);}}使用/* turn2020-11-26 11:25:53
940
0
-
原创 CSS - 利用 vertical-align:middle 垂直居中元素容器
前言以前总是以为 vertical-align 与 text-align 是同样的道理，一个是垂直居中，一个是水平居中。vertical - alignvertical-align 属性设置元素的垂直对齐方式，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐，允许指定负长度值和百分比值。这会使元素降低而不是升高，在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。【第一种用法】： 先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果2020-08-02 19:35:46
2417
3
-
原创 CSS - 容器背景 10 种颜色渐变Demo（linear-gradient()）
语法background: linear-gradient(direction,color-stop1,color-stop2,...);direction：用角度值指定渐变的方向（或角度）。color-stop1,color-stop2,...：用于指定渐变的起止颜色。注意：至少需要两种颜色。第一个background: linear-gradient(to left,#d3959b,#bfe6ba);to left 设置渐变 从右到左，相当于 270deg。第二个back2020-07-31 20:07:28
3600
0
-
原创 CSS3 - 文本超出隐藏显示省略号（单行 / 多行）
单行如果实现单行文本的溢出显示省略号（…）应该都知道用 text-overflow:ellipsis 属性来，当然还需要加宽度 width 属来兼容部分浏览。/* 注意需要给width 注意还需要把容器变为块级元素(因为需要给宽度) */overflow: hidden;text-overflow:ellipsis;white-space: nowrap;效果图：适用范围：因使用了 WebKit 的 CSS 扩展属性，该方法适用于 WebKit 浏览器及移动端。注意事项：Lis2020-07-25 19:15:28
2403
8
-
原创 CSS 将导航栏固定在窗口的顶部(fixed)
将 header / footer 固定住。<body><div class="header">header</div><div class="main">main</div><div class="footer">footer</div></body> .header{ position: fixed; top:0; width: .2020-07-10 17:15:54
2162
0
-
原创 CSS让子容器超出父元素（子容器悬浮在父容器效果）
前言有时候，我们需要如下图这样一个悬浮效果需求：实现在标准的正常的情况下，只能使用 绝对定位 来完成。第一步：父容器定位设置为 relative（相对定位）。第二步：子容器定位设置为 absolute（绝对定位）。<div id="a"> <div id="b">我要浮出去！</div></div>#a{ width:400px; height:100px; background:rgb(0, 0, 0); p2020-07-06 22:56:06
3216
5
-
原创 让一个div居于页面正中间
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div居于页面正中间</title> <style type="text/css"> *{ ...2020-03-13 13:49:44
3427
8
-
原创 reset.css
/* Clear the default style */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q...2019-05-05 20:23:52
8316
2
-
原创 CSS字体：Webfont在线字体与外部字体及操作系统预装字体使用指南
前言熟知，从HTML4时代把图标做在一张图上使用css background来提高页面加载速度到“扁平化UI”趋势的到来，再到“手机UI”简洁化设计的大浪潮的席卷下，使用字体库变得更加广泛，各种字体库层出不穷，并且网站拥有一套精美的字体，也是开发关键因素之一，网站风格与字体风格的配合相当重要。关于字体，使用字体加密技术，会再一定程度上反爬虫技术，一些关键数据不会被轻易的爬取。本文介绍和通过d...2019-06-16 16:51:22
6129
0
-
原创 float浮动子元素后导致父元素无高度(0)解决方法
前言float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。使用float左浮动后，元素便脱离了...2019-07-14 19:07:18
4512
0
-
原创 css颜色代码大全
#000000 #2F0000 #600030 #460046 ...2019-06-30 14:39:25
11192
3
-
原创 web开发规范 - css书写规范
基本原则CSS样式可细分为3类：自定义样式、重新定义HTML样式、链接状态样式。样式为设计师自定义的新 CSS 样式，影响被使用本样式的区域，用于完成网页中局部的样式设定。样式名 “.”+“相应样式效果描述的单词或缩写”例：“ .shadow ”文字样式样式名“.no”+“字号”+“行距”+“颜色缩写”例：“ .no12 ” 、“ .no12-24 ”义HTML样式为设计师重新定义...2019-06-30 16:13:30
5860
0
-
原创 web开发规范 - 文件命名规则
前言文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。HTML命名原则引文件统一使用index.htm index.html index.asp文件名...2019-06-30 15:29:33
6472
0
-
原创 巧记复合属性margin/padding四个方向
padding复合属性：padding:上 右 下 左;看完四个方向后，幻想一个钟表，指针正在按照顺时针走。上右下左，这不就是padding四个方向吗。2019-07-04 20:01:04
6181
0
-
原创 css3 - 设置字体间距
前言今天偶然发现，提到字体间距缩减问题大脑模糊没有头绪，这里记录一下，巩固基础。设置字间距letter-spacing属性增加或减少字符间的空白（字符间距）。该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。注意：允许使用负值，这会让字母之间挤得更紧。<p>这是正常的字符间...2019-07-04 19:46:17
22711
0
-
原创 关于css兼容性问题与实践方案
标识区别区别IE6,IE7,IE8,FF。IE都能识别* ; 标准浏览器(如FF)不能识别*；IE6能识别*，但不能识别 !important; IE6在样式前面加_IE7能识别*，也能识别!important;IE8能识别\ 9 例如：background:red \9;firefox不能识别*，但能识别!important;（1）IE6和firefox的区...2019-06-30 17:45:39
3740
0
-
原创 css3基础巩固 - 简易导航栏(附详细注释)
<!DOCTYPE html><htm><head> <meta charset="UTF-8"> <title>demo</title> <!-- reset.css|清除默认样式 --> <!-- <link rel="stylesheet" href="res...2019-07-08 21:08:42
2762
0
-
原创 CSS3 - 自定义cursor鼠标形状
语法cursor:url()/* 相对定位/绝对定位均可以 */cursor:url(icon/demo.cur)注意事项IE6也支持cursor属性的URL值，然而，IE只支持CUR和ANI的格式。IE不支持CSS3的坐标。这时候光标图片将被忽略。Firefox1.5 (Gecko1.8), Windows and Linux和Safari3.0 (Webkit522-523)...2019-09-04 20:22:33
1613
2
-
原创 CSS3 - cursor取值鼠标形状大全
2019-09-04 19:59:11
1639
1
-
原创 CSS3 - filter(图像滤镜)
前言该函数为图片做一些视觉上的处理，fillter() 支持以下图像滤镜处理：语法描述none默认值，没有效果。blur(px)给图像设置高斯模糊。"radius"一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起， 所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。brightness(%)给图片应用一种线...2019-09-24 17:37:28
2081
0
-
原创 CSS3 - footer 固定在底部(无论页面多高始终在底部)
前言把 footer 区固定在底部，无论页面高度多宽，它始终在底部不会变，就像移动端的菜单一样。code<!DOCTYPE html><html><head><meta charset="utf-8" /><title>document</title><!-- css --><style&...2019-10-14 09:34:10
1794
0
-
原创 CSS "两行" 代码实现文字高斯模糊效果
文字高斯模糊段落文字进行模糊处理，demo如下。HTML：<h3>我是示例文字</h3>CSS：h3{ color: transparent; text-shadow: #111 0 0 5px;}body高斯模糊效果什么？body也可以？HTML：<body>...</body>CSS：body{ c...2019-11-17 17:01:36
2547
0
-
原创 CSS3选择器示例大全(元素选择符、关系选择符、属性选择符、伪类选择符、伪对象选择符)
一、元素选择符(Element Selectors)其中，常用的选择符有 ID选择符(#name) 和 类选择符(.name)，另两种了解即可。1. 通配选择符（*）描述：选定所有对象。<style>/* 选定页面所有元素(含body/html) */*{ color:cadetblue;}</style><h1>title</...2019-12-12 11:21:18
2620
1
-
原创 CSS简介代码实现表格(table)只有横线没有竖线的效果，一个简约卡片化精美的数据表格(类似Bootstrap表格)
实现效果简单来说先设置 table 的 border-collapse:collapse，把表格整体边框取消。然后设置 table,th,tr,td 底部边框线即可。HTML：<table> <tr> <th>编号(ID)</th> <th>名称(Name)</th> <...2019-11-23 21:36:37
5075
1
-
原创 CSS3中input(checkbox)复选框无法更改背景颜色等其他样式解决办法
解决方法选择器选中你的DOM，然后加入以下代码：input[type="checkbox"]{ -webkit-appearance:none;}2019-11-22 20:45:49
3075
0
-
原创 CSS设置盒子容器(div)高度(height)始终为100%
https://www.cnblogs.com/xie-xiao-chao/p/8078648.html2019-11-28 18:09:42
4614
0