网页制作实验报告.docx
- 文档编号:6692811
- 上传时间:2023-01-09
- 格式:DOCX
- 页数:12
- 大小:345.82KB
网页制作实验报告.docx
《网页制作实验报告.docx》由会员分享,可在线阅读,更多相关《网页制作实验报告.docx(12页珍藏版)》请在冰豆网上搜索。
网页制作实验报告
西安邮电学院
网页制作实验报告
题目:
CSS样式表的应用
院系名称:
计算机系
专业名称:
计算机科学与技术
班级:
0901
学生姓名:
周成龙
学号(8位):
09011004
指导教师:
时间:
2011.11.01
1.实验目的
1.掌握CSS样式表的引用的几种方式。
2.学习如何控制字号,字模及加入特殊效果。
3.了解要素和图像方面的样式设置。
2.实验内容
1、整页套用样式:
不执行这个网页程序,回答程序中的问题,为什么?
—
h2{color:
blue;text-align:
center}
h1{color:
red;text-align:
right}
-->
网站
网站
请指出这个几字的颜色及对齐方式
请指出这个几字的颜色及对齐方式
请指出这个几字的颜色
2、样式文件引入
不改变以下程序,分别使“网站实验”几个字变红色,“css网页实验”几个字变成绿色(使用外联或导入方式)
网站实验
css网页实验
3、如何使有超级链接的文字不出现下划线,如何使鼠标移动到超链上产生变色的效果写出以下语句,并改变参数,使超链上产生变色,并改变有超级链接文字的下划线的类型
--
a:
link{color:
green;text-decoration:
none}
a:
visited{color:
red;text-decoration:
none}
a:
hover{color:
black;text-decoration:
underline;font-size:
25pt}
-->
行书体;font-size: 28pt"> href="">未访问的链接
宋体;font-size: 18pt"> href="">访问过的链接 行书体;font-size: 18pt"> href="">鼠标激活的链接 4、用css控制的网页 1)用以下语句建立一个6.htm文件
class="smallinput"maxlength="100">
也有的人称之为层叠样式表(Cascading
Stylesheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
class="smallinput"maxlength="100">
它的作用可以达到:
(1)在几乎所有的浏览器上都可以使用。
(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
(4)你可以轻松地控制页面的布局。
class="smallinput"maxlength="100">
class="smallinput"maxlength="100"> 2)用记事本程序建立一个css文件: style.css,内容如下 b{font-size: 10pt;font-family: "Verdana","Arial","宋体";color: #5F9EA0;} input.smallInput{border: 1solid;FONT-SIZE: 13pt;FONT-STYLE: normal; FONT-VARIANT: normal;FONT-WEIGHT: normal;HEIGHT: 28px;LINE-HEIGHT: normal;color: #000000;background-color: #F5F5DC} h1{font-size: 12pt;font-family: "Verdana","Arial","宋体";color: #CC9966;} .b2{font-size: 10pt;font-family: "Verdana","Arial","宋体";color: #006400;} img{filter: Alpha(opacity=100,style=3)} 3)将下列照片和以上两个文件放在同一文件夹下,重新运行6.htm文件。 x.jpg,体会CSS的应用 4)改写style.css文件中b,input.smallInput,h1,.b2,img的属性,使页面的字体变得更漂亮,使页面及图片更赏心悦目 3、实验运行结果 1.整页套用样式: 2.样式文件引入 在 red}h2{color: green} 3.如何使有超级链接的文字不出现下划线,如何使鼠标移动到超链上产生变色的效果写出以下语句,并改变参数,使超链上产生变色,并改变有超级链接文字的下划线的类型 a: link{color: red;text-decoration: overline} a: active{color: blue;text-decoration: underline} a: visited{color: purple;text-decoration: none} a: hover{color: green;text-decoration: underline;font-size: 25pt} 4.用css控制的网页 四.技巧及心得体会 1.对自己的实验进行评价,指出合理和不足之处,提出改进方案; 这个表格层次分明,工整简洁,游客在浏览的时候不会觉得繁琐。 我的网页区域可以在两边加上其他的内容,比如增加一些超链接和铆点,增加一些按钮与游客进行互动,或者可以在页面嵌入几首歌曲,使页面看起来内容更加丰富。 2.心得体会。 这个实验使我体会到了CSS比HTML更强大的功能。 CSS文件的就像对象与方法里面的方法,把原本冗长的代码分离开,看起来清晰明了。 易于对代码进行修改,只需修改CSS中的属性即可对网页进行改造和维护;还可以在程序上完成一些组件依赖CSS进行安全的保护,使有心得到代码技术的人不那么容易得手。 当然这只是为了对程序员的创造性劳动进行一定的保护,不能根本的解决代码易手的可能。 5.参考内容 [Web编程入门经典: HTML、XHTML和CSS].杜静.敖富江 [HTML与CSS入门经典(第7版)].(美)奥利弗,(美)莫里森. 6.附录: 源代码(电子版) 1. — h1{color: green;text-align: right} h2{color: blue;text-align: center} h3{color: black;text-align: left} --> 2. h1{color: red} h2{color: green} 3. -- a: link{color: red;text-decoration: overline} a: active{color: blue;text-decoration: underline} a: visited{color: purple;text-decoration: none} a: hover{color: green;text-decoration: underline;font-size: 25pt} --> 行书体;font-size: 28pt"> 宋体;font-size: 18pt"> 行书体;font-size: 18pt"> 4.请指出这几个字的颜色及对齐方式
文字为红色,对齐方式为右对齐请指出这个几字的颜色及对齐方式
文字为蓝色,对齐方式为居中对齐请指出这个几字的颜色
文字默认为黑色网站
网站
网站
请指出这个几字的颜色及对齐方式
请指出这个几字的颜色及对齐方式
请指出这个几字的颜色
网站实验
css网页实验
也有的人称之为层叠样式(CascadingStylesheet)。
在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。
它的作用可以达到:
(1)在几乎所有的浏览器上都可以使用。
(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。
(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。
(4)你可以轻松地控制页面的布局。
CSS层叠样式表
b{font-size:
10pt;font-family:
"Verdana","Arial","黑体";color:
#555555;}
input.smallInput{border:
2solid;FONT-SIZE:
12pt;FONT-STYLE:
normal;
FONT-VARIANT:
normal;FONT-WEIGHT:
normal;HEIGHT:
23px;LINE-HEIGHT:
normal;color:
#000000;background-color:
#fffff0}
h1{font-size:
12pt;font-family:
"Verdana","Arial","黑体";color:
#CC6666;}
.b2{font-size:
10pt;font-family:
"Verdana","Arial","黑体";color:
#ff00ff;}
img{filter:
Alpha(opacity=150,style=4)}
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 网页 制作 实验 报告
copyright@ 2008-2022 冰点文档网站版权所有
经营许可证编号:鄂ICP备2022015515号-1