头部局部布局使用超链接伪类实现导航条.docxVIP

PAGE PAGE 5内蒙古科技大学信息工程学院计算机系《网页设计与制作》实验报告姓名张燕斌学号1267159206实验成绩班级软件12级 2 班实验日期第 16 周（星期二 ） 12 月 16 日第 12 节项目号、实验名称实验9 头部局部布局、使用超链接伪类实现导航条实验要求（任课教师提供）实验目标：掌握float属性的应用场合及属性值、clear 属性的应用场合及属性值。掌握使用伪类样式控制超链接样式。实验所需软件： Ultra Edit实验内容：1、练习——头部局部布局。需求说明：在前面上机练习完成的页面中，实现header块的局部布局，效果如图1.1所示，实现思路如下。确定HTML的层次组织结构。确定各div块的宽度、高度属性。其中menu菜单块有左填充20px，上填充15px。确定哪些div块需要设置浮动及清除。细节修饰。图1.1 贵美商城网站的顶部布局练习——使用超链接伪类实现导航条。需求说明：用提供的背景图素材，实现如图1.2所示的导航菜单效果。链接无下划线（text-decoration），鼠标悬停，显示菜单的投影背景（background）、字体变大。导航条文字行高：24px、字体大小：10px要求使用外部样式表。div-ul-li结构。外部链接样式图1.2 导航菜单实验内容（由学生填写）1、!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtdhtml xmlns=/1999/xhtmlheadmeta http-equiv=Content-Type content=text/html; charset=utf-8 /title贵美商城/titlestyle type=text/css#all{width:880px; height:130px; margin:auto}#logo{ width:280px; height:96px; background:#999999; float:left}#menu{width:580px; height:39px; background:#CCCCCC; float:right}#hello{ width:580px; height:33px; background:#00FF33; float:right}#nav{ width:880px; height:34px; background:#00CCCC; clear:left} /style/headbodydiv id=alldiv id=logoLogo/divdiv id=menu顶部菜单(menu)/divdiv id=hello您好，贵美商城欢迎你！(hello)/divdiv id=nav导航条(nav)/div/div/body/html2、htmlheadtitle贵美商城主导航条/titlelink rel=stylesheet href=css/layout.css type=text/css //headbodydiv class=navul class=spacelia herf=#首 页/a/lilia herf=#家用电器/a/lilia herf=#手机数码/a/lilia herf=#日用百货/a/lilia herf=#书 籍/a/lilia herf#帮助中心/a/lilia herf=#免费开店/a/lilia herf=#全球咨询/a/li/ul/div/body/html评语（由教师填写）说明：1、每个实验项目填写一份实验报告，电子版命名方式为：学号姓名项目号.doc。例如：1167111182张三3.doc表示张三做的第3个项目的实验报告。2、实验报告电子版应该在实验后一周内由学习委员收齐后存放在一个文件夹下，文件夹命名方式为：软件12-1班3，表示软件12-1班第3个项目的实验报告，压缩。第一时间发送给任课教师。必须以班级为单位上交。3、任课教师要求在收到实验报告的一周内进行批阅，并给出成绩及评语。4、实验报告电子版由任课教师保存。5、表格宽度可以根据实际情况伸缩。