摘要: 一、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。 二、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次。对 一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效, 是因为id的权重要比class大。 三、一个兼容性调整(IE和Mozilla)的笨办法: 初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在 Mozilla里必须要设成B才能正常显示,或者两个倒过来。 临时解决方法:选择符{属性名:B !important;属性名:A} 或许有时候并没... 阅读全文
posted @ 2014-03-11 15:03 唸随爱 阅读(251) 评论(0) 推荐(0) 编辑
摘要: 所谓响应式布局(Responsive Design),就是让网页针对不同设备的浏览器“响应”出不同的显示效果,于是抽了点时间把博客做成了响应式布局,适应一下移动浏览器。响应式布局主要依赖于CSS3 的媒体查询特性,其原理就是根据浏览器宽度或高度,适配不同的 CSS,以达到改变页面布局的目的。例如,当浏览器宽度小于 640px 时,将一些不太必要的元素隐藏,在有限的屏幕上显示更多主要的内容。例如,如下 CSS 只在浏览器宽度小于或等于 640px(iPhone 的屏幕宽度) 的时候才会生效:@media screen and (max-width:640px) { /* 页面宽度设置为 1... 阅读全文
posted @ 2014-03-11 14:58 唸随爱 阅读(193) 评论(0) 推荐(0) 编辑
摘要: 如果说,WAP2.0网页的机型、浏览器适配给我们无线制作经理造成了巨大的心理阴影,那么从iPhone、Android这些高端手机应用 起,我们终于可以庆幸比其他同行提前迎来了一个新时代,这两种高端手机上的Safari Mobile和GoogleAndroid浏览器近乎完美的渲染效果,让css3有了尽情挥洒的天地。 在没有css3 以前,或者说,在webkit没有占绝对的优势以前,圆角对于制作经理来说,都是一个纠结的死角。九宫格、N层div嵌套、一个图片的十八般切法,甚至不 惜恐吓威胁设计师:你再做圆角,我就死给你看!好吧,到了高端手机时代,这一切恩怨都可以抛下了,一个html元素、几行css. 阅读全文
posted @ 2014-03-10 17:15 唸随爱 阅读(263) 评论(0) 推荐(0) 编辑
摘要: 这篇文章主要是记录一下,微软最新发布的 IE9 浏览器CSS 圆角属性,现在CSS3已经 可以轻松实现跨浏览器的圆角效果,包括Firefox高版本,IE9,Safari,Chrome等高端 浏览器。 我们这样去定义一个盒子模型: -moz-border-radius: 10px;-webkit-border-radius: 10px;border-radius:10px; 在Firefox,和Chrome中的效果: 其中 -moz-border-radius 是 Firefox 实现圆角的私有属性,而 -webkit-border- radius是 webkit 内核浏览器(如... 阅读全文
posted @ 2014-03-10 17:04 唸随爱 阅读(357) 评论(0) 推荐(0) 编辑
摘要: 四种清除浮动方法如下: 1、使用空标签清除浮动。空标签可以是div标签,也可以是P 标签。这种方式是在需要清除浮动的父级元素内部的所有浮动元素后添加这样一个标签 清除浮动,并为其定义CSS代码:clear:both。此方法的弊端在于增加了无意义的结构元 素。 对于使用额外标签清除浮动(闭合浮动元素),是W3C推荐的做法。至于使用 元素还是空可以根据自己的喜好来选(当然你也可以使用其 它块级元素)。不过要注意的是,本身是有表现的,它会多出一个换行出 来,所以要设定它的heigh为0,以隐藏它的表现。所以大多数情况下使用空 比较合适。 2、使用overflow属性。 此方法... 阅读全文
posted @ 2014-03-04 15:45 唸随爱 阅读(1054) 评论(0) 推荐(0) 编辑
摘要: 在使用 CSS 实现表现的时候,会经常接触到 display:inline-block 这一属性,无论是 初接触 Web 标准还是接触标准已久的朋友,大都会对这一属性感觉很迷惑和模糊。 display:inline-block 将对象呈递为内联对象,但是对象的内容作为块对象呈递。旁边的内联对象会被呈递在 同一行内,允许空格。 但对于这个属性不是所有浏览器都识别。 支持的浏览器有:(Opera,Safariie8,ie9,chrome,firefox3.6+) ,ie6,ie7 是不支持这个属性的。 但很遗憾,ie6,ie7,firefox 是不支持这个属性的。(在 Firef... 阅读全文
posted @ 2014-02-28 15:24 唸随爱 阅读(143) 评论(0) 推荐(0) 编辑
摘要: 定义display 属性设置是否及如何显示元素。 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能违反 HTML 中已经定义的显示层次结构。对于 XML,由于 XML 没有内置的 这种层次结构,所有 display 是绝对必要的。 注释:CSS2 中有值 compact 和 marker,不过由于缺乏广泛的支持,已经从 CSS2.1 中去值描述none此元素不会被显示。block此元素将显示为块级元素,此元素前后会带有换行符。inline默认。此元素会被显示为内联元素,元素... 阅读全文
posted @ 2014-02-28 15:12 唸随爱 阅读(228) 评论(0) 推荐(0) 编辑
摘要: 如: 1、为什么我的服务器无法远程了? 2、为什么我的服务器总是自动重启? 3、为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul 、ol li本身就自带 了这个样式,我们没有好好利用起来而已。 按照平常写样式,我们会先用reset.css来清除浏览器的样式,这样的话,就会将li 上原 本自带的列表样式清除掉,所以我们一般写样式的时候,这些列表样式是显示不出来 的。 现在我们就来解决列表样式不显示的问题: ul{list-style-type: decimal; }ul li{ display: list-item;} 这样... 阅读全文
posted @ 2014-02-27 15:38 唸随爱 阅读(311) 评论(0) 推荐(0) 编辑
摘要: 所谓CSS的继承是指被包在内部的标签将拥有外部标签的样式性质。继承特性最典型的 应用通常发挥在整个网页的样式预设,需要指定为其它样式的部份设定在个别元素里即 可。这项特性可以给网页设计者提供更理想的发挥空间。但同时继承也有很多规则,应 用的时候容易让人迷惑。 CSS是层叠样式表(Cascading Style Sheets)的简称,它的规范代表了互联网历史上一 个独特的发展阶段。现在对于从事网页制作的朋友来说,很少没有听说过CSS了吧,因 为在制作网页过程中我们经常需要用到。 CSS允许我们为文档设置更为丰富且便于修改的外观,可以减轻网页设计者的工作负 担。这里我们主要想和... 阅读全文
posted @ 2014-02-27 15:31 唸随爱 阅读(365) 评论(0) 推荐(0) 编辑
摘要: CSS文档流与块级元素(block)、内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东 西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了 它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我 根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独... 阅读全文
posted @ 2014-02-26 16:35 唸随爱 阅读(575) 评论(0) 推荐(0) 编辑