CSS
肉酱
这个作者很懒,什么都没留下…
展开
-
解决谷歌浏览器中的input背景色默认是黄色
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important;} 去除 input 焦点 边框 outline:none;原创 2018-07-26 21:23:28 · 1904 阅读 · 0 评论 -
CSS实现背景透明,文字不透明,兼容所有浏览器
来源:http://www.cnblogs.com/PeunZhang/p/4089894.html#solve11.11是公司成立的日子,16岁啦,我呢3岁半,感谢公司给了这样一个平台,让我得以学习和成长,这里祝愿公司发展越来越好~进入主题,每年11月11号是光棍节,产生于校园,本来只是一流传于年轻人的娱乐性节日,以庆祝自己仍是单身一族为骄傲,而如今是各大商家以脱光为由打折促销的时期,成...转载 2016-06-07 16:11:16 · 23848 阅读 · 1 评论 -
省略超出文章部分 超出部分加“…” 展开收起
方法一:加CSS样式text-overflow:ellipsis;overflow:hidden;white-space:nowrap;方法二:js获取字数$(document).ready(function(){ var absStr = ""; var len=$("#articleAbstract").text().length; if($("#articleAbs...原创 2016-06-14 17:07:33 · 1762 阅读 · 0 评论 -
复选框与文字对齐的问题
来源:http://www.zhangxinxu.com/wordpress/2009/12/checkbox%E5%A4%8D%E9%80%89%E6%A1%86%E7%9A%84%E4%B8%80%E4%BA%9B%E6%B7%B1%E5%85%A5%E7%A0%94%E7%A9%B6%E4%B8%8E%E7%90%86%E8%A7%A3/ 完整代码如下:<style ty...原创 2016-06-28 20:01:31 · 316 阅读 · 0 评论 -
css改变复选框样式
input[type="checkbox"]{ -webkit-appearance: none; top: 5px; float: left; position: relative; vertical-align:middle; margin-top:0; background:#fff; border:#999 solid 1p...原创 2016-06-29 14:58:38 · 1234 阅读 · 0 评论 -
CSS定位中的必须深究的常用技法
[css] view plain copy print?<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);"> </span><span style="font-family: Arial, Helvetica, sans-...转载 2016-07-10 11:50:34 · 346 阅读 · 0 评论 -
css中display:inline,display:block;display:inline-block; 区别
display:inline; 内联元素,简单来说就是在同一行显示。display:block; 块级元素,简单来说就是就是有换行,会换到第二行。display:inline-block; 就是在同一行内的块级元素。说概念太模糊,来个真实案例吧。<a href="#" style="display:inline;width:100px;height:100px;background:#ccc...转载 2016-08-12 14:54:11 · 425 阅读 · 0 评论 -
css制作向下的三角形
利用border,需要成角的那边设置了宽跟颜色,它的2个邻边设置了透明度,然后通过调整宽度来确定三角形的角度、边长。.arrow_down { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top:...原创 2016-09-01 10:02:56 · 4513 阅读 · 0 评论 -
你所不知的 CSS ::before 和 ::after 伪元素用法
CSS 有两个说不上常用的伪类 :before 和 :after,偶尔会被人用来添加些自定义格式什么的,但是它们的功用不仅于此。前几天发现了 Creative Link Effects 这个非常有意思的介绍创意链接特效的页面,里面惊人的效果大量使用到的特性除了 transform 属性进行变形之外,就是接下来要介绍的这两个伪元素了。Creative Button Styles ...转载 2017-03-30 10:14:29 · 259 阅读 · 0 评论 -
CSS样式中字体大小,建议font-size使用em
转自:http://blog.csdn.net/u010874036/article/details/51582241 在如今这个提倡可用性设计以及用户体验设计的网络时代,CSS也是要一同参与其中的。大部分人在CSS代码编写中总是先对整体定义字体尺寸,中文情况下一般为12px,而其实这样以来在通过IE顶部菜单中的“察看-文字大小”设置已无任何作用。对字体感觉太小的浏览者而言无疑是种很不好的...转载 2017-06-29 16:59:12 · 2381 阅读 · 0 评论 -
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术
转自:http://blog.csdn.net/freshlover/article/details/11579669 Ⅰ.绝对定位居中(Absolute Centering)技术 我们经常用margin:0 auto来实现水平居中,而一直认为margin:auto不能实现垂直居中……实际上,实现垂直居中仅需要声明元素高度和下面的CSS:[css] view plain c...转载 2017-07-07 14:42:34 · 368 阅读 · 0 评论 -
去掉输入框type为number时的上下箭头
/* 谷歌 */input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}/* 火狐 */input[type="number"]{-moz-appearance: textfield;} <input...原创 2018-06-13 14:44:20 · 1312 阅读 · 0 评论 -
使用原生js和css实现下拉框
因为原始select的option默认样式无法被改变,自己试着写了一个下拉框,应该还有更好的办法,以后再总结,代码如下: html<ul class="select"><li class="drop-down" onclick="selectShow()"><span id="reasontxt" class="原创 2018-06-13 15:03:45 · 8429 阅读 · 1 评论 -
使用CSS修改HTML5 input placeholder颜色
.moneyBox input::-webkit-input-placeholder { /* WebKit browsers */color: #F22E00;}.moneyBox input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #F22E00;}.moneyBox input::-moz-plac...原创 2018-06-13 15:11:42 · 3114 阅读 · 0 评论 -
CSS3实现三角步骤条
html: <div class="stepBox clearfix lhh40 mt40"><div class="stepItem fl fs16 c_fff textc lhh40 active" style="width: 382px;"><i class="">1</i>&l原创 2018-06-13 18:19:15 · 2505 阅读 · 0 评论 -
css3实现锯齿边框(用于优惠券或邮票等)
<div class="sawtooth-bor"><div class="pt10 bor_r_dashed clearfix pr10 pb8 flex-item pl10 bg-cffb937"><h3 class="fs36">&yen;50</h3><div class="fs原创 2018-06-25 11:19:44 · 10981 阅读 · 0 评论 -
移动端兼容性问题
简单记录一下平时遇到的兼容性问题:1.ios8及以下不支持flex布局解决:safari使用webkit内核,在相关属性上加webkit兼容。display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;align-items:center;-w...原创 2018-07-10 15:30:27 · 983 阅读 · 0 评论 -
CSS文件及样式命名规范
CSS技巧:规范的css命名有利于段对的协作和日后的维护,以及代码的重用,既然有诸多好处,下面整理一份CSS文件和样式命名规范,仅供参考。一、CSS文件及样式命名1、CSS文件命名规范全局样式:global.css;框架布局:layout.css;字体样式:font.css;链接样式:link.css;打印样式:print.css;2、CSS样式命名规范本人建议...转载 2016-05-17 17:34:44 · 686 阅读 · 0 评论