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

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