
CSS
南三方
网站程序师,PHP、Linux爱好者。
展开
-
网站div css设计经验谈
使用DIV+CSS进行网站设计不是用换个标签然后再去按照表格的方式去排版,而是做到内容与表现的分离。 1: ID用于标识页面单独元素以及持久行的结构性元素 方便JS的调用 类用于标识同一页面可重复定义使用的结构性元素 ID与类的命名需与表现形式无关 :leftContent 而使用有意义的定义方式:sideBar等等。命名方式遵循“驼峰式大小写(标志转载 2008-11-03 22:41:00 · 401 阅读 · 0 评论 -
css书写技巧
nettuts带来的5个css书写技巧,简单翻译一下它的中心思想。 1. CSS Reset/重置 你也许需要先了解什么是css重置。然后怎么样写css重置呢。 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset. 不要使用* { margin: 0; padding: 0;转载 2009-07-24 14:25:00 · 316 阅读 · 0 评论 -
CSS BUG的快速定位及解决
相信大家对于常见 CSS BUG的处理已经相对比较熟悉,例如:IE6 Three Pixel Gap、IE5/6 Doubled Float-Margin Bug等等。但时常我们也会碰到复杂的 CSS BUG 问题,所谓“复杂”实质是指触发的条件很复杂,而“BUG” 也并非指一定是浏览器的 BUG。对于此类问题,我们首先要解决的是如何定位到问题,只有快速的定位到问题,才能更好的解决问转载 2009-07-24 14:56:00 · 483 阅读 · 0 评论 -
50款CSS工具
50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成器,CSS 排版工具以及 CSS 表单生成器。网格和布局The 1KB CSS Grid新颖的 CSS 网格工具,可用于简化内容管理系统的页面模板,轻巧易用。Variable Grid System基于 960p转载 2009-08-16 09:42:00 · 545 阅读 · 0 评论 -
IE6下DIV最小高度不能为0的解决方法
在网页布局时常会用到 DIV 来显示一些边角背景,需要设置较小的高度,默认情况下,IE6 中设置 DIV 较小高度会不起作用,在IE7、FF 等浏览器不存在这个问题。 IE6 下默认的字体尺寸大致在 12 - 14px 之间,当你试图定义一个高度小于这个默认值的 DIV 的时候, IE6会固执的认为这个层的高度不应该小于字体的行高。所以即使你用 height:转载 2009-08-17 16:54:00 · 753 阅读 · 0 评论 -
HTML5、CSS3教程
Web 设计师可以使用HTML4和CSS2.1完成一些很酷的东西。我们可以在不使用陈旧的基于table布局的基础上完成文档逻辑结构并创建内容丰富的网站。我们可以在不使用内联和标签的基础上对网站添加漂亮而细腻的风格样式。事实上,我们目前的设计能力已经让我们远离了那个可怕的浏览器战争时代、专有协议和那些充满闪动、滚动和闪烁的丑陋网页。虽然我们现在已经普遍使用了HTML4和CSS2.1,但是我们还可转载 2009-08-20 22:32:00 · 1332 阅读 · 0 评论 -
关于CSS3新技术
前些日子在SmashingMagazine看到一篇关于CSS3新技术不错的文章,它详细介绍了CSS3的新特性和它的使用方法,它包括:浏览器专有属性、选择器(属性选择器、连字符、伪类、伪元素)、RGBA和透明度属性、多栏布局、多背景图、Word Wrap、文字阴影、CSS圆角、边框图片、盒阴影、盒尺寸、媒体查询、语音,并详细说明了每个新技术目前有哪些浏览器兼容。如果你热爱前端开发,你对CSS感兴转载 2009-08-20 22:43:00 · 845 阅读 · 0 评论 -
注重SEO搜索优化的div+css命名规则
要知道,搜索引擎可都是通过抓取你的网站源代码来进行亲密接触的,那么,如何才能更好地让搜索引擎的爬虫更快更准确地觉察到你的内容相关性,增强网站的搜索优化呢?可能从最基本的DIV+CSS的命名规则入手会有意想不到的收获,最基础的就是最有效的。下面从前端设计的角度整理的DIV+CSS的命名规则,就很好地考虑到了搜索引擎的喜好,在页面设计的过程中,尽量做你懂,搜索引擎也懂,何乐而不为呢。转载 2009-07-06 18:05:00 · 309 阅读 · 0 评论 -
css规范文档
CSS书写顺序*{/*显示属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*文字转载 2009-07-11 10:02:00 · 716 阅读 · 2 评论 -
优化CSS的网页渲染速度的11种方法
1、十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注。在未知情况下不希望冒险而降低了渲染的效率。 * 不赞成 - color:#f3a; * 建议用 - color:#FF33AA;2、display与visibili转载 2009-07-11 10:05:00 · 565 阅读 · 1 评论 -
css模拟表格效果
模拟表格效果,在IE6,IE7,IE8,firefox,Opera下测试通过虽然不推荐用这种方式来模拟表格,但是确实可以做到.> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content-Type"转载 2009-07-11 10:07:00 · 422 阅读 · 0 评论 -
DIV+CSS网页设计常用布局代码
单行一列body{margin:0px;padding:0px;text-align:center;}#content{margin-left:auto;margin-right:auto;width:400px;width:370px;}两行一列body{margin:0px;padding:0px;text-align:center;}#content-top{margin转载 2009-07-10 10:45:00 · 1860 阅读 · 0 评论 -
CSS中em和px单位的区别
这里引用的是Jorux的“95%的中国网站需要重写CSS”的文章,题目有点吓人,但是确实是现在国内网页制作方面的一些缺陷。我一直也搞不清楚px与em之间的关系和特点,看过以后确实收获很大。平时都是用px来定义字体,所以无法用浏览器字体放大的功能,而国外大多数网站都可以在IE下使用。因为1. IE无法调整那些使用px作为单位的字体大小;2. 国外的大部分网站能够调整的原因在于其使用了em作为转载 2009-07-11 10:00:00 · 345 阅读 · 0 评论 -
2009年最优秀的30个优秀暗色系风格网站设计欣赏
黑色,永恒的经典色。黑色,代表着高贵、典雅。黑色,象征着神秘、暖昧……黑色,一直是多元的颜色。阿萨,钟情于黑色,所以,我的衣服,T恤,裤子,鞋子,都是纯白的。哈哈……今天介绍大家看一些暗色系的网站,希望您能喜欢。Nue(me)diaRed Crown StudioLucky Rabbit FilmsRadiiateIdea FoundryRein转载 2010-03-26 11:34:00 · 913 阅读 · 0 评论 -
50个国外优秀网站设计欣赏
暴强的50个国外优秀网站设计欣赏http://www.saizenmedia.com/http://blog.nemstudio.com/http://www.efingo.ro/http://www.projectvino.com.au/http://www.kavoon.com/http://belvedereinc.net/http://www.qualityxhtml.com/blog/h转载 2010-03-26 11:45:00 · 2397 阅读 · 0 评论 -
2008年国外最漂亮的50个网站欣赏
暴强的50个国外优秀网站设计欣赏http://www.saizenmedia.com/http://blog.nemstudio.com/http://www.efingo.ro/http://www.projectvino.com.au/http://www.kavoon.com/http://belvedereinc.net/http://www.qualityxhtml.转载 2010-03-26 11:25:00 · 3897 阅读 · 1 评论 -
CSS代码中注释的3种方法
1、选择器(child selector) 如果你想在IE中隐藏一个CSS定义,可以使用子选择器。 css部分: html>body p {/* declarations */} 2、“通配符”(*) 这种写法只有IE浏览器可以理解(对其他浏览器都隐藏) css部分: * html p转载 2009-07-24 14:22:00 · 962 阅读 · 0 评论 -
CSS在线优化工具:格式化CSS和精简CSS
CSS的优化通常包括两方面: 格式化CSS和精简CSS。 精简CSS的办法是把具有相同属性的元素合并在一起,但这会降低代码的可读性,使代码的后期维护很麻烦,稍不注意就出错。 格式化CSS一般就是多行模式或单行模式的选择,比如我个人就完全受不了多行模式 下面是一些在线的CSS优化工具,能让你方便的对CSS文件进行各种优化处理。 1. Online CSS Opti转载 2009-07-24 15:01:00 · 1134 阅读 · 0 评论 -
用css进行网页背景位置控制
一、css定位图片显示位置 background-position 一张背景图片经过上面的设置后往往还不够的,因为当你使用上面的不重复显示设置后,图片只显示在页面的左上角,而不会在其它地方,可是如果要在中间或者其它地方出现这张背景图片的话,那么background-position这个就可以帮你了,因为它就是用来显示图片相对于左上角的一个位置的(就是默认的值0% 0%转载 2008-11-03 22:41:00 · 765 阅读 · 0 评论 -
DIV CSS设计时IE6、IE7、FF 兼容性
DIV+CSS网页布局这是一种趋势,我也开始顺应这股趋势了,不过在使用DIV+CSS网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV+CSS设计的网页,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网页可能乱的一塌糊涂!我经常被这些东西整的焦头烂额,于是呼在网上找了些资料,加上自己的理解和这些日子的经验,整理了一些资料,其中有一些我还没用到的和还不能理解转载 2008-11-03 22:45:00 · 1248 阅读 · 0 评论 -
Dreamweaver编写CSS技巧
在DreamWeaver中编写CSS,这种编写习惯并不提倡,不过由于“可视化”和操作简便,使用的朋友依然很多,今天罗列一些“最佳习惯”,希望对这些朋友有所帮助。 CSS正在改变网站设计的进程。为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性。有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的转载 2008-11-03 22:51:00 · 539 阅读 · 0 评论 -
把现有网站重构为xhtml+CSS结构
我们大部分的设计师依旧在采用传统的表格布局、表现与结构混杂在一起的方式来建立网站。学习使用XHTML+CSS的方法需要一个过程,使现有网站符合网站标准也不可能一步到位。最好的方法是循序渐进,分阶段来逐步达到完全符合网站标准的目标。如果你是新手,或者对代码不是很熟悉,也可以采用遵循标准的编辑工具,例如Dreamweaver MX 2004,它是目前支持CSS标准最完善的工具。1.初级改善为页转载 2008-11-03 22:54:00 · 459 阅读 · 0 评论 -
网站div css按钮效果设计
网站用div css重新设计好之后,速度和美观度都会有提高,但一定要做好兼容性测试。 用div设计按钮时,用于效果更漂亮,且简单。网站div css,即便你不在全站用,局部效果也不错。 现在讲解按钮效果中的一种方法。如果灵活运用的话,div css网站设计的按钮,让你的站点增彩不少。 先看从www.cunbuluo.com(村部落)里截取的一段样式表: #proli转载 2008-11-04 00:15:00 · 1110 阅读 · 0 评论 -
Div+CSS设计网站优点概述
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 如果单独使用 DIV 而不加任何转载 2008-11-03 22:52:00 · 384 阅读 · 0 评论 -
网站新标准 Div+CSS网站设计的优点
网站新标准 Div+CSS网站设计的优点 业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 Very转载 2009-01-08 22:39:00 · 465 阅读 · 0 评论 -
使用CSS进行网页布局的十八个技巧
1.标签在Mozilla中默认是有padding值的,而在IE中只有margin有值.2.同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效.3.一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在转载 2009-02-28 23:14:00 · 463 阅读 · 0 评论 -
6个非常有用的 CSS 资源网站
作为一个 Web 设计师,精通 CSS 是绝对必要的而且对于 Web 开发也是必须的。 良好的 CSS 编写习惯可以帮助你节省时间,并且能更好地进行网站的后期维护使得运行速度更快,从而节约带宽。下面是6个非常有用的 CSS 资源网站,包括 CSS 学习技巧、CSS 文章、CSS 高级文档等。 A List Apart http://www.alistapart.com/topi转载 2009-04-14 13:49:00 · 1143 阅读 · 0 评论 -
增强SEO的div+css命名规则
页头:header登录条:loginBar标志:logo侧栏:sideBar广告:banner导航:nav子导航:subNav菜单:menu子菜单:subMenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:list提示信息:m转载 2009-04-20 00:49:00 · 367 阅读 · 0 评论 -
你未必知道的10个CSS技巧
1.css字体简写规则当使用css定义字体时你可能会这样做: 以下为引用的内容:font-size:1em;line-height:1.5em;font-weight:bold;font-style:italic;font-variant:small-caps;font-family:verdana,serif;事实转载 2009-07-24 14:17:00 · 287 阅读 · 0 评论 -
10个最常用的CSS className
很多做前端开发的在为页面元素定class的时候经常会拿不定主意,导致随意使用class,一个好的class要能够描述出某个特定元素的表现,在符合团队开发流程、规范的情况下也要注意在工作中形成一套自己的风格,下面是我最经常使用的个人认为命名比较恰当和有一定作用的10个class。 1.class=”fixed” fixed这个class几乎出现在没个样式文件中,用在为包含浮动子元素转载 2009-07-24 14:20:00 · 710 阅读 · 1 评论 -
总结CSS样式表的技术优势和功能
经过学习我们越来越深刻的认识到css相比较之前学习的HTML具有哪些优势,我们认为有以下技术优势: 1、方便修改网页格式:css对网页样式的控制可以独立地进行,因而修改、更新起网页起来都显得异常轻松容易。 2、轻松增加网页的特殊效果:在网页中过多的使用图像会破坏原有文字的存储格式,并且会加长下载时间,如果使用了css中的图像滤镜,就可以在不增加网页体积的情况下实现一些特殊的视觉效果,转载 2009-07-24 14:27:00 · 1146 阅读 · 0 评论 -
CSS中跨浏览器的inline-block实现
我们在制作网页时,有时会希望一个元素既能像 block 一样定义宽度和高度,又可以像普通的 inline 一样不断行。例如下面这张图片中红线标出的地方: 通常我们实现这样的效果会使用这样的代码: 这样虽然可以达到目的,但相对来说代码还是不够精炼,也不够灵活。而理想的方式,我们仅通过下面的代码即可实现:转载 2009-07-24 14:59:00 · 377 阅读 · 0 评论 -
CSS运用的二十四个技巧
在CSS网页布局开发中,会有很多小技巧,新手朋友往往对此很不熟悉。在某一两个小问题上,或许纠缠很长时间才能搞明白,虽然在的文档中,多次提及过这方面的内容,但依然有很多朋友在这些问题上犯错。我们今天看看这些CSS技巧,认真读一读,或许您并不能完全理解,您可以在进行搜索,扩展您所想要得到的知识,相信您会有很多收获!一、ul标签在Mozilla中默认是有padding值的,而在IE中只有ma转载 2009-07-24 14:26:00 · 348 阅读 · 0 评论 -
CSS经典技巧20条总结
一、CSS字体属性简写规则 一般用CSS设定字体属性是这样做的:font-weight: bold; font-style: italic; font-varient: small-caps;font-size: 1em; line-height: 1.5em; font-family: verdana,sans-serif但也可以把它们全部写到一行上去: font: bold it转载 2009-07-24 14:54:00 · 378 阅读 · 0 评论 -
征服高级CSS选择器
CSS是对网页设计师可用的最强大的工具之一。使用它我们可以在几分钟内改变一个网站的界面,而不用改变页面的标签。但是尽管事实上,我们每个人也都意识到了它是有用的,CSS 选择器远未发挥它们的潜力,有的时候我们还趋向于使用过多的和无用的class、id、div、span等把我们的HTML搞的很凌乱。避免让这些“瘟疫”在你的标签中传播并保持其简洁和语义化的最佳方式,就是使用更复杂的CSS转载 2010-03-26 11:31:00 · 409 阅读 · 0 评论