报告报告模板实验报告模板

《实验报告》模板

时间：2024.3.27

安徽财经大学工商管理学院

实 验 报 告 四

班    级：  12网管0班   学    号： 12345678  姓 名：   王二麻   

课程名称：《网页设计与制作》实验名称：CSS的应用实验地点：实验楼301

实验日期： 2014年9月 15日  实验时间： 9：35~~12：00  指导老师：王德利　


第二篇：网页设计与制作实验报告9


重庆工商大学

管理学院

实 验 报 告

课程名称:网页设计与制作实例教程

实验名称：CSS基础

班 级：信息管理与信息系统一班 姓名： 同 组 人：__无__ 实验日期：2015.12.03 实验地点：学创园8A303 实验成绩：__________

第1页 共14页

重庆工商大学管理学院 实验报告 第2页 共14页

1.实验内容

掌握CSS伪类；层叠；CSS选择器基本操作。

2.实验环境（软件、硬件及条件）

在学创园的XP电脑上，进行网页设计与制作。

3.实验过程分析（包括主要步骤和主要截图）

实例（11-1）实验步骤：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/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(arrow1.gif);

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>

- 2 -

重庆工商大学管理学院 实验报告 第3页 共14页 <li>tab选项卡的各种实现方法汇总</li>

<li>web标准已经成为主流的网页设计方法</li>

<li>搜索引擎优化的外部方法和内部方法</li>

</ul>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

(实例11-2)实验步骤：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/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 {

- 3 - Transitional//EN"

重庆工商大学管理学院 实验报告 第4页 共14页 color: #ffffff;

background-image: url(1.gif);

background-position: left top;

}

a:hover {

color: #ffff00;

background-image: url(1.gif);

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

(实例11-3)实验步骤：

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>背景图片的</title>

<style type="text/css">

<!--

#top {

- 4 - Transitional//EN"

重庆工商大学管理学院 实验报告 第5页 共14页 background-image: url(rc.gif);

background-position: 0px -10px;

height: 30px;

width: 422px;

}

#main {

background-image: url(book.jpg);

background-repeat: no-repeat;

background-position: 140px 10px;

height: 200px;

width: 420px;

border-right-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #dc5b5c;

border-left-color: #dc5b5c;

}

#bottom {

font-size: 1px;

background-image: url(rc.gif);

background-position: 0px 0px;

height: 5px;

width: 422px;

}

-->

</style>

</head>

<body>

<div id="top"></div>

<div id="main"></div>

<div id="bottom"></div>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

(习题1)实验步骤：

- 5 -

重庆工商大学管理学院 实验报告 第6页 共14页 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> Transitional//EN"

<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 {

color: #ffffff;

background-image: url(1.gif);

background-position: left top;

}

a:hover {

color: #ffff00;

background-image: url(1.gif);

background-position: left bottom;

}

ul {

background-color: #BCD0E8;

border-right-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #F00;

border-left-color: #F00;

height: 50px;

width: 700px;

float: left;

border-top: 20;

left: auto;

top: auto;

right: auto;

bottom: auto;

clip: rect(auto,auto,auto,auto);

}

-->

</style>

</head>

<body>

<ul>

- 6 -

重庆工商大学管理学院 实验报告 第7页 共14页 <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

(习题2)实验步骤：

CSS

#head {

background-color: #FFF;

border: 1px dotted #00F;

height: 300px;

width: 500px;

background-image:url(1.jpg)

}

#head h1 {

font-size: 2em;

color: #FFF;

background-color: #0F0;

}

#head h2 {

font-size: 2em;

color: #FFF;

background-color: #0F0;

display: inline;

- 7 -

重庆工商大学管理学院 实验报告 第8页 共14页 }@charset "utf-8";

/* CSS Document */

网页代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title>

<link href="head1.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="head">

<p>这是head的内容</p>

<h1>这是h1的内容</h1>

<h2>这是h2的内容</h2>

</div>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

(实例12-1)实验代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

- 8 -

重庆工商大学管理学院 实验报告 第9页 共14页 "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>第一个盒子</title>

<style type="text/css">

<!--

#banner {

background-color: #efe;

margin: 80px;

padding: 40px;

height: 150px;

width: 300px;

border: 1px solid #666;

}

-->

</style>

</head>

<body>

<div id="banner">padding在哪里？margin在哪里？</div>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

(实例12-2)实验代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>padding margin border</title>

<style type="text/css">

<!--

- 9 -

重庆工商大学管理学院 实验报告 第10页 共14页 #banner {

font-size: 14px;

line-height: 150%;

background-color: #cccccc;

height: 150px;

width: 300px;

margin-top: 20px;

margin-right: 30px;

margin-bottom: 40px;

margin-left: 50px;

padding-top: 50px;

padding-right: 40px;

padding-bottom: 30px;

padding-left: 20px;

border-top-width: 2px;

border-right-width: thin;

border-bottom-width: 0.5em;

border-left-width: 12px;

border-top-style: dotted;

border-right-style: dashed;

border-bottom-style: double;

border-left-style: inset;

border-top-color: #000099;

border-right-color: #000000;

border-bottom-color: #000000;

border-left-color: #ffffff;

}

-->

</style>

</head>

<body>

<div id="banner">padding 、margin、border</div>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

- 10 -

重庆工商大学管理学院 实验报告 第11页 共14页

(实例12-3)实验代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>框模型的宽度和高度</title>

<style type="text/css">

<!--

#main {

font-weight: bold;

background-color: #ff9;

margin: 30px;

width: 202px;

margin:30px aoto;

padding:30px 49px;

border: 4px double #999;

}

#no_margin {

background-color: #fff;

border: 1px dashed #333;

height: 140px;

width: 160px;

padding:30px 20px;

}

#no_padding {

height: 200px;

width: 200px;

margin-top: 30px;

border: 1px dotted #333;

}

-->

</style>

</head>

<body>

<div id="main">

<div id="no_margin">我没有margin,我的宽度是多少？</div>

<div id="no_padding">我没有padding，我的宽度是多少？</div>

</div>

</body>

</html>

检验实验：-----实验正确

- 11 -

重庆工商大学管理学院 实验报告 第12页 共14页 (实例12-4)实验代码

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>框模型的要素</title>

<style type="text/css">

<!--

p, h3 {

margin: 0px;

padding: 0px;

}

.box {

margin: 0px auto;

width: 343px;

border: 1px solid #c1d5e3;

}

.small {

height: 200px;

width: 241px;

margin-top:50px 5px;

border-right-width: 1px;

border-left-width: 1px;

border-right-style: solid;

border-left-style: solid;

border-right-color: #c1d5e3;

border-left-color: #c1d5e3;

}

h3 {

font-size: 18px;

line-height: 28px;

color: #c00;

text-align: center;

- 12 -

网页设计与制作实验报告9

重庆工商大学管理学院 实验报告 第13页 共14页 margin: 15px 7px;

padding-bottom:7px;

border-bottom:1px dashed #ccc;

}

.small p {

font-size: 12px;

line-height: 180%;

color: #999;

text-indent: 2em;

}

-->

</style>

</head>

<div class="box">

<div class="small">

<h3>框模型-不得不说的故事</h3>

<p>这个例子里，左右上都可以有其他的框（盒子）。框模型，有名的易学难精.</p> </div>

</div>

<body>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

(实例12-4)实验代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

"/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>习题12.1</title>

<style type="text/css">

<!--

div {

background-repeat: repeat-x;

height: 380px;

- 13 - Transitional//EN"

重庆工商大学管理学院 实验报告 第14页 共14页 width: 380px;

margin-top: 20px;

margin-right: auto;

margin-left: auto;

padding-top: 30px;

padding-right: 10px;

padding-bottom: 40px;

padding-left: 20px;

border-top-width: 1px;

border-right-width: 10px;

border-bottom-width: 1px;

border-left-width: 10px;

border-top-style: dotted;

border-right-style: dotted;

border-bottom-style: dotted;

border-left-style: dotted;

border-top-color: #0C6;

border-right-color: #0C6;

border-bottom-color: #0C6;

border-left-color: #0C6;

background-image:url(1.jpg)

}

-->

</style>

</head>

<body>

<div >第12章习题1-----我的盒子</div>

</body>

</html>

检验实验：-----实验正确

网页设计与制作实验报告9

- 14 -

更多相关推荐：
实验报告模版

徐州工程学院管理学院实验报告实验课程名称实验地点年月至年月专业班级学生姓名学号指导老师123456

实验报告范本

学生实验报告书实验课程名称开课学院指导教师姓名学生姓名学生专业班级200200学年第学期实验教学管理基本规范实验是培养学生动手能力分析解决问题能力的重要环节实验报告是反映实验教学水平与质量的重要依据为加强实验过...

实验报告格式模板-供参考

实验名称：粉体真密度的测定粉体真密度是粉体质量与其真体积之比值，其真体积不包括存在于粉体颗粒内部的封闭空洞。所以，测定粉体的真密度必须采用无孔材料。根据测定介质的不同，粉体真密度的主要测定方法可分为气体容积法和…

化学实验报告(空白模板)

化学实验报告

实验报告模板

学生实践报告课程名称学生学号所属院部文科类专业班级学生姓名指导教师2020学年第学期金陵科技学院教务处制实践报告书写要求实践报告原则上要求学生手写要求书写工整若因课程特点需打印的要遵照以下字体字号间距等的具体要...

实验报告 范本

研究生实验报告范本实验课程实验名称实验地点学生姓名学号指导教师范本实验时间年月日一实验目的熟悉电阻型气体传感器结构及工作原理进行基于聚苯胺敏感薄膜的气体传感器的结构设计材料制作材料表征探测单元制作与测试实验结果...

实验报告模板(文字格式,具体排版)

北京信息科技大学黑体1号居中实验报告宋体2号加粗居中课程名称学院专业学生姓名班级学号任课老师起止时间200年月日至200年月日以上宋体四号居中目录目录宋体三号加粗居中第一章1112第二章2122第X章结束语参考...

实验报告正文格式

EDA设计实验报告第1页共2页实验标题用3号黑体居中加粗一实验目的用小3号黑体小4号宋体15倍行距二实验要求用小3号黑体小4号宋体15倍行距三实验步骤用小3号黑体要求包括设计的电路指标实现的计算仿真结果以及误差...

计算机实验报告模板

实验报告实验序号实验项目名称

实验报告模板

山东建筑大学实验报告纸现代机械工程基础实验2机设ANSYS专题题目平头塔机起重臂的有限元分析院部机电工程学院专业机械工程及自动化班级机械113姓名高辉学号20xx071171指导教师沈孝芹周海涛完成日期20xx...

spss实验报告模板

实验报告实验三连续变量的统计描述与参数估计实验目的1了解连续变量的统计描述指标体系和参数估计指标体系2掌握具体案例的统计描述和分析3学会bootstrap等方法实验原理1spss的许多模块均可完成统计描述的任务...

实验报告模板

武汉大学珞珈学院计算机科学系实验报告实验课程专业年级学号姓名指导教师201201学年第学期实验报告说明1实验项目名称要用最简练的语言反映实验的内容要求与实验指导书中相一致2实验类型一般需说明是验证型实验还是设计...

实验报告模板（51篇）

热门关注

实验报告模板

实验报告模版1

实验报告格式

基础化学实验报告格式

有关实验报告的书写格式

实验报告格式

英文实验报告模板

会计专业实习报告模板(强烈推荐!!!)

猜你喜欢

国有企业改制调查报告

精细化管理报告

20xx元旦晚会策划书

沥青试验报告单

环境雾霾演讲稿（22篇）

发展党员请示报告（9篇）