1.网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则,页面区块划分,内部样式分类等,要具有系统性。
2.li标签前面的图标推荐使用background-image,而不是list-style-image.
3.如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。因为图片丢失了,也可以保持文字的可读性。
4.定义链接的四种状态要注意先后顺序: Link Visited Hover Active
5.<script>没有language这个属性,应该写成这样:<script type=”text/javascript”>
6.按字母顺序来排列css,理由是这样可以更好的找到某个属性。
7.使用css注释来分给css分组,这样结构明了,也有利于协同设计。
/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
8.一个选择器的所有属性写在一行,还是每个属性写一行,保持一致性。
9.对html的标记弄好后再写css会比较不容易出错。比如我写一个页面,先写一个最基本的标记结构。
10. 同时使用两个类
一般只能给一个元素设定一个类(Class),但这并不意味着不能用两个。事实上,可这样:
<p class=”text side”>…</p>
同时给P元素两个类,中间用空格格开,这样所有text和side两个类的属性都会加到P元素上来。如果它们两个类中的属性有冲突的话,后设置的起作用,即在CSS文件中放在后面的类的属性起作用。
补充:对于一个ID,不能这样写<p id=”text side”>…</p>
11.CSS用于文档打印
许多网站上都有一个针对打印的版本,但实际上这并不需要,因为可以用CSS来设定打印风格。
也就是说,可以为页面指定两个CSS文件,一个用于屏幕显示,一个用于打印:
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css”
media=”screen” />
<link type=”text/css” rel=”stylesheet” href=”printstyle.css”
media=”print” />
第1行就是显示,第2行是打印,注意其中的media属性。
但应该在打印CSS中写什么东西呢?你可以按设计普通CSS的方法来设定它。设计的同时就可以把这个CSS设成显示CSS来检查它的效果。也许你会使用 display: none 这个命令来关掉一些装饰图片,再关掉一些导航按钮。要想了解更多,可以看“打印差异”这一篇。
12. 图片替换技巧
一般都建议用标准的HTML来显示文字,而不要使用图片,这样不但快,也更具可读性。但如果你想用一些特殊字体时,就只能用图片了。
比如你想整个卖东西的图标,你就用了这个图片:
<h1><img src=”widget-image.gif” alt=”Buy widgets” /></h1>
这当然可以,但对搜索引擎来说,和正常文字相比,它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。所以方法应该是这样的:
<h1>Buy widgets</h1>
但这样就没有特殊字体了。要想达到同样效果,可以这样设计CSS:
h1 { background: url(widget-image.gif) no-repeat; height: image height text-indent: -2000px }
注意把image height换成真的图片的高度。这里,图片会当作背景显示出来,而真正的文字由于设定了-2000像素这个缩进,它们会出现在屏幕左边2000点的地方,就看不见了。但这对于关闭图片的人来说,可能全部看不到了,这点要注意。
分享到:
相关推荐
通过课程设计,学生可以将课本上的理论知识和实际有机地结合起来,锻炼学生分析、解决实际问题的能力,并养成良好的网页编程习惯。 熟练掌握HTML基础知识。 基本掌握CSS格式化网页知识。 基本掌握...
但是我觉得良好的习惯会体现一个人的素质。 我们在软件开发网中向大家介绍过很多CSS经验与技巧,这些东西都发布在https://www.jb51.net/css/的文章中,相信对大家是有一些帮助与启发的。有些习惯显得尤为重要,...
(4-08-08-09) 美术编辑 (2-10-02-02) 广告设计、 网页设计、 UI 设计、 包装装潢设计、 美术编辑 广告设计师、 广告策划师、 网页设计师、 包装设计师、 平面设计师 五、培养目标和培养规格 (一)培养目标 根据...
成良好的归类和命名习惯。此外,在编写静态网页的过程中,学会进行 注释,既可以记录思路,帮助总结,也可以帮助团队其他成员,当前的 问题,也可以为以后进阶为中级、高级工程技术人员打下良好的基础。 制作一个...
也就是总结一下,良好的书写习惯对于后期的维护有着很让人惊诧的作用;同时,书写习惯决定了阅读的难易程度。而这里的写法,基本上也就是对css从了解到熟悉到主动思考的一个过程。刚开始的写法 .menu ul li{color:#...
在教学过程中,长期渗透自学理念,学生们已经有了较强的自学能力和良好的课前预习习惯。因此,尽管本课是一节综合项目设计课程,我还是在教学方法中渗透自主探究学习法,相信学生有能力获得成功。 全国计算机类说课...
Flash格斗动画的动作设计和动作的制作2007-11-01 23:00:42 来源:闪吧 justsolo■第一课:理论基础 首先我们要先确立对象,我们的对象是格斗的动作设计,以及动作的动画制作,不需要多余的场景,不需要多余的噱头,把握好...
本书适合初、中级网页设计爱好者阅读参考。 第1篇 新手上路 第1章 Web标准和XHTML基础 2 1.1 Web标准概述 3 1.1.1 结构 3 1.1.2 表现 4 1.1.3 行为 4 1.2 Web标准的发展历史 5 1.3 Web标准的优点 6 1.4 XHTML基础 7 ...
和朋友讨论时,我提到过一个观点,所有框架层设计中,最核心的是导航设计。最近更看到有国外同行提出“80%的可用性是导航!”因为良好的导航可以保证用户找到任何信息。也就是说,提供到达的可能,远比如何到达的...
代码质量-您是否遵循良好的编码习惯? 您的代码易于遵循和维护吗? 是否可以测试? 正确性-您的应用程序有效吗? 是否符合功能规格? 技术选择-您对库,软件包和工具的选择是否合适? 奖励积分: 测试-是否有足够的...
4、具备扎实的面向对象编程、设计能力及良好的单元测试习惯。 5、能编写简单web应用,熟悉Django框架,使用和调优MySQL。 6、熟悉多线程网页抓取原理及技术,熟悉基于Cookie的网站登录原理,熟悉scrapy爬虫框架。 ...
前台上面把网页制作得有指 导性和更加美观,使网站中的产品有秩序、科学化的分类,便于购买者查询,来吸引大 批的购买者。 2 .建设网站目的及功能定位 根据公司的需要和计划,建立网站,确定是进行电子商务,是市场...
1. 采用B/S模式进行开发,其优点是后台与前台处理层次分明,而且符合众多已经习惯网页方式的用户。 2. 采用面向对象的开发与设计理念。运用面向对象技术的前提是对整体系统的高度和准确抽象,通过它可以保证系统良好...
1. 采用B/S模式进行开发,其优点是后台与前台处理层次分明,而且符合众多已经习惯网页方式的用户。 2. 采用面向对象的开发与设计理念。运用面向对象技术的前提是对整体系统的高度和准确抽象,通过它可以保证系统良好...
1. 采用B/S模式进行开发,其优点是后台与前台处理层次分明,而且符合众多已经习惯网页方式的用户。 2. 采用面向对象的开发与设计理念。运用面向对象技术的前提是对整体系统的高度和准确抽象,通过它可以保证系统良好...
1. 采用B/S模式进行开发,其优点是后台与前台处理层次分明,而且符合众多已经习惯网页方式的用户。 2. 采用面向对象的开发与设计理念。运用面向对象技术的前提是对整体系统的高度和准确抽象,通过它可以保证系统良好...
1. 采用B/S模式进行开发,其优点是后台与前台处理层次分明,而且符合众多已经习惯网页搜索方式的用户。 2. 采用面向对象的开发与设计理念。运用面向对象技术的前提是对整体系统的高度和准确抽象,通过它可以保证系统...
1. 采用B/S模式进行开发,其优点是后台与前台处理层次分明,而且符合众多已经习惯网页方式的用户。 2. 采用面向对象的开发与设计理念。运用面向对象技术的前提是对整体系统的高度和准确抽象,通过它可以保证系统良好...