当前位置:首页>>软件教程>>网页制作>>新闻内容  |虚拟主机 主机托管
css网页设计小技巧
作者: 发布时间:2006-9-26 11:55:30 | 【字体:


同样的办法也可以为IE实现最大宽度:

#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth < 600? "600px" : document.body.clientWidth > 1200? ”1200px“ : ”auto";
}

4. IE与宽度和高度的问题

IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。

比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

.box
{
width: 80px;
height: 35px;
}

html>body .box
{
width: auto;
height: auto;
min-width: 80px;
min-height: 35px;
}

所有的浏览器都可以使用第一个box设置,但IE不认得第2段设置,因为其中用到了子选择器命令。第2个设置更特殊些,所以它会覆盖掉第1个设置。

5. 字体变形命令

text-transform 命令很有用,它有3个值:text-transform: uppercase, text-transform: lowercase 和 text-transform: capitalize。第1个会把文字变成全大写,第2个变成全小写,第3个变成首字母大写。这对拼音文字非常有用,即使输入时有大小写错误,在网页上也看不到。

6. IE中图片文字消失的问题

有时会遇到文字或背景图突然消失的问题,刷新一下又出现了,这在靠近漂浮元素时更容易发生(注:没见过)。此时,可以为消失的元素设定: position: relative ,如果不行,再考虑为这些元素指定一个宽度试试。

7. 不可见文字

不论因为何种原因希望某些网页文字不在浏览器中显示,比如为了打印或为了小屏幕而让某些文字不显示,都可以用 display: none 。这非常简单,但有时对某些人这有点没用,他们能去掉这个控制,这时就要用到: position: absolute; left: -9000px 。

这实际上是把文字指定在页面以外显示。

8. 为手持设备设计专门的CSS

也就是手机/PDA等小屏幕用户,可以专门设计一个CSS来让网页显示更舒服些。为此,可以把浏览器窗口调整到150点宽来看效果。指定专门的手持设备的CSS的语法是:

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld" />

也可以阅读专门的手持设备可用性。

9. 3D效果的按钮

以前要想制作带有3D效果,并且点击下去还会变化的按钮,就得用图片替换的方法,现在CSS就可以了:

a
{
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

至于效果,还可以自己调整了。

10. 在不同页面上使用同样的导航代码

许多网页上都有导航菜单,当进入某页时,菜单上相应这一项就应该变灰,而其他页亮起来。一般要实现这个效果,需要写程序或专门为每一页做设计,现在靠CSS就可以实现这个效果。

首先,在导航代码中使用CSS类:

<ul>
<li><a href="#" class="home">Home</a></li>
<li><a href="#" class="about">About us</a></li>
<li><a href="#" class="contact">Contact us</a></li>
</ul>

然后分别为每一页的Body指定一个id,和上面类同名。如<body id="contact">。

然后设计CSS如下:
#home .home, #about .about, #about .about
{
commands for highlighted navigation go here
}

这里,当id设为home时,.home就会起作用,也就是class设为home的那一行导航条就会显示出特殊效果来。其他页也是如此。


[首页]    [上一页]    [下一页]    [末页]    
文章来源:
 放生
 愚爱
 够爱
 触电
 白狐
 葬爱
 光荣
 画心
 火花
 稻香
 小酒窝
 下雨天
 右手边
 安静了
 魔杰座
 你不像她
 边做边爱
 擦肩而过
 我的答铃
 怀念过去
 等一分钟
 放手去爱
 冰河时代
 你的承诺
 自由飞翔
 原谅我一次
 吻的太逼真
 左眼皮跳跳
 做你的爱人
 一定要爱你
 飞向别人的床
 爱上别人的人
 感动天感动地
 心在跳情在烧
 玫瑰花的葬礼
 有没有人告诉你
 即使知道要见面
 爱上你是一个错
 最后一次的温柔
 爱上你是我的错
 怎么会狠心伤害我
 不是因为寂寞才想
 亲爱的那不是爱情
 难道爱一个人有错
 寂寞的时候说爱我