通用类overflow:hidden;自动隐藏超出的内容,防止撑开层和表格的范围!important指定样式规则的应用优先权文字类color:#FF0000;文字颜色font-family:"Arial","Helvetica","sans-serif";字体font-size:9px;字号text-align:center;居中(left为居左,right为居右)line-height:28px;行高(可用150%值)font-style:italic;斜体(oblique偏斜体)font-weight:bold;服务粗体(bolder特粗,400粗值)font-variant:small-...
http://www.jb51.net//article/16019.htm
先说下这套架构的优点:1.可以方便的把繁重的CSS编写工作分配出去,而不会相互造成影响。2.结构清晰,利于维护和修改。3.每一张网页都仅加载自己需要的CSS。总结下来就是:提高开发效率,提高维护效率,提高网页加载效率。下面我解释一下上面这张CSS结构图:图中间的5个黑色的图示表示网页,其中上面单独的一张是母版页,下面四张是子页。使用VS的人都知道母版页的作用,相当于asp中的include,把共通的部分作成母版,单独的部分作成子页,提高开发效率。图上方绿色框内的是全局CSS部分,它们存放在styles文件夹中,由母版调用并作用到所有子页。图上方蓝色虚线框是单一CSS部分,其中每一张子页都有对应...
http://www.jb51.net//article/16008.htm
BI上有高手专门讨论了这种布局方法,但他用了较多的hack,还回避了IE6的dtd。我在实际使用中,发现回避掉IE6的dtd定义后,会导致ajax模态框无法居中(VS的一个控件,自动生成的代码,很难修改)。于是自己写了个简单的左右两列的布局,没用到什么hack,很简单,只是练手用用。css代码:left和right都贴住左侧。设置left在right上面(z-index);在right内加个放内容的层(content);设置content距离right的左侧为200px,即刚巧等于left的宽度。[code]*{margin:0;padding:0;list-style:none;}.wrap...
http://www.jb51.net//article/16007.htm
第一部:关于构建CSS框架我们要实现的目的:1.实现标准化,具备主流平台适应性的前端实现;2.快速开发,在站点风格确定后,前端不应该成为整个项目里瓶颈;3.重构的需求,尽可能的让类和区块样式可重用;4.分离结构和表现的需求,遵守了语义化结构的约定;5.构架完全符合金融网特色的CSS框架。6.对代码进行必要的搜索引擎优化。第二部:关于CSS命名的一些约定:1.不使用大写形式的类名和id名;2.尽可能使用描述性的英文单词的组合作为类名和id名;3.id名及类名的多个英文单词之间使用“_”短横线分隔;4.按区域进行描述编号例:main01_div01_ul01(可以理解为主体第一区域第一DIV下的第...
http://www.jb51.net//article/15991.htm
但是实际上,浏览器远远不止这几个,Firefox分为Firefox1.5,Firefox2,Firefox3几个主要版本,IE7,IE6中也各有好几个系列,另外除开这两个主流厂商的产品之外,还有Opera,Konqueror,Netscape,chrome等一系列。 这些浏览器,各有各的一套,往往在这里运行正常,在那里运行就不正常了。于是WD们拆东边补西边,终于能在几个浏览器下都正常了。结果,产品经理又有了新的需求,需要在哪儿哪儿那儿改一下,于是乎,好不容易糊弄好的的纸架子一下子倒塌了,WD们又忙得焦头烂额。之所以这么说,因为,这是我的经验。 大凡是WD,总是收集了一堆CssHacking...
http://www.jb51.net//article/15987.htm
一、少用偏门。 类似break-word断行,z-index手动分层,还有像垂直对齐等等这些偏门CSS最好少用,因为不一定所有浏览器都支持,而且极难通过W3C检测。 二、center不是float的值。 很多新手都会把center误认为是float的值,而偏偏不是如此。center只是text-align的值。 三、对齐不能包括两个值。 很多新手会在float或者text-align中填写两个值,比如:float:left top。这是不允许的,浏览器也无法识别。 四、滚动条颜色最好不要自定义。 很多浏览器不能正常识别自定义颜色的滚动...
http://www.jb51.net//article/15986.htm
看到一些网站的页中大部分是这样写的<styletype="text/css"media="screen">@importurl("http://www.jb51.net/home/css/global/v2.0.css?t=20070518.css");</style> 而很多网站使用的都是link<linkrel="stylesheet"rev="stylesheet"href="default.css"type="text/css"media="all"/> 而像google百度163等网站他们都是直接写在网页中 当然使用链接link和导入impo...
http://www.jb51.net//article/15985.htm
[html]<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html> <head> <metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/> ...
http://www.jb51.net//article/15956.htm
根据时间自动调整站点风格是不错的想法,这种根据时间自动调整站点风格也不是什么新鲜事,记得好久以前也见过类似的文章或方法,只不过当时没有特别注意。下面说一下它们的实现方法,目前网上有这样两种实现方法:一、采用服务端的代码ASP版本:<linkrel="stylesheet"type="text/css"href="<%ifhour(now)<12thenresponse.write"morning.css"elseifhour(now)<17thenresponse.write"day.css"elseresponse.write"night.css"endif%>...
http://www.jb51.net//article/15955.htm
CSS的功能是非常强大的,对于元素的表现以及页面的布局,都提供了非常强大的功能,这主要在于我们灵活的运行,在这方面提供了丰富且富含价值的各种教程与信息。对于图片的使用,其实更多的是在内容层。根据WEB标准的思路,表现层的图片,已经都被分离到CSS中去了。只有作为内容的图片才能以IMG标签插入在页面中,这也是一直强调的语义。 为图片设置背景图片,是一个非常搞的实例。这句话或许就感觉有点好玩。我们为以IMG标签引入页面的图片设置背景图片。这样的应用范围或许并不大,但可以锻炼你的思路,让你理解元素在HTML与CSS中的意义与灵活性。我们看下面的代码。 <imgscr="jb51.jpg"/...
http://www.jb51.net//article/15919.htm
[code]body:nth-of-type(1)p{color:#333333;}[/code]OnlytheGoogleChromeandSafari3.1browserswillshowparagraphsasred....
http://www.jb51.net//article/15853.htm
