网页制作与设计实验.pdfVIP

《网页设计与制作》实验报告 姓名 学号 班级 实验日期 第 10 周（星期一 ） 月 日第 78 节 项目号、实验名称 CSS 样式表（一）—— CSS 基本选择器、外部样式表 实验目标： 熟练掌握使用 CSS基本选择器 熟练掌握使用链接式外部样式表 实验所需软件： Ultra Edit 实验内容 ： 1 练习 —— 制作《如梦令》 需求说明 根据提供的素材，使用 CSS 基本选择器，采用内部样式表，制作《如梦令》 ，效 果如图 1.1 所示，具体要求如下。 使用标签选择器设置标题字体大小为 20px 页面中所有段落中的文本字体大小为 16px 使用类选择器设置正文和译文内容字体颜色为绿色 使用 ID 选择器设置译文标题颜色为蓝色 实 验 要 求 （任 课 教 师 提 供 ） 图 1.1 如梦令 2、练习 —— 贵美商品分类页 需求说明： 根据提供的素材， 使用外部样式表， 实现如图 1.2 所示的页面美化效果， 具体 要求如下。 使用 ID 选择器设置整个 div 总宽度 200px，背景色灰色 #ccc 使用类选择器设置列表项 “家用电器”和 “日用百货”字体为橘色 （#ff7300 ）， 粗体，大小为 14px 使用标签选择器设置其余列表项的 字体大小为 12px。 图 1.2 贵美商品分类页 html head title 如梦令 /title 实 style type=text/css 验 内 li{color:black;font-size:20px;} 容 .green{color:green;font-size:16px;} （由 学 #menu{color:blue} 生 /style 填 写 ） /head body div h2 如梦令 /h2 hr/ p class=green 昨夜雨疏风骤，浓睡不消残酒。 br/ 试问卷帘人，却道“海棠依旧” 。br/ “知否？知否？应为绿肥红瘦。 ”/p p id=menu 译文 /p p class=green 昨夜雨点稀疏，晚风急猛，我虽然睡了一夜，仍 br/ 有余醉未消。试问卷帘的侍女：海棠花怎么样？ br/ 她说海棠花依然如旧。知道吗？知道吗？应是绿 br/ 叶繁茂，红花凋零。 /p /div /body /html html head title 贵美商品分类 /title link rel=stylesheet href=css/style.css type=text/css / /head body div id=menu