重庆工商大学管理学院实验报告课程名称: 网页设计与制作实例教程实验名称: CSS 基础班级: 信息管理与信息系统一班姓名: 唐杰学号: 20130331 32 同组人: __ 无__ 实验日期: 2015. 12. 03 实验地点: 学创园 8A303 实验成绩: __________ 指导教师: 张世勇重庆工商大学管理学院实验报告-2- 1. 实验内容掌握 CSS 伪类; 层叠; CSS 选择器基本操作。 2. 实验环境(软件、硬件及条件) 在学创园的 XP 电脑上,进行网页设计与制作。 3. 实验过程分析(包括主要步骤和主要截图) 实例( 11-1 )实验步骤: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title> 列表</title> <style type="text/css"> <!-- li{ font-size: 12px; line-height: 22px; color: #535353; background-image: url(); background-repeat: no-repeat; background-position: 0px 7px; padding-left: 11px; list-style-type: none; padding-left:11px; } --> </style> </head> <body> <ul> <li> 基于 psd 设计图的网页设计流程实例</li> <li>dreamweaver spry 框架的介绍与应用</li> <li>jQuery:the write less, do more</li> 重庆工商大学管理学院实验报告-3- <li>tab 选项卡的各种实现方法汇总</li> <li>web 标准已经成为主流的网页设计方法</li> <li> 搜索引擎优化的外部方法和内部方法</li> </ul> </body> </html> 检验实验: ----- 实验正确( 实例 11-2) 实验步骤: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>block&inline</title> <style type="text/css"> <!-- a{ font-size: 14px; line-height: 29px; font-weight: bold; text-decoration: none; letter-spacing: 5px; text-align: center; float: left; height: 29px; width: 102px; } li{ display: inline; list-style-type: none; } a:link, a:visited { 重庆工商大学管理学院实验报告-4- color: #ffffff; background-image: url(); background-position: left top; } a:hover { color: #ffff00; background-image: url(); background-position: left bottom; } --> </style> </head> <body> <ul> <li><a href="#"> 新闻</a></li> <li><a href="#"> 体育</a></li> <li><a href="#"> 财经</a></li> <li><a href="#"> 娱乐</a></li> <li><a href="#"> 房产</a></li> <li><a href="#"> 博客</a></li> </ul> </body> </html> 检验实验: -
网页设计与制作实验报告9 来自淘豆网m.daumloan.com转载请标明出处.
