CSS选择器修饰贵美商品分类制作圆角矩形背景.docxVIP

内蒙古科技大学信息工程学院计算机系《网页设计与制作》实验报告姓名张燕斌学号1267159206实验成绩班级软件12级 2 班实验日期第 15 周（星期五 ） 12 月12 日第 56 节项目号、实验名称实验7 CSS选择器、修饰贵美商品分类、制作圆角矩形背景实验要求（任课教师提供）实验目标：熟练掌握使用CSS样式美化网页掌握使用背景样式美化网页实验所需软件： Ultra Edit实验内容：1、练习——CSS选择器。需求说明：使用各类CSS选择器，在给定“素材页面”中，实现如图1.1所示的页面美化效果，具体要求如下。整个div总宽度200px，背景色灰色#ccc列表项“家用电器”和“日用百货”字体为橘色（#ff7300），粗体，大小为14px其余列表项的 字体大小为12px。图1.1 贵美商品分类页2、练习——修饰贵美商品分类。需求说明：根据提供的“素材页面”，修饰上一练习-贵美分类，效果如图1.2所示，具体要求如下。欢迎词：字符间距5px并带下划线。商品分类用提供的背景，家用电器、日用百货为为14px字体醒目显示，表示商品分类。各商品类别下的商品名称用12px字体显示，各列表名称间有一定的间隔。顶边距可以使用一个空ul，设置高度为15px。图1.2 贵美商品分类练习——制作圆角矩形背景。需求说明：使用如图1.3所示提供的背景素材，在提供的“素材页面”中，补充完成如图1.4所示的圆角矩形效果。图1.3 提供的背景图片图1.4 图像偏移技术的简单应用实验内容（由学生填写）1、head title贵美商城/titlestyle type=text/css#menu{width:200px; background:#ccc;font: 12px 宋体;}.ul1{font:bold 14px 宋体;color: #ff7300;}/style/headbodydiv id=menuulli class=ul1家用电器/lili大家电/lili洗衣机/lili电冰箱/lili平板电视/li /ululli class=ul1日用百货/lili肥皂/lili洗衣粉/lili纸巾/lili洗发水/li/ul/div /body/html2、!DOCTYPEhtml PUBLIC-//W3C//DTD XHTML 1.0 Strict//EN /TR/xhtml1/DTD/xhtml1-strict.dtdhtmlxmlns=/1999/xhtmlhead meta http-equiv=Content-Type content=text/html; charset=gb2312 / title贵美商城/title/headbodystyle type=text/css.title{letter-spacing:5px;text-decoration:underline;};.menu-li{font-size:12px;float:left;width:50px;line-height:23px;text-align:left;};.space{height:15px;};#menu{width:200px;background:url(images/bg.gif) no-repeat;height:280px;};.menu-class{font-size:14px;color:#ff7300;list-style:none;line-height:28px;};/stylep class=title你好，欢迎访问贵美商城！/pdiv id=menuul class=space /ululli class=menu-class家用电器/lili class=menu-li大家电/lili class=menu-li洗衣机/lili class=menu-li电冰箱/lili class=menu-li相机/lili class=menu-li电视/lili class=menu-liDVD/lili class=menu-li相机/lili class=menu-li电视/lili class=menu-liDVD/li /ululli class=menu-class日用百货/lili class=menu-li肥皂/lili class=menu-li洗衣粉/lili class=menu-li纸巾/lili class=menu-li洗发水/lili class=menu-li洗洁精/lili class=menu-li毛巾/lili class=menu-li相机/lili class=menu-li电视/lili class=menu-liDVD/li/ul/div !--left-list end--/body/html3、