我的书签
添加书签
移除书签31.3 加入文字
网页中层的布局主要是显示文本信息，来表达站点的信息内容，在添加层的文本内容后，文本在CSS里面的默认效果是不美观的，为了改变这些值，需要对CSS文本属性再次设置。本实例在中间部分的右边添加文本，文本内容根据页面的性质决定。下面是对游戏公司信息的简单介绍。文本添加分成两步，第一步为中间右边栏只有一个层的效果；第二步为添加完层rightup后的效果，代码如下所示。
01 ＜div id="right"＞
02 ＜div id="rightup"＞
03 ＜div id="floatleft"＞＜/div＞＜div id="floatright"＞＜/div＞
04 ＜marquee direction="up"height="185px"＞
05 ＜h4＞2007年＜/h4＞
06 ＜p＞5月，X'Zone游戏平台项目启动，项目团队为禧添公司前身。
07 ＜p＞7月，X'Zone项目前期市调工作完成，开始一期研发工程。
08
09 ＜h4＞2008年＜/h4＞
10 ＜p＞1月，X'Zone项目团队入驻无锡新区创新创意园区。
11 ＜p＞3月，无锡禧添（SHOWTIME）网络信息技术有限公司正式成立。
12
13 ＜/marquee＞
14 ＜/div＞
15 ＜div id="rightbox"＞
16 ＜p＞2008年3月5日，一群专注于互联网互动娱乐内容的年轻人汇聚在无锡，将各
17 自的梦想合而为一，再炼成龙骨、铸成蒙皮、锻成甲板、编成风帆，造出一艘源于梦想承载梦
18 想的船，名为"禧添"！
19 ＜p＞＜strong＞无锡禧添（SHOWTIME）网络信息技术有限公司＜/strong＞，开始起航！
20
21 ＜p＞禧添公司是无锡第一家由无锡人自己创办的专业互联网互动娱乐公司，在成立时
22 即得到了无锡市政府相关部门和新区信软办的大力支持。公司注册资本100万，主要从事互联
23 网互动娱乐软件的开发和运营，以及互联网增值服务和人才培训等业务。
24 ＜p＞目前，禧添公司落户在无锡新区创新创意园区，各项业务正在迅速开展中。在未
25 来，禧添将秉持"激情、专心、细致"的方针，以最大的努力，向中国广大的互联网用户提供
26 最优质的服务。
27 ＜div id="cornortl"＞＜/div＞＜div id="cornortr"＞＜/div＞
28 ＜div id="cornortbl"＞＜/div＞＜div id="cornorbr"＞＜/div＞
29 ＜/div＞
30 ＜/div＞
【代码解析】对rightbox层加入文本后，显示的内容被全局设置的body所控制，如字体大小为12像素，字体为默认的宋体等，在层rightup中，设置了文本向上移动，用到标记＜marquee＞（代码第4～13行），效果如图31.7所示。
对文本的设置还是默认值，效果如图31.7所示，可以看出，对文本的布局还没有把握好，文本看起来较小，而且字体也不好看，要对这些字体等文本属性进行调整，需要对两个包含这些文本层的CSS设置。设置结果如下。
图 31.7 加入文本后
/设置右边的内容区，上面的层/
01 #rightup
02 {
03 width：620px；
04 margin：12px；
05 padding：20px 0px 0px 10px；
06 border：1px solid#42605e；
07 background：url（images/p.gif）repeat-x；
08 position：relative；
09 /设置文本字体/
10 font-family："隶书"；
11 /设置文本大小/
12 font-size：14px；
13 }
14 /设置右边的内容区，在rightup下面的层/
15 #rightbox
16 {
17 margin：12px 0px 12px 12px；
18 border：1px solid#42605e；
19 width：551px；
20 height：240px；
21 position：relative；
22 padding：40px；
23 /设置文本字体/
24 font-family："隶书"；
25 /设置文本大小/
26 font-size：15px；
27 /设置字体颜色/
28 color：#42605e；
29 }
【代码解析】通过设置这两个层的属性，使在其内容的文本发生了变化，文本字体变了，不是默认的宋体，变成有中国风的隶书（代码第10、24行），字体大小不再是在body中设置的12像素了，分别设置为14像素（代码第12行）和15像素（代码第26行），而对rightbox的字体颜色设置为#42605e（代码第28行），与边框颜色一样，变化后的内容区效果如图31.8所示。
图 31.8 修改后的文本效果
对字体等文本的设置可以定义一个类选择符，因为有的文本不在同一段落，但设置的效果却是一样的，这样可以提高布局的效率。
对定位的设置需要注意的是，在一个容器层中设置相对定位，然后在其层中包含绝对定位的层，即在相对定位中包含绝对定位，没有设置相对定位的话，直接用绝对定位时，位置是相对body的移动的，即所设置的位置从页面的左顶部开始。在本实例中，中间部分的左边和右边都设置float为left，向左漂移，当在底部开始布局时，所设置的层往上面移动，这是不合理的设置，也是初学者很难把握的一点。在本实例中解决的方法是对漂移到上面的层设置clear，即本实例中的ID为b的层设置了clear值为both，表示不向两边漂移。
