css样式 | 易学教程

PHP+Smarty模板中CSS问题:Firefox下正常显示，而在IE下，显示得很混乱

阅读更多关于 PHP+Smarty模板中CSS问题:Firefox下正常显示，而在IE下，显示得很混乱

第一个原因是：bom的问题（在页面上输出空信息）［转］先制作好了页面的模板(用UTF-8编码)，当载入Smarty运行的时候，发现在Firefox下正常显示，而在IE下，显示得很混乱！难道是smarty和CSS结合有问题？PHP+Smarty时显示混乱，而不用Smarty转而采用原始的PHP+HTML混写的时候则无此现象，查阅代码，无法找出任何破绽，因此开始怀疑Smarty有问题。根据以往的经验，我开始怀疑是当PHP输出HTML的时候向其中加入了额外的不可见代码，于是将PHP输出的内容原封不动保存为HTML，然后提交到 validator.w3.org ［这个网站很有用，可以帮你检测html的错误信息］进行XHTML验证，果然，验证失败，提示文件头部被加入了BOM（万国码档案签名：Byte Order Mark, U+FEFF）标记，妈的，就是这个垃圾标记，已经不是第一次害我了！于是，重新打开DM和UltraEdit重新对PHP页面以及模板页面进行编码转换，去除了其中的BOM标记，一切正常！解决此问题的最简单的方法是：把原来的模板文件及php文件用 UltraEdit 打开，然后重新保存时选择 UTF-8-无BOM格式即可。呵呵，是不是很简单呢。这是我在建我的小站：创意产品网 www.cygoods.com 过程中遇到的问题，记录下来

关于IE6下CSS选择器失效的问题

阅读更多关于关于IE6下CSS选择器失效的问题

前2天在实习公司做了1张网页，在其他所有浏览器上都表现的比较好，唯独IE6下后半部分CSS完全失效，前半部分者是完好的。开始以为是不是IETester出了问题，后来新建了个页面，写了几句代码，然后发现IE6下样式有效。所以我又把原来页面的代码注释掉，重写html，发现只要是在这张页面后半部分的代码样式在IE6下就会失效。我突然想到以前培训的时候我同学发生过页面里面明明有代码但在网页上面显示却一片空白，我在想是不是和上次一样也是编码的问题，然后去 CSS样式里面把编码改成utf-8 ,刷新IETester发现样式有效。产生原因：CSS文件里面包含注释导致IE6下样式失效解决方法：删除注释或者把CSS样式里面的编码改成utf-8 来源： oschina 链接： https://my.oschina.net/u/937429/blog/101890

css浏览器兼容问题(在IETester及其他浏览器中亲试过)

阅读更多关于 css浏览器兼容问题(在IETester及其他浏览器中亲试过)

最近在研究一些关于浏览器兼容性问题的css问题，先归纳总结如下：（1）在一些现代浏览器（opera，chrome，谷歌，safari）中，如果给块级标签如div设置padding后会导致元素的height和width增加，在IE中则不会增加，但是只在IE6中不增加，IE7以上在IETester中测试都会增加,解决办法：可以使用 !important 多设一个 height 和 width （2）使元素水平垂直居中：垂直居中：将该元素的line-height设置为元素本身的高度，再通过vertical-align： middle；（注意内容不要换行），水平居中：将元素的margin设置为auto；但是在IE5下没有效果（3）想给像a，spa这样的行内元素进行样式设置，需要将它的display设置为block （4）IE在浮动时候产生的双倍距离：若给一个div设置了float, 并且设置了margin，IE5和IE6会产生双倍的间隔，但是在其它的IE版本下就不会，在一些现代浏览器中也不会。解决办法：给该元素添加一个样式：display:inline即可（5）第二点是 ie对于css的magin padding 等默认值为0px，但ff却不一样，为了保持外观的统一性，即使padding为0你也要写上，以免ff在浏览中的错位。（6）firefox不支持hand

css属性标签大全

阅读更多关于 css属性标签大全

css属性标签大全标签： css transition scroll filter border float 2011-07-12 12:54 4692人阅读评论 (0) 收藏举报版权声明：本文为博主原创文章，未经博主允许不得转载。 CSS样式属性 1、字体属性(type) font-family(使用什么字体) font-style(字体的样式，是否斜体)：normal/italic/oblique font-variant(字体大小写)：normal/small-caps font-weight(字体的粗细)：normal/bold/bolder/lithter font-size(字体的大小)：absolute-size/relative-size/length/percentage 2、颜色和背景属性(backgroud) color(定义前景色，例如：p{color:red}) background-color(定义背景色) background-image(定义背景图片) background-repeat(背景图案重复方式)：repeat-x/repeat-y/no-repeat background-attachment(设置滚动)：scroll(滚动)/fixe(固定的) background-position(背景图案的初始位置)：percentage

FLEX3中应用CSS完全详解手册！

阅读更多关于 FLEX3中应用CSS完全详解手册！

编辑完这个 FLEX 下的CSS说明后，我基本已经兵临崩溃边缘了。在些天在AIRIA下了不少好东西，今天终于有空，也发一个比较不错的东西给大家，相信都比较需要这个FLEX下的CSS使用方法的详细说明（好像我这份还不够详细，望大家补充）。 AIRIA真的是一个不错的网站，很高兴在这里认识大家。在FLEX中使用样式方法一、使用本地样式定义使用<mx:Style>标签在MXML文件中创建本地的样式定义。这个标签包含了符合CSS2.0语法的样式表定义。这些定义会应用到当前文档以及当前文档的子文档。 <mx:style> .solidBorder{//类选择样式 border-style:solid; } button{//组件定义样式 border-style:solid; } .... </mx:style> //应用到组件 <mx:VBoxstyleName="solidBorder"/> <mx:button/>//文档中的button自动应用样式表中的样式二、使用外部样式表 FLEX支持外部CSS样式表。要应用一个样式表到当前文档和子文档，使用<mx:Style>标签中的source 属性。 <mx:Application...> <mx:Stylesource="style/style.css"/>//载入外部样式表 ... </mx:Application>

CSS Link（链接）

阅读更多关于 CSS Link（链接）

CSS Link（链接）不同的链接可以有不同的样式。一、链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ 当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面二、常见的链接样式根据上述链接的颜色变化的例子，看它是在什么状态。让我们通过一些其他常见的方式转到链接样式： 1，文本修饰 text-decoration 属性主要用于删除链接中的下划线： a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text

css链接link

阅读更多关于 css链接link

链接可以使用任何css属性，包括字体、颜色、背景等等、链接有四个状态，可在四个状态时设置不同的属性 a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻当为链接的不同状态设置样式时，需要遵循a:hover 必须位于a:link 和a:visited之后，a:active 必须位于 a:hover 之后例如编辑一个如下的html文件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <style> a:link {color:red;} /* 未访问链接*/ a:visited {color:green;background-color：gray} /* 已访问链接 */ a:hover {color:pink;font-size:20px} /* 鼠标移动到链接上 */ a:active {color:yellow;} /* 鼠标点击时 */ </style> </head> <body> <p><b><a href="http://www.baidu.com" target="_blank">这是一个链接</a></b></p> <p><b

6、CSS 链接样式

阅读更多关于 6、CSS 链接样式

链接样式链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。特别的链接，可以有不同的样式，这取决于他们是什么状态。这四个链接状态是： a:link - 正常，未访问过的链接 a:visited - 用户已访问过的链接 a:hover - 当用户鼠标放在链接上时 a:active - 链接被点击的那一刻 <style> a:link {color:#000000;} /* 未访问链接*/ a:visited {color:#00FF00;} /* 已访问链接 */ a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ a:active {color:#0000FF;} /* 鼠标点击时 */ </style> 运行效果当设置为若干链路状态的样式，也有一些顺序规则： a:hover 必须跟在 a:link 和 a:visited后面 a:active 必须跟在 a:hover后面文本修饰 text-decoration 属性主要用于删除链接中的下划线： <style> a:link {text-decoration:none;} /* unvisited link */ a:visited {text-decoration:none;} /* visited link */ a:hover {text-decoration:underline;

居中的css:完全指南(翻译)

阅读更多关于居中的css:完全指南(翻译)

这里主要参考的是CHRIS COYIER写的一篇的文章( 点击查看 )，主要讲了关于css水平、垂直居中的一些方法,每个方法后面都有一个demo，可以在线查看效果。 1 水平水平居中有行内元素和块元素，行内元素有文字、图片、链接等；块元素主要是div、p等block元素。 1.1 行内元素对于行内元素可以使用如下实现水平居中( 在线查看demo )： .blocklist1_1 { text-align: center; } 这种方法对于inline，inline-block，inline-table等都有效。 1.2 块元素对于一个块元素，可以设置其margin-left和margin-right自动，就像这样( 在线查看demo )： .blocklist1_2 .div1 { margin: 0px auto; } 无论块元素的宽度是否已知，都可以实现水平居中。 1.3 多个块元素如果有多个块元素需要水平居中时，有两种办法可以实现。一种是借助inline-block，另一种是借助flex。对于第一种方法可以使用如下方式( 在线查看demo )，设置块元素display:inline-block,其父元素水平居中： ..blocklist1_3 .div1 { text-align: center; } .blocklist1_3 .div1 div { display

css全局样式初始化

阅读更多关于 css全局样式初始化

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。 *最简单的初始化方法就是（不建议）： {padding: 0; margin: 0;} 淘宝的样式初始化： body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; } body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; } h1, h2, h3, h4, h5, h6{ font-size:100%; } address, cite, dfn, em, var { font-style:normal; } code, kbd, pre, samp { font-family:couriernew, courier, monospace; } small{ font-size:12px; } ul, ol { list

订阅 css样式