随笔分类 -  CSS&HTML

摘要:当IE8发布时,它将支持很多新的CSS display属性值,包括与表格相关的属性值:table、table-row和table-cell,它也是最后一款支持这些属性值的主流浏览器。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。网页元素应用上那些与表格相关的display属性值后,能够模仿出与表格相同的特性。我将会在该文中给大家演示这种方法给CSS布局带来的巨大影响。使用CSS表格CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题。例如,“display:tabl 阅读全文
posted @ 2013-11-08 13:40 mguo 阅读(15644) 评论(0) 推荐(1)
摘要:首先需要明确的是,很多情况都会导致一个元素被运用上多种样式,样式覆盖的规则也需要根据不同的情况来定,具体规则如下。规则一:由于继承而发生样式冲突时,最近祖先获胜。CSS的继承机制使得元素可以从包含它的祖先元素中继承样式,考虑下面这种情况:123456789101112rule1welcometogaodayue的网络日志strong分别从body和p中继承了color属性,但是由于p在继承树上离strong更近,因此strong中的文字最终继承p的蓝色。规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜。在上面的例子中,假如还指定了strong元素的样式,如:1strong{colo 阅读全文
posted @ 2013-08-08 12:43 mguo 阅读(7982) 评论(1) 推荐(0)
摘要:在现代浏览器,如果子元素float,则父元素不会自动被撑开#nofloatbox { border: 1px solid #FF0000; background: #CCC; width:200px;}#floatbox { float: left; width: 100px; height: 10... 阅读全文
posted @ 2013-06-28 18:44 mguo 阅读(2401) 评论(0) 推荐(1)
摘要:line-height属性的细节与大多数CSS属性不同,line-height支持属性值设置为无单位的数字。有无单位在子元素继承属性时有微妙的不同。有单位(包括百分比)与无单位之间的区别有单位时,子元素继承了父元素计算得出的行距;无单位时继承了系数,子元素会分别计算各自行距(推荐使用)。1当line-height:xxx %时:body{ font-size:14px; line-height:150%;}h1{ font-size:26px; }实际结果就是:body{ line-height:21px; /* 14px*150%=21px */ }h1{ line-height:21px; 阅读全文
posted @ 2013-06-28 17:38 mguo 阅读(1948) 评论(1) 推荐(1)
摘要:IE 从 5.5 开始就已经支持 display:inline-block 了,只是支持的并不是那么完善。在 msdn 微软开发者社区,找到了 IE 从5.5 开始支持 inline-block 的证据:Theinline-blockvalue is supported starting with Internet Explorer 5.5. You can use this value to give an object a layout without specifying the object’s height or width.这里明确指出:从 IE5.5 开始支持 inline-bl 阅读全文
posted @ 2013-06-28 17:28 mguo 阅读(344) 评论(0) 推荐(0)
摘要:1.区别IE和非IE浏览器CSS HACK代码#divcss5{ background:blue; /*非IE 背景藍色*/ background:red \9; /*IE6、IE7、IE8背景紅色*/ } 2.区别IE6,IE7,IE8,FF CSS HACK【区别符号】:「\9」、「*」、「_」【示例】:#divcss5{ background:blue; /*Firefox 背景变蓝色*/ background:red \9; /*IE8 背景变红色*/ *... 阅读全文
posted @ 2013-06-24 14:11 mguo 阅读(370) 评论(0) 推荐(0)
摘要:大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。为什么要将icon做成字体?在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,比如png8 alpha透明或者png8 index透明等。比如,twitter用到的各种小icon:这种情况下,使用字体来实现图标就有很多优势:字体文件小,一般20-50k 阅读全文
posted @ 2013-06-06 16:39 mguo 阅读(282) 评论(0) 推荐(0)
摘要:不需要关闭autocomplete的情况下通过js完美解决.<script> if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) { $(window).load(function(){ $('input:-webkit-autofill').each(function(){ var text = $(this).val(); var name = $(this).attr('name'); $(this).after(this.outerHTML).r 阅读全文
posted @ 2013-05-31 18:13 mguo 阅读(3758) 评论(0) 推荐(0)
摘要:今天主题是超长英文文本自动换行word-wrap的使用,在介绍这个属性的同时,我还把word-break和white-space两个属性一起放进来介绍,因为这几个属性常给我平时的制作中带来混淆的感觉,搞不清楚在什么地带需要使用中word-wrap属性,什么时候又应该使用word-break属性,而又何时才能使用white-space。为了解决这个疑问,今天特意将他们放在本文中一起介绍。大 家在平时的网页制作中一定碰到过这样的情况,比如说你在自己的blog中制作了一个完美而且又靓丽的评论布局,让你的用户浏览网页是可以给你添加评论,但 当有人发布了一个原始网址或者其它超长的文本时,你此时的布局就被 阅读全文
posted @ 2013-05-31 14:50 mguo 阅读(829) 评论(0) 推荐(0)
摘要:1.原理基于安全性考虑,IE不支持用程序设置input type=file的值。所以不能直接用<input type="text"/>和<input type="button"/>代替,CSS美化file组件的方法是使用position属性将file组件置于<input type="text"/>和<input type="button"/>之上,然后使其全透明化,操作时使用户感觉在操作<input type="text"/>和< 阅读全文
posted @ 2013-04-23 23:36 mguo 阅读(620) 评论(0) 推荐(0)
摘要:转自http://www.w3cfuns.com/forum.php?mod=viewthread&tid=5594274&from=portalcss制作流程及标准(一)制作流程:1,创建文件(文件管理及命名)2,与html文档建立关系注意点: 1)不建议使用:内联样式和内嵌样式 原因:结构(html)和表现(css样式)没有分离 2)区别:外链样式与导入样式([url]http://zhidao.baidu.com/question/198616109.html)[/url] 3)网站常用:外链样式3,制作页面样式注意点:同html框架一致从上到下从整体到局部共用样式到个别 阅读全文
posted @ 2013-04-12 15:19 mguo 阅读(700) 评论(0) 推荐(0)
摘要:最近在研究jQuery的选择器,大家知道jQuery的选择器和css的选择器非常相似,所以整理一下css选择器;css1-css3提供非常丰富的选择器,但是由于某些选择器被各个浏览器支持的情况不一样,所以很多选择器在实际css开发中很少用到。1.基础的选择器选择器含义示例*通用元素选择器,匹配任何元素* { margin:0; padding:0; }E标签选择器,匹配所有使用E标签的元素p { font-size:2em; }.info和E.infoclass选择器,匹配所有class属性中包含info的元素.info { background:#ff0; }p.info { backgro 阅读全文
posted @ 2013-04-01 16:50 mguo 阅读(266) 评论(0) 推荐(0)
摘要:INPUT元素是页面设计的最基本的元素之一,是FORM表单的组成部分,也可以单独使用。是用户交互必不可少的元素。对于INPUT的布局,可能会出现在某些浏览器下正常,在某些浏览器中杂乱的现象:无缘无故的换行了--!,曾经为此事甚感头疼。造成布局问题的最直接的一个原因,往往是宽度高度设置的不合理导致的。更有甚者,是不设置高度,因为 INPUT的size属性,也会影响它的宽度,所以,有的人往往只设置size,不设置width,孰不知,因小而见大,一个不小心,就会出现布局的混乱。size属性到底是?当INPUT元素的“type”属性值为“text”(文本框)或“password”时(密码框),“siz 阅读全文
posted @ 2013-03-25 13:58 mguo 阅读(3880) 评论(0) 推荐(0)
摘要:IE css hack汇总汇总下IE各版本的css hackhack示例IE6(S)IE6(Q)IE7(S)IE7(Q)IE8(S)IE8(Q)IE9(S)IE9(Q)**colorYYYYNYNY++colorYYYYNYNY--colorYYNNNNNN__colorYYNYNYNY##colorYYYYNYNY\0color:red\0NNNNYNYN\9\0color:red\9\0NNNNNNYN标准模式中:1,减号(-)是IE6专有hack2,反斜杠零(\0)是IE8/9的hack3,\9\0是IE9/10的hack 阅读全文
posted @ 2013-03-19 17:44 mguo 阅读(166) 评论(0) 推荐(0)
摘要:本质上,这两种方式都是为了加载CSS文件,但还是存在着细微的差别。 差别1: link属于XHTML标签,而@import完全是CSS提供的一种方式。link标签除了可以加载CSS外,还可以做很多其它的事情,比如定义RSS,定义rel连接属性等,@import就只能加载CSS了。 差别2:加载顺序的差别。当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显(梦之都加载CSS的方式就是使用@import,我一边下 阅读全文
posted @ 2013-03-08 10:49 mguo 阅读(329) 评论(0) 推荐(0)
摘要:CSS3引入新的字体尺寸单位 rem ,可以简单记忆为root rm。CSS3的出现,他同时引进了一些新的单位,包括我们今天所说的rem。在W3C官网上是这样描述rem的——“font size of the root element” 。下面我们就一起来详细的了解rem。em单位是相对于父节点的font-size,会有一些组合的问题,而rem是相对于根节点(或者是html节点),意思就是说你可以在html节 点定义一个单独的字体大小,然后所有其他元素使用rem相对于这个字体的百分比进行设置,这样就意味着,我们只需要在根元素确定一个参考值,在根元素中设 置多大的字体,这完全可以根据您自己的需, 阅读全文
posted @ 2013-03-08 10:47 mguo 阅读(13927) 评论(0) 推荐(0)
摘要:1.基础的选择器选择器含义示例*通用元素选择器,匹配任何元素* { margin:0; padding:0; }E标签选择器,匹配所有使用E标签的元素p { font-size:2em; }.info和E.infoclass选择器,匹配所有class属性中包含info的元素.info { background:#ff0; }p.info { background:#ff0; }#info和E#infoid选择器,匹配所有id属性等于footer的元素#info { background:#ff0; }p#info { background:#ff0; }2.组合选择器选择器含义示例E,F多元素 阅读全文
posted @ 2013-02-22 15:38 mguo 阅读(371) 评论(0) 推荐(0)
摘要:https://developer.mozilla.org/en-US/docs/CSS/text-renderingtext-rendering随着越来越多的网站开始用@font-face来渲染文字,易读性开始被关注了。小号字体上,文字会更容易出现。由于目前还没有CSS属性控制显示在线字体的微妙细节,你可以利用text-rendering来启用kerning和ligatures。Gecko 和WebKit 浏览器处理这个属性的方式很不一样。前者默认启用这个特性,而后者,你需要将其设置为optimizeLegibility。浏览器支持: CSS3, 所有WebKit 和Firefox浏览器. 阅读全文
posted @ 2013-02-17 11:48 mguo 阅读(260) 评论(0) 推荐(0)
摘要:background: -moz-linear-gradient(top, #3C6875 0%, #003443 100%); background: -webkit-linear-gradient(top, #3C6875 0%,#003443 100%); background: -o-linear-gradient(top, #3C6875 0%,#003443 100%); background: -ms-linear-gradient(top, #3C6875 0%,#003443 100%); background: linear-gradient(top, #3C687... 阅读全文
posted @ 2013-01-15 18:38 mguo 阅读(616) 评论(0) 推荐(0)