admin 管理员组文章数量: 1086019
2024年5月26日发(作者：浮点数规格化例题讲解)
信息技术与信息亿
ＤＩＶ＋ＣＳＳ技术在网页设计中的应用
石溅军
Ｓｉｌｌ Ｊｉａｎ－ｊｕｎ
ｄｏｉ：１０．３９６９￣．ｉｓｓｎ．１６７２－９５２８．２０１４．０４．１０９
Ｄｉｖ全称ｄｉｖｉｓｉｏｎ意为“区分”使用ＤＩＶ的方法跟
标题或标致，右面是正文、显示内容。
使用其他ｔａｇ的方法一样。ＣＳＳ是Ｃａｓｃａｄｉｎｇ ｓｔｙｌｅ Ｓｈｅｅｔｓ
采用ＣＳＳ技术，可以有效地对页面的布局、字体、
应的代码做一些修改，就可以改变同一页面的不同
部分。
１ Ｄｉｖ＋ＣＳＳ的优点
其四，Ｆｌａｓｈ型与封面型结构是类似的，只是这种
页面所表达的信息更丰富，其视觉效果及听觉效果如
其五，封面型基本上是出现在一些网站的首页，
的简称，中文译作“层叠样式表单”，在网页制作时 类型游戏网站或校庆网站等。由于Ｆｌａｓｈ强大的功能，
颜色、背景等设置效果，更加精确的定位。只要对相 果处理得当，绝不差于传统的多媒体。
精美动画，几个简单的链接或者一个“进入”的链接
甚至直接在首页的图片上做链接进入。
ＣＳＳ编写容易，缩减了页面代码，提高了页面浏
３在ＨＴＭＬ中引入ＣＳＳ的方法
览速度，降低了带宽成本．强大的字体控制和排版能力；
提高易用性，更好地控制页面布局；表现和内容相
分离。
２常用网页结构
３．１行内式
行内式是在标记的ｓｔｙｌｅ属性中设定ＣＳＳ样式。只
对局部网页设置有效，对于栏目设计比较多一种。但
是修改比较麻烦，没有体现出ＣＳＳ的优势，一般情况
不推荐使用。
例女口：＜Ｐ ｓｔｙｌｅ＝“ｃｏｌｏｒ：ｒｅｄ；ｆｏｎｔ—ｓｉｚｅ：９ｐｘ；”＞
实例＜／Ｐ＞
３．２嵌入式
根据个人网页设计经验，结合长沙职业技术学院
二级网站设计，得出以下常用网页结构：“国”字型、
左右框架型、上下框架型、封面型、Ｆｌａｓｈ型。
其一， “国”字型或“同”字型，即最上面是网
嵌人式是将ＣＳＳ样式集中写在网页的＜ｈｅａｄ＞＜／
＜ｈｅａｄ＞
＜ｓｔｙｌｅ ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”＞
站的标题以及横幅广告条，接下来就是网站的主要内 ｈｅａｄ＞标签对的＜ｓｔｙｌｅ＞＜／ｓｔｙｌｅ＞标签对中。格式如下：
容，左右分两列小条内容，中间是主要部分，与左右
一
起到底，最下面是网站的一些基本信息、联系方式、
其二，上下框架型与上面类似，区别仅仅在于是
版权声明等。
种上下分为两页的框架。
此处写ＣＳＳ样式
＜／ｓｔｙｌｅ＞
＜／ｈｅａｄ＞
一
其三，左右框架型，是一种左右为分别两页的框 缺点：对于包含多个网页网站，在每个网页中使
３．３导人式
架结构，一般左面是导航链接，最上面一般一个小的 用嵌入式，进行修改样式时非常麻烦。
水长沙职业技术学院湖南长沙４１０２１７
将一个独立的．ＣＳＳ文件引入ＨＴＭＬ文件中，导人
信息技术与佰息化
式使用ＣＳＳ规则引入外部ＣＳＳ文件，＜ｓｔｙｌｅ＞标记也是
４３ ｕＩ方面的问题
写在＜ｈｅａｄ＞标记中，格式：
＜ｓｔｙｌｅ ｔｙｐｅ＝”ｔｅｘｔ／ｃｓｓ”＞
ｕｌ｛ｍａｒｇｉｎ：Ｏｐｘ；ｐａｄｄｉｎｇ：０ｐｘ；｝
４．４ ｉｍｇ方面的问题
ｉｍｇ｛ｄｉｓｐｌａｙ：ｂｌｏｃｋ｝
＠ｉｍｐｏ￣”ｍｙｓｔｙｌｅ．ＣＳＳ”；此处要注意．ＣＳＳ文件的路径，
末尾分号不能省。
＜／ｓｔｙｌｅ＞
４．５内容加边框
．
ｓｔｙｌｅ ｌ ｆｂｏｒｄｅｒ：ｓｏｌｉｄ；ｂｏｒｄｅｒ－ｗｉｄｔｈ：ｔｈｉｎ；ｐｘ ０ｐｘ
使用导入方式ｉｍｐｏ￣，但这种方式和内嵌式一样
ｍｅｄｉｕｍ；ｂｏｒｄｅｒ－ｃｏｌｏｒ：＃００００ＦＦ ｂｌａｃｋ ｂｌａｃｋ＃００ＦＦ００｝
６ ３Ｄ按钮
会占用网页文件的大小，并且有的浏览器解析会有问
４．
题，就是先显示网页内容，再组网页内容加样式。
３．４链接式
将一个．ＣＳＳ文件引人到ＨＴＭＬ文件中，但它与导
入式不同的是链接式使用ＨＴＭＬ规则引入外部ＣＳＳ文
件，它在网页的＜ｈｅａｄ＞＜／ｈｅａｄ＞标签中使用＜ｌｉｎｋ＞标记
来引入外部样式表文件，格式：
＜ｌｉｎｋ ｈｒｅｆ＝”ｍｙｓｔｙｌｅ．ＣＳＳ”ｒｅｌ＝”ｓｔｙｌｅｓｈｅｅｔ”ｔｙｐｅ＝”ｔｅｘｔ／
ＣＳＳ”／＞
使用链接式与导入式不同的是它会以网页文件主
体装载前装载ＣＳＳ文件，显示出来的网页从一开始就
是带样式的效果的，它不会象导入式那样先显示无样式
的网页，然后再显示有样式的网页，这是链接式的优点。
４ ＣＳＳ应用技巧应用
４．１部分文字加背景图像
定义一个ｃｓｓ，的代码如下：＜ｓｔｙｌｅ ｔｙｐｅ＝”ｔｅ
ＣＳＳ”＞
．．
＜！一
．
ｉｍｇｂｇｓｔｙｌｅ｛ｂａｃｋｇｒｏｕｎｄ－ｉｍａｇｅ：ｕｒｌ（１ｏｇｏ．ｇｉｆ）｝－－＞
＜／ｓｔｙｌｅ＞
在要用时选取那段文字，再在ＣＳＳ面板上点一下
“ｉｍｇｂｇｓｔｙｌｅ”就行。
４．２用样式表来控制超级链接的颜色
Ａ：ｌｉｎｋ｛ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；ｃｏｌｏｒ：ｂｌｕｅｌ是说
明了超级链接还没有被访问，无下划线，颜色为蓝色。
Ａ：ｖｉｓｉｔｅｄ｛ｃｏｌｏｒ：ｒｅｄ；ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｌｉｎｅ—
ｔｈｒｏｕｇｈ｝说明了超级链接被访问后，它的颜色变成了红
色，有了一根删除线。
Ａ：ａｃｔｉｖｅ｛ｃｏｌｏｒ：ｗｈｉｔｅ；ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：
ｕｎｄｅｒｌｉｎｅ｝说明超级链接处于活动状态时，颜色变成了
白色，有下划线。
Ａ：ｈｏｖｅｒ｛ｔｅｘｔ—ｄｅｃｏｒａｔｉｏｎ：ｎｏｎｅ；ｃｏｌｏｒ：＃ＦＦ００００；
ｂａｃｋｇｒｏｕｎｄ—ｃｏｌｏｒ：ｂｌａｃｋ）说明鼠标移动到超级链接后，
它没有下划线，文字颜色变成了黄色，背景颜色是黑色。
要使按钮具有３Ｄ效果，只要将它的左上部边框
设为浅色，右下部边框设为深色即可。
ｄｉｖ＃ｂｕｔｔｏｎ（
ｂａｃｋｇｒｏｕｎｄ：＃８８８：
ｂｏｒｄｅｒ：Ｉｐｘ ｓｏｌｉｄ：
ｂｏｒｄｅｒ—ｃｏｌｏｒ：＃９９９＃７７７＃７７７＃９９９：
｝
４．７用图片充当列表标志
默认情况下，浏览器使用一个黑圆圈作为列表标
志，可以用图片取代它：
ｕｌ｛ｌｉｓｔ—ｓｔｙｌｅ：ｎｏｎｄ
ｕｌ １２｛
ｂａｃｋｇｒｏｕｎｄ—ｉｎⅡｇｅ：ｕｒｌ（＂ｐａｔｈ—ｔｏ－ｙｏｕｒ－ｉｓａａｃ ）：
ｂａｃｋｇｒｏｕｎｄ－ｒｅｐｅａｔ：ｉｌｏｎ￣：
ｂａｅｋＪ￣ｒｏｕｎｄ－ｖｏｓｉｔｉｏｎ：０ ０．５ｅ皿一
｝
４．８
ＣＳＳ阴影
外阴影：
ｓｈａｄｏｗ ｆ
—ｍ０ｚ－ｂｏｘ－ｓｈａｄｏ．：５ｐｘ ５ｐｘ ５ｐｘ＃ｅｅｃ：
－ｗｅｂｋｉｔ－ｈＯＸ—ｓｈａｄｏｗ：５ｐｘ ５ｐｘ ５ｐｘ＃ｃｃｃ
ｂｏｘ－ｓｈａｄｏｗ：５ｐｘ ５ｐｘ ５ｐｘ＃ｅｅｃ：
｝
５结语
综上所述，层叠样式表运用在网页布局上的方式
多种多样，从相关方面进行探讨：可读性、方便性、
未来的修护性。对于设计人员来说，选择布局方式来
自于客户端的需求。
参考文献：
［１］ 谢永超，杨云辉．网页设计与制作［Ｍ］．北京：
中国电力出版社，２００５．
［２］ 耿杰．网页设计与制作［ｍ］．北京：科学出版社，
２０Ｏ５．
（收稿日期：２０１４—０５—２３）
版权声明：本文标题：DIV+CSS技术在网页设计中的应用 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/b/1716720007a696194.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论