css
子君不语
这是一个美丽的城市。有你们的地方就是家
展开
-
不固定宽和高的div 水平和垂直都居中
在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div没有固定的宽度高度的情况,我们就不能用margin,padding设置固定的距离了。这个问题让很多人头疼。而怎么样才能让这个div居中显示呢?其实这种情况解决的办法也是有很多种,转载 2015-07-29 11:07:43 · 10647 阅读 · 1 评论 -
点击输入框变色
//html 邮箱: text text-input-before" name="contact" placeholder="请输入您的邮箱">//css.row-input .text-input-before{ border: 1px solid #d7d7d7;}.row-input .tex原创 2016-01-06 09:36:09 · 1143 阅读 · 0 评论 -
父元素与子元素之间的margin-top问题(css hack)
给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,遇到此问题的朋友可以参考下本文或许会有意想不到的收获(转)。hack: 父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化。html代码: css样式:转载 2016-03-18 10:07:02 · 1363 阅读 · 0 评论 -
typeof 与instanceof
typeof和 instanceof常用来判断一个变量是否为空,或者是什么类型的。typeof 是一个一元运算,放在一个运算数之前,运算数可以是任意类型。它返回值是一个字符串,一般只能返回如下几个结果:number,boolean,string,function,object,undefined。我们可以使用 typeof 来获取一个原创 2016-04-01 10:35:16 · 233 阅读 · 0 评论 -
清除浮动
1.clearfix:after{ visibility: hidden; display: block; font-size: 0; content: '.'; clear: both; height: 0;}原创 2016-05-24 12:48:44 · 241 阅读 · 0 评论 -
css不确定宽度的水平居中
.myUl{clear:both; position:relative; left:50%; float:left; margin-bottom:2px;}.myUl li{ float:left; position:relative; left:-50%; margin-right:2px;}给父元素设置text原创 2016-04-19 16:30:15 · 2244 阅读 · 0 评论 -
float元素浮动后高度不一致导致错位的解决办方法
1、给父元素定义font-size:0; 浮动子元素定义需要的font-size, 再定义display:inline-block;vertical-align:top;转载 2016-04-19 17:00:49 · 11766 阅读 · 0 评论 -
纯CSS绘制三角形(各种角度)
纯CSS绘制三角形(各种角度)_基础教程_脚本之家 http://www.jb51.net/article/42513.htm转载 2015-07-24 17:07:50 · 737 阅读 · 1 评论 -
响应式布局图片处理
img { width: auto; max-width: 100%; height: auto; vertical-align: middle; border:0;}原创 2016-04-21 08:12:35 · 1850 阅读 · 0 评论 -
ie6及以下1px高的制作
1. 2. 3. 4.转载 2016-08-01 14:09:58 · 231 阅读 · 0 评论 -
左右两列式布局,等高同步
左右两列式布局,左侧高度根据右侧内容的增减与右侧保持一致//父类.box-a{ width: 1200px; background-color: #f4f4f4; overflow: hidden;}//左侧.side{ margin-bottom:-9999px; padding-bottom:9999px; floa原创 2016-01-06 09:30:22 · 1281 阅读 · 0 评论 -
多行文本溢出省略号
htmlfigcaption">You probably can't do it (currently?) without a fixed-width font like Courier. With a fixed-width font every letter occupies the same horizontal space, so you could probably count转载 2016-09-23 20:25:50 · 261 阅读 · 0 评论 -
div没有设置高度,背景颜色却无法显示
在设计网页时,设置了div为自动高度或不给height值,当div设置背景时在IE6可以显示背景颜色,但是IE7,8却不显示。解决办法如下:1、把height:auto;改成height:100%; overflow:hidden; 原理:IE6可以再不给高度的情况下自动识别div高度而IE7,8需要指定高度如果上述方法不行还有一种办法2、在div的转载 2015-07-29 11:06:51 · 6004 阅读 · 0 评论 -
多行截断
.ellip-line { /*禁止换行*/ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}.ellip-lines { overflow: hidden; text-overflow: ellipsis; word-break: break-all; display: -webkit原创 2017-03-20 11:28:40 · 420 阅读 · 0 评论 -
利用padding margin 布局
<div class="box"> <div class="left"></div> <div class="right"></div></div>.box{ padding-left:230px;}.left{ margin-left: -230px;}关于兼容后续补充原创 2017-05-17 10:03:59 · 228 阅读 · 0 评论 -
table制作
1.tbody滚动条<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>转载自·威易网CSS教程</title></head><body><table width="80%" border="1" cellspacing="0"> <转载 2017-06-23 16:31:15 · 379 阅读 · 0 评论 -
scroll滚动条美化
/自定义滚动条/ .scrollbar { overflow-y: auto; } .scrollbar::-webkit-scrollbar { width: 6px; background-color: rgba(217,217,217,0.3); } .scrollbar::-webkit-scrollbar-thumb { backgroun转载 2017-12-26 15:00:58 · 5610 阅读 · 0 评论 -
placeholder
.tag-filter-name input::-webkit-input-placeholder { /* WebKit browsers */ color:#999; font-size: 12px; } .tag-filter-name input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color:...原创 2018-06-25 11:13:48 · 273 阅读 · 0 评论 -
兼容ie8以下的圆角头像制作方法
html代码 css代码.user-img{ position: relative; float: left; width: 50px; height: 50px; border-radius: 50%;}.user-img img{ width:原创 2015-12-18 09:44:18 · 3085 阅读 · 0 评论 -
通过修改父类样式名。改变子类样式的
//html代码//css样式代码//jquery代码$('.exclusive-fixed').on('click', '.exclusive-fixed-le', function (e) { e.preventDefault(); var $this = $(this), $parent = $this.c原创 2015-12-18 11:16:20 · 2981 阅读 · 0 评论 -
弹窗,遮罩层样式
.mask{ position: relative; _position: absolute; top: 0; left: 0; width: 100%; display: none; background-color: #160128; opacity: 0.7; z-index: 100;}.al原创 2015-12-18 10:32:02 · 940 阅读 · 0 评论 -
收集小技巧
-webkit-user-selec t:none;禁止用户选中文字原创 2015-08-10 16:47:44 · 298 阅读 · 0 评论 -
table左右td下划线问题
在写table表格的时候,左侧的题目td不要求下划线,但是右侧的值td却有下划线,右侧下划线显示的时候,会把左侧td撑出一条白色底线,这时候只要把左侧line-height设置多一个像素即可原创 2015-07-30 08:12:28 · 3028 阅读 · 0 评论 -
如何让height:100%起作用
当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果。你知道为什么height:100%不起作用吗?而跟W3C的规范,百分比的高度在设定时需要根据这个元素的父元素容器的高度。所以,如果你把一个div的高度设定为height: 50%;,而它的父元素的高度是100px,那么,这个div的高度应该是50px。原创 2015-07-20 16:44:23 · 418 阅读 · 0 评论 -
css input[type=file] 样式美化,input上传按钮美化
我们在做input文本上传的时候,html自带的上传按钮比较丑,如何对其进行美化呢?同理:input checkbox美化,input radio美化是一个道理的思路:input file上传按钮的美化思路是,先把之前的按钮透明度opacity设置为0,然后,外层用div包裹,就实现了美化功能。代码如下:DOM结构: href="javascript:;"转载 2015-07-21 11:07:00 · 4923 阅读 · 0 评论 -
jquery模拟select
html代码 哈伦 四个 傻瓜 哈哈原创 2015-07-21 09:57:59 · 371 阅读 · 0 评论 -
空心,实心箭头制作(正方形的绝对定位实现)
#triangle-up { display:inline-block; width: 0; height: 0; border-left: 50px solid transparent; border-right: 50px solid transparent;原创 2015-08-05 11:29:16 · 643 阅读 · 0 评论 -
小三角不设置宽高-- 制作原理
Document/*css注释给一个盒子加上边框且有高度和宽度*/.box_1{width:50px; height:50px; border: 2px solid; border-color: #ADFF2F #BA55D3 #F4A460 #FF0000; }/*给当边框增大时*/.box_2{width:50px; height:50转载 2015-08-06 16:50:09 · 387 阅读 · 1 评论 -
导航中的小竖线--总结
对于那种小竖线在一级菜单左侧的处理方法方法一:!important;的应用首先对每一个li元素添加背景图片(小竖线),对于第一个(一般为首页)选项添加单独的类xxx,样式定为.xxx{background: none !important;}注释:所有被!important;标记的样式,即使后来被重写,浏览器也只会采用被标记的那一条(即原创 2015-09-15 17:20:14 · 6626 阅读 · 0 评论 -
css 雪碧图的总结
很早就知道这个技术,但是正是应用在最近为避免浏览器多次加载图片,我们把一些图片拼接在一起,应用background-position来设置背景图片的显示和更换(鼠标经过)以下为我正在学习应用的总结,个人见解和认知,有不正确的地请多多指教。1.必须为需要展现的图片设定大小;2.接下来我们来举个例子(如下图):你需要的两张图处于拼接图的最上面的左侧和右侧 .原创 2015-09-15 17:49:11 · 1203 阅读 · 0 评论 -
不固定图片垂直居中、多行文字垂直居中
/*这里的大小是根据高宽上限128像素图片设置的*/div{display:table-cell; width:1em; height:1em; border:1px solid #beceeb; font-size:144px; text-align:center; vertical-align:middle;} div img{vertical-align:middle;}转载 2015-07-17 14:12:50 · 294 阅读 · 0 评论 -
背景图铺满全屏代码
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='http://static.gcimg.net/i/201510/1jp1FLwtR4.jpg', sizingMethod='scale');原创 2015-11-12 14:45:35 · 1715 阅读 · 0 评论 -
校园招聘网站的开发记录
这是一个16年校园招聘网站,同样,做这网站的我们,也是今天六月份刚进公司的应届生,能接到这样的任务,是上级对我们的重视,和能力的肯定。在记录之前,有免不得要发第一个牢骚,这个项目开始的时候作为开发一员的我,居然直到流程到我这里的时候我才知道,我没有参与项目需求的讨论,直接拿到了效果图,让我很是忧伤啊,直接导致 中秋的时候不能回家还要在公司加班(额 虽然加班很正常啦)好吧原创 2015-10-10 11:24:58 · 560 阅读 · 1 评论 -
透明度继承问题
我透明了吗想在CSS3属性规则里rgba 已经可以设置实现父层透明,子层不透明了,知识CSS3 还不能兼容一些比较老版本的浏览器,我们要一些处理://样式.father{height:400px;background:rgba(0,0,0,0.6)!important;background:#000;filter:Alpha(opacity=60);}.转载 2015-10-31 13:40:14 · 1217 阅读 · 0 评论 -
关于图片代替文字的语义化
经常使用 text-indent:-9999px; 隐藏字体来达到语义化,但是今天出现了问题,我在一个标签上图片代替文字,做一个抽奖按钮,按钮转动的时候,页面出现了滚动条,页面的宽度和高度都变大很多,找来找去才发现是text-indent的问题偏移掉字体的方式是 text-indent:-9999px; 可是他有一个局限性 他只适用于块级元素block l原创 2015-12-31 09:01:16 · 286 阅读 · 0 评论 -
ie7不兼容z-index处理方法
position与js 联合原创 2015-11-30 09:59:27 · 914 阅读 · 0 评论 -
Chrome 中文界面12px
Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示, 可通过加入 CSS 属性-webkit-text-size-adjust: none;原创 2018-07-12 13:53:01 · 450 阅读 · 0 评论