文本与列表的美化

《文本与列表的美化》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、任务一：创建导航栏网页0203.HTML任务描述任务为考核项目，请独立完成以下操作任务。利用div区块、ul项目列表和li列表项制作下图所示的导航栏。页面设计网页0203.HTML的整体布局如下图所示，类选择符名称是channel。#channel网页0203.HTML的局部布局结构如下图所示，分为左、中、右3个区块，其类选择符名称分别为left、list和right。#right#left#list实施过程1.新建文件夹，准备图像文件夹建立文件夹“0203”，在“0203”文件夹中建立子文件夹“css”和“images”，并将所需要的图

2、像复制到“images”子文件夹中。2.建立样式文件，定义样式在文件夹“css”中建立样式文件main0203.css，定义所需要的样式。样式文件main0203.css的CSS代码见下表。div{text-align:left;line-height:150%;font-size:12px;color:#555555}#channel{background:#ffffff;width:920px;height:41px;padding:0px0px10px;}#channel#left{float:left;width:25px;hei

3、ght:41px;background-image:url(../images/0201channel_left.gif);background-repeat:no-repeat;}#channel#list{float:left;width:840px;height:41px;background-image:url(../images/0201channel_background.gif);background-repeat:repeat-x;}#channelul{line-height:41px;list-style-type:n

4、one;margin:0px0px10px;}#channelli{float:left;text-align:center;}#channel#right{float:left;width:25px;height:41px;background-image:url(../images/0201channel_right.gif);background-repeat:no-repeat;}#channel.space{padding:0px10px;margin:0px2px;}1.新建网页文档0203.html在文件夹“0203”中创建

5、一个名称为“0203.html”的网页文档。2.链接外部样式表文件main0203.css切换到网页文档0203.html的“代码视图”，在标签前面输入1行链接外部样式表的代码，如下所示：3.对网页的页面进行布局切换到代码视图，在网页文档0203.html代码区域的与之间输入下表所示的XHTML代码。