![](https://img-blog.csdnimg.cn/20201014180756754.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
css
文章平均质量分 72
燕过留誉
爱好前端设计与开发,一切皆为用户体验。
展开
-
ul中的li横排问题
ul中的li横排距中问题 ul中的li横排相信大家都能做到,但是如果li不设宽度,不加浮动,还必须水平距中,相信就有点难度了吧。 li都不设宽度,如何让ul中的li横排距中显示呢? 关键就在块的显示方式 li默认是块级元素,此元素前后会带有换行符,所以每个li都会换行,通常我们为了让li横排都会加浮动 现在我们把浮动去掉,每个li都会换行,如何让li横排呢?玄机就在display。 让原创 2015-02-28 13:37:31 · 2068 阅读 · 0 评论 -
CSS 相对/绝对(relative/absolute)定位系列(二)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1330 一、常见absolute布局的替代实现方案 absolute属性配合left/top/right/bottom属性具有极强的定位性。这种功能特性是如此的明显与强烈,可能会让页面重构人转载 2015-09-15 13:34:33 · 492 阅读 · 0 评论 -
IE7浏览器下CSS属性选择器二三事
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=4843 一、为何专门说起IE7 以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之。于是,我们会不自然地把IE6和IE7浏览器转载 2015-09-15 19:22:57 · 1214 阅读 · 0 评论 -
CSS 相对|绝对(relative/absolute)定位系列(一)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1287 一、有话要说 以前写内容基本上都是:眼睛一亮——哟呵,这个不错,写!然后去古人所说的茅房里蹲会儿,就有写作的思路了。但是,构思相对/绝对(relative/absolute)定位系列转载 2015-09-15 13:32:47 · 818 阅读 · 0 评论 -
IE的layout属性详解
转载 雨中无伞-----WEB前端开发 http://www.cnblogs.com/yuzhongwusan/archive/2012/03/09/2387052.html 要想更好的理解 css, 尤其是 IE 下对 css 的渲染,haslayout 是一个非常有必要彻底弄清除的概念。大多 IE 下的显示错误,就是源于 haslayout。 什么是 haslay转载 2015-10-21 18:24:03 · 367 阅读 · 0 评论 -
由浅入深漫谈margin属性
作者:怿飞 原地址:http://www.planabc.net/2007/03/18/css_attribute_margin/ 2007-3-18 上午 - HTML/CSS/XML/XSL - CSS - margin margin 在中文中我们翻译成外边距或者外补白(本文中引用外边距)。他是元素盒模型(box model)的基础属性。 一、ma转载 2015-10-27 13:57:36 · 483 阅读 · 0 评论 -
不要告诉我你懂margin
出自 海玉的博客 本文地址: http://www.hicss.net/do-not-tell-me-you-understand-margin/ 你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实际工作中的用途吗?转载 2015-10-27 13:46:52 · 367 阅读 · 0 评论 -
如何实现背景透明,文字不透明,兼容所有浏览器?
重点内容入口: IE6和部分IE7内核的浏览器会读懂rgbaIE专属滤镜 filter:Alpha的兼容处理背景透明,文字不透明全兼容方案 测试浏览器: VirtIE6、虚拟机下XP的IE6、纯正IE8、纯正IE8下QQ浏览器、WIN7下的IE 9.0.32 、WIN8下的IE 10.0.21、chrome 38.0 、QQ浏览器8.0-IE10.0.5、safari 5.1.7、ope转载 2016-03-04 15:38:46 · 875 阅读 · 0 评论 -
css hack整理
浏览器的兼容性一直是个头疼的问题,使用“欺骗”技术可使各个浏览器效果一致,花了些时间整理了各个浏览器的HACK,主要包括IE系列和最新版本的Chrome、Safari、Firefox、 Opera,比较全面的记录下Hack,内容包括3部分:媒体查询 hack、属性Hack、选择器Hack,这些Hack已经测试并得到有效运用,有需要的同学可以放心使用,笔者会在以后不断的更新,如果有需要补充或者修改的转载 2016-03-04 16:09:01 · 376 阅读 · 0 评论 -
小三角带边框带阴影的div——css实现效果
第一种情况:带边框的小三角 乍一看,很简单,做小三角,首先想到的是利用border的transparent特性,可以制作出小三角的效果。但是注意,这个小三角本身就是边框制作出来的。怎么能在小三角的外边再加一层小边框呢。那就必须再叠加一层一样的东西,让两者有1px的错位。问题就解决了。不想在页面添加多余的无意义的标签,还想实现这个效果。首先想到的就是用元素的伪类来实现。原理就是这样,废话不多说,上原创 2016-12-14 15:52:20 · 10962 阅读 · 5 评论 -
使用a做锚点链接时,offset().top重复点击时位置不同的问题。
功能 :最近做了一个简单的功能,文章的内容导航,类似百科的右侧导航。考虑用锚点来实现,整个页面要求单屏显示。点击右侧的导航来定位左侧的内容位置。首先,想到的办法就是,通过右侧点击获取当前左侧锚点的对象,把它的offset().top,赋值给右侧的父级的srcollTop,就OK了。问题:但是问题出现了,导航在第一次点击时,内容能正常链接过去,第二次再点击时内容的位置就不正常了。每次点击锚点时,因为...原创 2018-05-11 10:43:57 · 2134 阅读 · 0 评论 -
CSS 相对/绝对(relative/absolute)定位系列(四)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1834 前三篇(1, 2, 3)都是介绍的absolute属性,终于,轮到本文讲讲relative相对定位。 一、relative属性的形象化思维 relative是个看上去低调,有些特殊才能,气转载 2015-09-15 13:31:13 · 1184 阅读 · 0 评论 -
display:inline-block/text-align:justify下列表的两端对齐布局
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1514 一、何为列表元素的两端对齐布局 首先说说何为两端对齐。下面这个截图是word中一段英文左对齐的右边缘截图: 可以看到右侧是参差不起的,现在,选中文字,点击word上方的两端对齐按钮,如下图转载 2015-09-15 20:39:05 · 1132 阅读 · 0 评论 -
CSS相对定位|绝对定位(五)之z-index篇
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1855 一、海边拾贝 z-index属性目前只有在position:relative、position:absolute和position:fixed参与的情况下才有作用,表示层级,类似ph转载 2015-09-15 14:10:58 · 1030 阅读 · 0 评论 -
使用icomoon制作icon字体
icon字体的好处自不必多说,相信好处大家都用了便都知道滴! 下面我就具休说下,用icomoon制作icon字体的情况。原创 2015-02-28 16:51:45 · 2227 阅读 · 1 评论 -
li列表设置了行高,但每行后面都有4px的空白间隙
相信大家经常用到ul li来制作信息列表,今天有一个同事问我一个这样的问题”li列表设置了行高,但每行后面都有4px的空白间隙“。n年前,我也曾遇到过这样的问题,今天就把它记录下来吧。 ul li {clear:both;overflow:hidden;height:32px;line-height:32px;background: url(../images/arrow.png) left原创 2015-02-28 14:30:57 · 2604 阅读 · 0 评论 -
准确理解CSS clear:left/right的含义及实际用途
准确理解CSS clear:left/right的含义及实际用途 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=4179 零、说点什么 好久没更新了。并不是在折腾什么大作,而是广度学习与实践中,加上婚礼等诸多大事,所以产出较少。 今天这篇也只是小作,博转载 2015-03-27 11:33:13 · 553 阅读 · 0 评论 -
IE6浮动双边距
什么是双边距? 当我们编辑div的浮动样式时,原本设置的外边距会在IE6(360、兼容模式)下双倍显示。 如下 如何解决这个问题呢?原创 2015-03-17 15:07:11 · 463 阅读 · 0 评论 -
行内块级元素的兼容性
display:inline-block; 将对象呈递为内联元素,与其它的元素同处一行,但是内部又呈现出块级元素,也就是可以设置宽和度,打破了块级元素和内联元素的区别,此属性,IE8,FF3,其它的标准浏览器都识别,IE6,IE7,FF2不识别此属性,但是在IE6,7下面使用又好像识别了,是因为他触发了IE的haslayout,(类似于zoom:1),所以从表现上来说他们支持这个属性。FF2{原创 2015-03-13 14:43:00 · 2617 阅读 · 0 评论 -
<label>标签for属性的使用
标签for属性的使用 定义和用法 for 属性规定 label 与哪个表单元素绑定。 隐式和显式的联系 标记通常以下面两种方式中的一种来和表单控件相联系:将表单控件作为标记标签的内容,这样的就是隐式形式,或者为 标签下的 for 属性命名一个目标表单 id,这样就是显式形式。 例: 显式的联系:显式形式将文本 "Social Security Number:" 和表单的社会安全号原创 2015-03-24 20:12:38 · 891 阅读 · 0 评论 -
css ie6,ie7,ie8 兼容性写法,CSS hack写法
================================================================================ 三、CSS hack写法 书写顺序为FireFox在最前,其次是IE8、IE7,最后是IE6。 color:red;//所有浏览器 color:blue\9;//所有IE转载 2015-08-31 17:54:11 · 9647 阅读 · 0 评论 -
CSS3 选择器——属性选择器
上一切在《CSS3选择器——基本选择器》中主要介绍了CSS3选择器的第一部分,这节主要和大家一起来学习CSS3选择器的第二部分——属性选择器。属性选择器早在CSS2中就被引入了,其主要作用就是对带有指定属性的HTML 元素设置样式。使用CSS3属性选择器,你可以只指定元素的某个属性,或者你还可以同时指定元素的某个属性和其对应的属性值。 从上一节展示的CSS3选择器的图表中,我们可以知道,CS转载 2015-09-09 15:07:09 · 3566 阅读 · 0 评论 -
你应该知道的一些事情——CSS权重
本文由99根据Vitaly Friedman的《CSS Specificity: Things You Should Know 》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-shou转载 2015-09-09 16:08:39 · 476 阅读 · 0 评论 -
CSS3 选择器——基本选择器
CSS的选择器,我想大家并不会陌生吧,因为天天在使用,但对于CSS3的选择器,要运用的灵活到位,我想对很多朋友还是一定的难度,特别是CSS3中的:nth选择器。那么从现在开始我们先丢开他们版本的区别,从头一起来看看CSS选择器的运用。 CSS是一种用于屏幕上渲染html,xml等一种语言,CSS主要是在相应的元素中应用样式,来渲染相对应用的元素,那么这样我们选择相应的元素就很重要了,如何选择对应转载 2015-09-09 14:38:09 · 1115 阅读 · 0 评论 -
CSS 相对/绝对(relative/absolute)定位系列(三)
by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=1528 一、absolute正业之元素隐藏 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与display:block/inline来实现D转载 2015-09-15 13:36:26 · 656 阅读 · 0 评论 -
HTML CSS 特殊字符表
HTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”。要是你用时忘记了这些特殊字符,不要紧,请记住今天这个地址,你就随时可以查到这些特殊字符的表示方法。简单的介绍一下其使用方法:1、这些字符属于unicode字符集,你的文档需要声明为”utf-8“2、列表符号后面有两列编...转载 2018-05-15 16:29:47 · 1782 阅读 · 0 评论