随笔分类 -  CSS

1 2 下一页
关于CSS技术
DIV 自定义滚动条样式
摘要：当内容超出容器时，容器会出现滚动条，其自带的滚动条有时无法满足我们审美要求，那么我们可以通过css伪类来实现对滚动条的自定义。 首先我们要了解滚动条。滚动条从外观来看是由两部分组成：1，可以滑动的部分，我们叫它滑块2，滚动条的轨道，即滑块的轨道，一般来说滑块的颜色比轨道的颜色深。 滚动条的css样式 阅读全文
posted @ 2018-06-28 12:34 云中雀 阅读(43829) 评论(5) 推荐(7)
Google Chrome input 设置 line-height 后光标变得和input一样高
摘要：Google Chrome input的height和line-height设置为相同的比默认高度高的值时，当input控件获得焦点并且没有输入内容时，input中的光标会占满整个input控件（如果设置了padding-top或padding-bottom则会低于整个控件的高度），但输入内容后光标... 阅读全文
posted @ 2015-10-26 14:33 云中雀 阅读(2480) 评论(0) 推荐(0)
css 颜色渐变
摘要：.top_nav {width:100%;height:29px;/* 如果浏览器不支持渐变，使用图像作为背景 */background:url(gradient.jpg);/* Webkit: Safari 4-5, Chrome 1-9 */background: -webkit-gradien... 阅读全文
posted @ 2014-08-15 17:27 云中雀 阅读(307) 评论(0) 推荐(0)
ie、火狐、谷歌浏览器，光标定位问题
摘要：IE：不管该行有没有文字，光标高度与font-size一致。FF：该行有文字时，光标高度与font-size一致。该行无文字时，光标高度与input的height一致。Chrome：该行无文字时，光标高度与line-height一致；该行有文字时，光标高度从input顶部到文字底部(这两种情况都是在... 阅读全文
posted @ 2014-08-12 09:34 云中雀 阅读(1643) 评论(0) 推荐(0)
纯CSS写三角形-border法
摘要：(1)有边框的三角形我们来写下带边框的三角形。如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所... 阅读全文
posted @ 2014-07-04 09:06 云中雀 阅读(254731) 评论(12) 推荐(20)
IE6 + png24 透明图片（滤镜）
摘要：IE6 + png24 透明图片（滤镜）.IE6png{_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=noscale,src=image.png);_background:none;}http://www.cnblogs.com/code/archive/2011/08/10/2133357.html 阅读全文
posted @ 2013-11-14 11:05 云中雀 阅读(170) 评论(0) 推荐(0)
IE, FireFox, Opera 浏览器支持CSS实现Alpha半透明的方法
摘要：这个世界变化很快，IE8也快出来了，它将不在支持以前{filter:alpha(opacity=50);}的私有属性，转而支持更规范的私有属性-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=50)”;加之Firefox2.0和Opera9.0以前版本很少见到，所以所有的主流浏览器都已经支持纯CSS而不用png图片来实现半透明效果，代码是： 不透明 半透明http://dancewithnet.com/2006/05/18/css-alpha-transparent/ 阅读全文
posted @ 2013-11-11 16:20 云中雀 阅读(353) 评论(0) 推荐(0)
IE6,IE7锚点无效的问题解决
只有注册用户登录后才能阅读该文。
posted @ 2013-11-09 22:07 云中雀 阅读(119) 评论(0) 推荐(0)
ie6 span 换行IE6中float:right换行问题的替代解决方案
摘要：在IE6,IE7下使用标签时,在加入右浮动样式后,会换行的bug解决方案:bug案例:新闻列表中,为使时间右对齐,加右浮动产生换行新闻1 2012-12-24新闻1 2012-12-24新闻1 2012-12-24新闻1 2012-12-24解决方案:1.span和a标签交换位置.2012新闻缺点:语义结构发生改变,不合逻辑.2.a加左浮动,span加右浮动3.使用IE hack 在span标签中加入只有IE6,7可以识别的样式*margin-top:20px;_margin-top:20px;说明,使换行的部分根据margin-top再呈现出来.也曾看到过有网友通过在span的父类中设置相对 阅读全文
posted @ 2013-11-02 21:47 云中雀 阅读(453) 评论(0) 推荐(0)
CSS 关于IE6 margin 为负数 负值的时候 正常显示的方法
摘要：一定要加position: relative;有时候比如margin-left的负数，还需要加上如 float:left 属性。 阅读全文
posted @ 2013-11-02 14:40 云中雀 阅读(265) 评论(0) 推荐(0)
css-高度自适应的问题(body高度问题)
摘要：css-高度自适应的问题对象height:100%并不能直接产生效果，是因为跟其父对象有关。#center{height:100%;} 上面的css样式是无效的，不会产生任何效果。需要改写：html,body{ margin:0px; height:100%;}#center{width:200px;height:100%;background-color:#666666;border:1px solid red;}对#center对象设置了height:100%,同时设置了html与body的height：100%，这就是高度自适应的问题所在，一个对象的高度是否可以使用百分之比... 阅读全文
posted @ 2013-11-02 11:01 云中雀 阅读(6149) 评论(0) 推荐(0)
table和div设置height:100%无效的完美解决方法
摘要：刚接触网页排版的新手，常出现这种情况：设置table和div的高height="100%"无效，使用CSS来设置height:"100%"也无效，为什么会这样呢？解决height:100%无效，table和div的解决方法并不相同。首先说一下table，他比较容易解决，当我们使用Dreamweaver来制作网页，新建一张网页，通常在代码头部会有类似以下的代码：没错，你猜对了，问题就出在这里，你试着把这短代码删除，然后再刷新一下网页，你就会看到所有table以你的设置height="100%"的展示！这段代码是告诉浏览器你的网页是遵循什 阅读全文
posted @ 2013-07-15 10:47 云中雀 阅读(6759) 评论(0) 推荐(0)
解决IE6-IE7下li上下间距
摘要：li子元素浮动，li不浮动,如下情景ul>li*3>a[href="#" style="float:left"]，在IE6/7下li会向下产生大约2px的外边距。解决方法：li{vertical-align:top/bottom;}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xm 阅读全文
posted @ 2013-04-08 16:40 云中雀 阅读(3755) 评论(0) 推荐(0)
checkbox,复选框垂直居中
摘要：<div style=" width:100px; height:50px; border:1px solid red; text-align:center; vertical-align:middle"><input name="" type="checkbox" value="" style=" height:50px; line-height:50px; margin:0; padding:0;" /></div> 阅读全文
posted @ 2013-01-17 10:49 云中雀 阅读(9835) 评论(0) 推荐(0)
IE6下 float:right 后换行的问题
摘要：IE6下有不少奇怪的Bug，今天就碰到一个，float right换行bug，情况是并列的几个块级元素如div和span，一些设置了左浮动一些设置右浮动，一行的宽度足够放下所有的块级元素，但此时ie6则显示右浮动的其中一块换行了，下面给出实例和解决方法：实例说明下：html结构如下<div><span class="left">左边</span><span class="center">中间</span><span style="float: right" class= 阅读全文
posted @ 2012-12-10 09:28 云中雀 阅读(3179) 评论(0) 推荐(0)
IE6 png 透明 (三种解决方法)(转来的哦)
摘要：FF和IE7已经直接支持透明的png图了,下面这个主要是解决IE6下透明PNG图片有灰底的=============================================================================此效果简单，。。。。相当不错推荐style="FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/fl.png')"语法：filter : progid:DXImageTransform.Microsoft.AlphaImageLoader 阅读全文
posted @ 2012-11-27 22:52 云中雀 阅读(194) 评论(0) 推荐(0)
span 高度设置
摘要：FIRST OF ALL，最容易令人忽略而导致头疼的因素。web页面文档类型： 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 众所周知，SPAN元素内单纯设置height是没有效果的。 需要设置SPAN的高度，需要将其设置成block元素。 display:block 但这样会导致span占据了整一行，我们通常不希望这样。 所以可以采用displ 阅读全文
posted @ 2012-11-06 11:03 云中雀 阅读(2442) 评论(0) 推荐(0)
剑走偏锋——用css制作一个三角形箭头
摘要：http://www.cnblogs.com/hooray/archive/2011/11/12/2246093.html 阅读全文
posted @ 2012-02-26 10:09 云中雀 阅读(174) 评论(0) 推荐(0)
基本的圆角框
摘要：http://www.cnblogs.com/binyong/archive/2009/11/30/1613376.html 阅读全文
posted @ 2012-02-23 20:19 云中雀 阅读(139) 评论(0) 推荐(0)
CSS样式表能否控制文字禁止选择,复制, 焦点
摘要：div中禁止文字被选择在做div的点击计数事件时，遇到一个小问题。因为div里面有文字，所以当点击多次时，特别是鼠标点的比较快的时候，文字会被选中。查了下，用css和javascript可以实现禁止选择。css代码：/* css style: */html,body{-moz-user-select: none;-khtml-user-select: none;user-select: none;}<div unselectable="on" onselectstart="return false;" style="-moz-user-s 阅读全文
posted @ 2012-02-22 18:40 云中雀 阅读(29653) 评论(0) 推荐(0)

1 2 下一页