当前位置: 网站建设 > 网页设计 > 建站经验 >

制作网页时编写CSS代码的25个小技巧

时间:2013-03-02 03:57来源:未知 作者:admin 点击:

标签:制作网页时编写CSS代码的25个小技巧 代码(82)制作(46)两端(2)网页(168)CSS(655)对(4)技巧(106)25个(4)文字(34)编写(10)
1)中文字两端对齐:text-align:justify;text-justify:inter-ideograph; 5、li标签前面的图标推举使用background-image,而不是list-style-image。 12、table在某些方面比其它标签表示的要好的多。请在需要列对齐的处所用它。 23、并不是所有样式都要简写: 当样式表前定义了如p{padding:1px 2px 3px 4px}时,在后续工程中又增长了一个样式上补白5px,下补白6px。我们并不一定要写成p.style1{padd
制作网页时编写CSS代码的25个小技巧》文章地址:http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302339212013.htm

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

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

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


      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的样式也要变。  

--> [网站建设之]制作网页时编写CSS代码的25个小技巧

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

      17、绝对定位时使用margin值定位可以到达相对自身所在地位的定,这与top,left等属性相对与窗口边沿的定位不同。绝对定位的上风在于可以让其它元素疏忽它的存在。

  常设解决办法:选择符{属性名:B !important;属性名:A}

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

  7、在给你的标签猖狂加选择符的时候,别忘了在CSS里给选择符加上注解。 等你当前修正你的CSS的时候就晓得为什么要这么做了。

      4)<acronym title=”输入要提醒的文字” style=”cursor:help;”>文字</acronym>用鼠标放在前面的文字上看效果。这个效果在国外的良多网站都可以看到,而海内的少又少。 

 

     ,制作网页十大诀窍; 13、<script>没有language这个属性,应当写成这样:
以下是引用片段:
<script type=”text/javascript”> 

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

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

      21、如何让一个表单中的文本框中的文字垂直居中,别被域名后缀迷惑了你

Tag:制作网页     制造网页    

  3、一个兼容性调剂(IE和Mozilla)的笨方法:初学可能会遇到这样一个情形:同样一个标签的属性在IE设置成A显示是正常的,而在Mozilla里必需要设成B才干畸形显示,利用纯CSS实现小三角、小梯形,或者两个倒过来。


      24、网站越大,CSS样式越多,开端做前,请做好充足的筹备和谋划,包含命名规矩。页面区块划分,内部样式分类等。 
      25、多少个常用到的CSS样式:

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


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

 

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

  6、IE分不清继承关系和父子关联的差异,全体都是继续关系。

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

 

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


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

 ,利用百度知道推广网站;   9、定义链接的四种状态要留神先后次序: Link Visited Hover Active

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

  2、统一个的class挑选符能够在一个文档中重复呈现,而id抉择符却只能涌现一次;对一个标签同时应用class跟id进行CSS定义,假如定义有反复,id取舍符做的定义有效,是由于ID的权值要比CLASS大。

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


      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); }

 ,利用春节期间让你的流量飞起来;     5)图片设为半透明:.halfalpha { background-color:#000000;filter:Alpha(Opacity=50)}在IE6及IE5测试通过,FF未通过,这是因为这个样式是IE私有的货色;

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

      如果用行高与高度的组在FF中是不效果的,措施就是定义高低补白就可以实现想想的效果了。

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


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


(责任编辑:网站建设)
制作网页时编写CSS代码的25个小技巧相关文章
上一篇:制作网页十大诀窍 下一篇:制作网页评论表单
回到顶部