文本和列表美化.docVIP

任务一：创建导航栏网页0203.HTML 任务描述 任务为考核项目，请独立完成以下操作任务。 利用div区块、ul项目列表和li列表项制作下图所示的导航栏。 页面设计 网页0203.HTML的整体布局如下图所示，类选择符名称是channel。 #channel #channel 网页0203.HTML的局部布局结构如下图所示，分为左、中、右3个区块，其类选择符名称分别为left、list和right。 #right#left#list #right #left #list 实施过程 新建文件夹，准备图像文件夹 建立文件夹“0203”，在“0203”文件夹中建立子文件夹“css”和“images”，并将所需要的图像复制到“images”子文件夹中。 建立样式文件，定义样式 在文件夹“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: 0px 0px 10px; } #channel #left { float: left; width: 25px; height: 41px; background-image: url(../images/0201channel_left.gif); background-repeat: no-repeat; } #channel #right { float: left; width: 25px; height: 41px; background-image: url(../images/0201channel_right.gif); background-repeat: no-repeat;} #channel #list { float: left; width: 840px; height: 41px; background-image: url(../images/0201channel_background.gif); background-repeat: repeat-x; } #channel ul { line-height: 41px; list-style-type: none; margin: 0px 0px 10px; } #channel li { float: left; text-align: center; } #channel .space { padding:0px 10px; margin:0px 2px; } 新建网页文档0203.html 在文件夹“0203”中创建一个名称为“0203.html”的网页文档。 链接外部样式表文件main0203.css 切换到网页文档0203.html的“代码视图”，在标签/head前面输入1行链接外部样式表的代码，如下所示： link href=css/main0203.css rel=stylesheet type=text/css / 对网页的页面进行布局 切换到代码视图，在网页文档0203.html代码区域的body与/body之间输入下表所示的XHTML代码。 div id=channel div id=left/div div id=list …………… /div div id=right/div /div 在网页中出入图像和列表 在网页文档0203.html代码区域的div id=list与/div之间插入项目列表及其列表项，然后插入图像，输入相应的文字。 任务二：创建导航栏网页0204.HTML 任务描述 任务为考核项目，请独立完成以下操作任务。 利用div区块制作下图所示的0204.html网页，对于图像属性，利用图像面板进行设置。 页面设计 网页0204.HTML的整体布局如下图所示，类选择符名称是currentpath。 #currentpath #currentpath 网页0204.HTML的局部布局结构如下图所示，分为左、右2个区块，其类选择符名称分别为#currentpath_icon和#currentpath_text。 #currentpath_icon# #currentpath_icon #currentpath_text 实施过程 新建文件夹，准备图像文件夹 建立文件夹“0204”，在“0204”文件夹中建立子文件夹“css”和“image