动态网站制作指南
[  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
电脑书籍下载:程序设计书籍 | 数据库教程书籍 | 平面与多媒体书籍 | 网络通讯书籍 | 系统管理书籍 | 网络安全书籍 | 认证考试书籍
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ CSS教程 ]的信息

本月文章推荐
.第二章 CSS的应用方式.
.CSS层叠样式的主次顺序.
.用CSS控制网页总体风格.
.CSS实现导航条图片的翻转菜单.
.DIV+CSS常见错误汇总.
.如何用CSS让文字居于div的底部.
.用CSS实现的一张图完成的导航条.
.无延迟翻滚的图形与CSS混合风格按.
.导航上用CSS标志当前页效果的实现.
.CSS 循序渐进(四)表里春秋.
.CSS的常用技巧放送.
.CSS特点及加入网页的四种方法.
.CSS+DIV设计实例:不同色链接和其.
.利用相对定位及偏移量做精美输入.
.CSS教程:li和ul标签用法举例.
.CSS 循序渐进(三)样式“表”秀 .
.CSS中如何正确的使用id和class.
.Firefox CSS私有属性备忘记录.
.相册的自动播放效果SlideShow.
.第三章 CSS的应用补充.

CSS制作网页编写的提醒及小技巧整理

文章类别:CSS教程 | 发表日期:2007-10-16 |


     1、ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值。

  2、同一个的class选择符可以在一个文档中重复出现,而id选择符却只能出现一次;对一个标签同时使用class和id进行CSS定义,如果定义有重复,id选择符做的定义有效,是因为ID的权值要比CLASS大。

  3、一个兼容性调整(IE和Mozilla)的笨办法:初学可能会碰到这样一个情况:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必须要设成B才能正常显示,或者两个倒过来。

  临时解决方法:选择符{属性名:B !important;属性名:A}

  4、如果一组要嵌套的标签之间需要些间距的话,那就留给位于里面的标签的margin属性吧,而不要去定义位于外面的标签的padding

  5、li标签前面的图标推荐使用background-image,而不是list-style-image。

  6、IE分不清继承关系和父子关系的差别,全部都是继承关系。

  7、在给你的标签疯狂加选择符的时候,别忘了在CSS里给选择符加上注释。 等你以后修改你的CSS的时候就知道为什么要这么做了。

      8、如果你给一个标签设置了一个深色调的背景图片和亮色调的文字效果。建议这个时候给你的标签再设置一个深色调的背景颜色。

    9、定义链接的四种状态要注意先后顺序: Link Visited Hover Active

  10、与内容无关的图片请使用background

  11、定义颜色可以缩写#8899FF=#89F

  12、table在某些方面比其它标签表现的要好的多。请在需要列对齐的地方用它。

      13、<script>没有language这个属性,应该写成这样:
以下是引用片段:
<script type=”text/javascript”> 


      14、标题是标题,标题的文字是标题的文字。有时候标题不一定需要显示文字,所以 以下是引用片段:
<h1>标题内容</h1> 改成 <h1><span>标题内容</span></h1> 


      15、完美的单象素外框线表格(在IE5、IE6、IE7及FF1.0.4以上中均可通过测试) 以下是引用片段:
table{border-collapse:collapse;}
td{border:#000 solid 1px;} 

 

      16、margin取负值可以在标签使用绝对定位的时候起到相对定位的作用,在页面居中显示时,使用绝对定位的层不适合使用left:XXpx这个属性。把这个层放到一个要相对定位的标签旁,然后使用margin的负值是个好方法。 

      17、绝对定位时使用margin值定位可以达到相对于本身所在位置的定,这与top,left等属性相对与窗口边缘的定位不同。绝对定位的优势在于可以让其它元素忽略它的存在。

      18、如果文字过长,则将过长的部分变成省略号显示:IE5,FF无效,但可以隐藏,IE6有效 以下是引用片段:
<DIV STYLE=”width:120px;height:50px;border:1px solid blue;overflow:hidden;text-overflow:ellipsis”>
<NOBR>就是比如有一行文字,很长,表格内一行显示不下.</NOBR> 

 

      19、在IE中可能由于注释带来的文字重复问题时可以把注释改为:
以下是引用片段:
<!–[if !IE]>Put your commentary in here…<![endif]–> 


      20、如何用CSS调用外部字体   以下是引用片段:
语法:
@font-face{font-family:name;src:url(url);sRules}取值:
name:字体名称。任何可能的 font-family 属性的值
url(url):使用绝对或相对 url 地址指定OpenType字体文件
sRules:样式表定义 

 

      21、如何让一个表单中的文本框中的文字垂直居中?

      如果用行高与高度的组在FF中是没有效果的,办法就是定义上下补白就可以实现想想的效果了。

      22、定义A标签要注意的小问题:

      当我们定义a{color:red;}时,它代表了A的四种状态的样式,如果此时要定义一个鼠标放上的状态只要定义a:hover就可以了,其它三种状态就是A中所定义的样式。
只定义了一个a:link时,一定要记得把其它三种状态定义出来!


      23、并不是所有样式都要简写:
以下是引用片段:
当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增加了一个样式上补白5px,下补白6px。我们并不一定要写成p.style1{padding:5px 6px 3px 4px}。可以写成p.style1{padding-top:5px;padding-right:6px;},你可能会感觉这样写还不如原来那样好,但你想没想过,你的那种写法重复定义了样式,另外你可以不必去找原来的下补白与左补白的值是多少!如果以后前一个样式P变了话,你定义的p.style1的样式也要变。 


      24、网站越大,CSS样式越多,开始做前,请做好充分的准备和策划,包括命名规则。页面区块划分,内部样式分类等。 网页爱好者(www.html.org.cn)
      25、几个常用到的CSS样式:

      1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph;

      2)固定宽度汉字截断:overflow:hidden;text-overflow:ellipsis;white-space:nowrap;(不过只能处理文字在一行上的截断,不能处理多行。)(IE5以上)FF不能,它只隐藏。

      3)固定宽度汉字(词)折行:table-layout:fixed; word-break:break-all;(IE5以上)FF不能。

      4)<acronym title=”输入要提示的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的很多网站都可以看到,而国内的少又少。 网页爱好者(bbs.html.org.cn)
      5)图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的东西;


      6)FLASH透明:选中swf,打开原代码窗口,在</object>前输入<param name=”wmode” value=”transparent”> 以上是针对IE的代码。
针对FIREFOX 给<embed> 标签也增加类似参数wmode=”transparent”
      7)在做网页时常用到把鼠标放在图片上会出现图片变亮的效果,可以用图片替换的技巧,也可以用如下的滤镜:
以下是引用片段:
.pictures img {
filter: alpha(opacity=45); }
.pictures a:hover img {
filter: alpha(opacity=90); } 


上一篇:CSS学习精品网站推荐 人气:6286
下一篇:简单的CSS改进网站设计的三个技巧 人气:3054
点击此处浏览全部CSS的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-5-16 乘风多用户PHP统计系统 v3.4
2008-5-16 轩溪下载系统 v3.78 build 0515
2008-5-16 普沙B2B 浙江省商贸网 v2.0
2008-5-16 asp抓蜘蛛的小程序 v1.0
2008-5-16 齐齐乐网私服发布站 仿haosf新版
2008-5-16 IssTech信息反馈系统 v1.0
2008-5-16 自由领域大头贴(js接口版) 修正版
2008-5-16 医院网站系统
2008-5-16 智拓-分类信息管理系统 v5.0
2008-5-7 Windows XP SP3 官方英文版
2008-5-7 Windows XP SP3 官方香港中文版
2008-5-7 Windows XP SP3 官方繁体中文版
2008-5-7 Windows XP SP3 官方简体中文版
2008-4-30 Multiple Unzip Wizard 1.02
2008-4-30 Multiple Unrar Wizard 1.0.0
2008-4-30 WinZip Install/Try/Uninstall a
2008-4-30 ZIP压缩文件修复器WzipFix 2.0
2008-4-30 Pentazip 6.01 Build 189 For Wi
  发表评论
姓 名: 验证码: [ 全部贴吧 ] [ 浏览评论 ]
内 容:
[ 汉字翻译拼音 ] [ 广告代码 ] [ 符号对照表 ] [ 进制转换 ] [ 经典小工具 ] [ 个税计算 ] [ 汉字简繁转换 ] [ 普通单位换算 ] [ 公制单位换算 ]
[ 生辰老黄历 ] [ 国内电话区号 ] [ 国家代码与域名缩写 ] [ 文字加密解密 ] [ 健康查询 ] [ 万年历 ] [ 手机号码查询 ] [ ip搜索 ] [ Google PR查询 ]
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報