css
学习代表未来
这个作者很懒,什么都没留下…
展开
-
视频按钮动画
<!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-UA-Compatible" content="ie=edge"> <title>D.原创 2021-02-26 11:17:36 · 178 阅读 · 0 评论 -
animation实现视频按钮外扩
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> body { .原创 2021-02-02 14:19:26 · 112 阅读 · 0 评论 -
css伪元素使用背景图片
.layui-icon:before { content: ""; width: 27px; height: 27px; display: block; background: url("./2.png") no-repeat center; background-size: 27px 27px; }翻译 2021-01-07 16:21:13 · 3140 阅读 · 0 评论 -
vue 中引入字体
参考链接:https://blog.csdn.net/lilongwei4321/article/details/813647271. 下载所需要的字体2.在src下面创建font文件夹,把字体文件包放进去3.打开stylesheet.css 文件既可以看到引用的字体4.在App.vue中引入字体样式5.在reset.css 中设置所需要的字体(reset.css 在m...翻译 2019-03-21 18:23:05 · 688 阅读 · 0 评论 -
引入字体 .ttf 格式
1.下载所需要的字体,以 Poppins-Regular.ttf 为例2. 创建 fonts 文件夹,里面包含以下文件3. font.css 内容如下@font-face { font-family: 'Poppins-Regular'; /*重命名字体名 */ src: url('Poppins-Regular.ttf'); /*引入字体*/ font-weight: normal; font-style: normal; ...翻译 2020-08-14 14:05:00 · 2275 阅读 · 0 评论 -
css not()
input:not([type=checkbox]){ font-size: 16px; width: 100%; height: 48px; padding: 5px 35px 5px 12px; border-radius: 2px; border: 0; color: #282828;}翻译 2020-06-29 14:55:28 · 463 阅读 · 0 评论 -
HTML/CSS/JS编码规范
点此链接转载 2020-06-22 15:12:41 · 223 阅读 · 0 评论 -
css实现文字渐变
效果图如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...翻译 2020-04-23 17:24:24 · 7478 阅读 · 0 评论 -
css中伪元素before或after中content的特殊用法attr
1.cssli.volume .item{ position: relative; }li.volume .item:after{ content: attr(data-content); display: block; position: absolute; right: 0; top: 0; font-size:...翻译 2020-03-26 09:25:14 · 558 阅读 · 0 评论 -
css为元素添加多张背景图片
.select_language{ width: 121px; max-width: 100%; background:url("../images/select_black_icon.png") no-repeat calc(100% - 10px) center, url("../images/select_language_icon...原创 2020-03-18 20:47:14 · 1884 阅读 · 0 评论 -
checkbox默认样式修改
注:1)使用伪类元素对checkbox样式进行修改 2) 边框样式在before中修改,"\2713"为字符表勾选字符上代码:input[type="checkbox"] { width: 20px; height: 20px; display: inline-block; text-align: center; vertical-a...翻译 2020-02-24 17:04:26 · 806 阅读 · 0 评论 -
css动画
1.加载动画翻译 2020-01-22 17:14:31 · 126 阅读 · 0 评论 -
background-image实现文字下边带阴影或颜色
p{ display: inline-block; font-size: 20px; line-height: 1.5; margin: 0; color: #000; background-image: linear-gradient(180deg,transparent 70%,rgba(249...原创 2020-01-09 16:54:54 · 791 阅读 · 0 评论 -
HTML CSS整理笔记
点击链接后退页面:<a href="javascript:history.go(-1)">回到上一个网页</a>——修改placeholder提示的样式:1.除IE外通用写法 类名或标签名::placeholder {color: red;}2.加兼容前缀写法css超出一行显示省略号:给定宽度(width:100px)、超出隐藏(overflow:hi...转载 2019-11-22 15:44:44 · 444 阅读 · 0 评论 -
css实现实心三角形
div{ width: 0; height: 0; border-width: 10px; border-style: dashed solid dashed dashed; border-color: transparent red transparent transparent; }翻译 2019-07-22 15:08:07 · 504 阅读 · 0 评论 -
tab栏鼠标移入移出或点击选中,下边线缓慢显示或隐藏
1. css<style>ul{ margin: 0; padding: 0; font-size: 0;}li{ margin: 10px; padding: 10px; font-size: 18px; color: #000; line-height: 30px; display: inline-block; vertical-ali...翻译 2019-07-11 10:50:30 · 527 阅读 · 0 评论 -
css实现div垂直水平方向上居中
方案一:<style>.box{ display: -webkit-flex; display: -moz-flex; display: flex; -moz-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; ...翻译 2019-07-10 14:51:28 · 231 阅读 · 0 评论 -
jquery操作css属性
参考链接:http://www.w3school.com.cn/jquery/css_css.asp<script>$("p").css({ "color":"white", "background-color":"#98bf21", "background-position":"0 0", "font-family":"Arial", "font-si...翻译 2018-08-24 16:53:17 · 163 阅读 · 0 评论 -
css设置滚动条样式
参考链接:https://blog.csdn.net/zh_rey/article/details/72473284 https://blog.csdn.net/messicr7/article/details/702118201.css样式<style> .box { width: 300px; height: 200px;...翻译 2018-08-17 11:51:12 · 246 阅读 · 0 评论 -
vue中使用less
1.安装less 依赖npm install less less-loader --save2.即可vue文件中使用less操作css原创 2018-08-09 15:45:33 · 131 阅读 · 0 评论 -
改变input/textarea的placeholder颜色
第一种写法(针对所有的文本框)::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #909;}:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #909;}::-moz-placeholder { /* Mozilla Firefo...翻译 2018-12-29 15:34:39 · 3159 阅读 · 1 评论 -
css text-transform实现英文字母或拼音大小写转换
参考链接:http://www.divcss5.com/rumen/r309.shtml1.英文拼音的首字母大写text-transform:capitalize2.英文拼音字母全大写text-transform : uppercase3.英文或拼音单词字母全小写text-transform : lowercase...转载 2018-10-19 15:49:45 · 598 阅读 · 0 评论 -
jquery实现css属性transform的兼容的写法
$(".box").css({ "transform":"rotate(-2deg)", "webkitTransform":"rotate(-2deg)", "mozTransform":"rotate(-2deg)", "msTransform":"rotate(-2deg)", "height":"150px"})翻译 2018-10-15 16:00:31 · 8203 阅读 · 0 评论 -
css清除浮动的方法
1.给父盒子加clearfix类名,代码如下.clearfix:after { content: "."; /*加一段内容*/ display: block; /*让生成的元素以块级元素显示,占满剩余空间*/ height: 0; /*避免生成的内容破坏原有布局高度*/ clear: both; /*清除浮动*/ visibility: hidden; /*让生成的内容不...翻译 2018-10-26 13:17:20 · 112 阅读 · 0 评论 -
input类型为number时,去掉上下箭头
<input type="number"><style> input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; } input[type="number"]{ -moz...转载 2018-10-31 11:20:09 · 3127 阅读 · 0 评论 -
修改select下拉箭头 使用背景图片
select{ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background:url("../images/select_down.png") no-repeat calc(100% - 10px) center; /*为下拉小箭头留出一...翻译 2019-06-18 16:21:04 · 2767 阅读 · 0 评论 -
jquery+css 实现遮罩层
css代码<style type="text/css"> .modal{ position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); } .modal-content{ width: 100%; max-width: 500...原创 2019-06-10 10:29:31 · 460 阅读 · 0 评论 -
css 实现图图片旋转
<style>.box { width: 150px; height: 150px; background: url(login.png) no-repeat center center; background-size: cover; animation: rotate 2s infinite linear; -webkit-animation: rotate 2s ...翻译 2019-04-16 15:55:28 · 6201 阅读 · 0 评论 -
重写element-ui组件样式
注:在带scoped的style标签里面重写element-ui组件样式失效,可以使用 >>> 或 /deep/ 来解决 原因是scoped是当前组件的唯一标识,针对第三方组件(element-ui)的样式无效 1)css 可以使用 >>> 或 /deep/ (#form 是父级元素)<style scoped>#f...翻译 2019-07-03 17:05:11 · 5352 阅读 · 2 评论 -
a 标签换行
分两种情况一、a标签的内容是英文当内容过多的时候 ,如果是英文 不会造成换行,如果希望内容换行,在a标签的样式中加入word-wrap:break-word;二、a标签的内容是中文如果是中文会造成换行,如果不希望内容换行,在a标签的样式中加入;white-space:nowrap;...翻译 2019-04-11 11:49:47 · 7033 阅读 · 0 评论 -
css 解决文字不能被复制
解决方案body{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms-user-select:none;/*IE10*/-khtml-user-select:none;/*早期浏览器*/user-select:none;}user-select有2个值(none表示不能选中文本...翻译 2019-01-28 16:15:48 · 775 阅读 · 0 评论 -
css 实现箭头小三角
参考链接:https://www.cnblogs.com/monozxy/p/7903019.html带有边框的三角形如何实现呢这种就相当于两个绝对定位的无边框三角形叠加在一起为了代码简洁在非ie6下采用:before和after伪类,ie6下用样式名来实现,代码1.dom元素<div class="box sanjiao_border"> <!--i...翻译 2018-08-30 14:22:00 · 864 阅读 · 0 评论