第一篇:css 实验报告
实验题目使用CCS美化“北京奥运吉祥物——福娃”网站
一、实验目的
用CCS美化网站,来控制网页样式。首先进行布局分析包括网页的头部,网页主体等。然后是摸块布局设计,页面总体布局设计、链接页面的CSS的文件、要遵循设计页面的通用规则,设计#heard对象部分由网页的logo部分和导航区构成,在是设计#content对象部分,content分为三列,第一行由分为头片新闻区,新闻区和公告栏,第二行分为福娃简介和福娃揭秘,第三行是精彩图片区、名人说福娃和投票调查区。最终使CSS用美化网站.。通过本次实验能熟练掌握CSS美化网站的基本技巧和技能,在以后的学习、工作生活中能够应用,为我们工作带来,生活带来方便。
二、实验内容
1、页面总体布局设计,可以通过对选择“插入记录
布局对象
DIV标签”命令的方法进行布局,也可以通过在代码视图中直接编写源代码的方进行布局,布局页面的HTM框架的代码。、连接页面的CSS文件,先建一个名为styie.css的文件,然后打开CSS样式面板,单击附加样式表,连接超链接。、设计网页的通用规则。通用规则对所有的标记都起作用,绝大部分标记都会涉及属性。打开CSS样式面板双击新建的那个文件,单击确定按钮,用相同的方法设置BODAY的字体和方法。、设计#header对象部分。包括logo#logo和导航#nav.网页logo部分是一个中间栏固定,左右栏自适应的结构,并在fianshlogo中插入透明fiansh、动画;导航区域由#NAV#navbgl两个区组成,使用css中超链接属性。、设计#content对象部分,#maincon为中间列,宽度固定,左右两列没有内容因此不需要考虑,而主体显示部分为三行,分别显示网页不同区域。、设计#footer对象部分。
三、实验情况和实验结果 页面总体布局
2网页logo效果图
3网页导航区效果图
4网页#firstmain效果图
四、CSS层叠样式表,是用于控制网页样式,是以HTML为基础提供丰富的格式化功能,由字体,颜色,背景,整体排版等。
1、了解了css的概念和特点,在网页中使用css的四种方式及选择器的语法格式及三种选择器;标签选择器、类选择器和ID选择器。
2、掌握了CSSde 创建及管理方式和其中常用的属性,应用css+DIV进行页实验体会 面布局的DIV标记,SPNA标记,盒子模型,元素的定位方式,布局流程和常用的布局类型。
3、学会了应用SCC+DIV对“北京奥运混吉祥物——福娃”网站的主页重新进行了设计的过程。、CSS是以HTML为基础,提供丰富的格式化功能,是将样式信息与网页内容分离的一种记性语言。
5、在学会使用CSS美化网站后,感CSS是一个神奇的东西,使我感觉好奇,是什么力让网页可以这样变化,在自己完完整整做了一遍后才知道其中的奥妙。
第二篇:CSS页面布局及样式设计实验报告
实 验 报 告
实验项目名称: CSS页面布局及样式设计
(所属课程: web系统与技术)
学 院:计算机学院 专业班级:11级计科信息 姓 名: 学 号: 实验日期: 实验地点:A06-404 合作者: 指导教师:李
本实验项目成绩: 教师签字: 日期:
一、实验目的
(1)掌握CSS中的定位属性使用方法。(2)掌握DIV+CSS的页面布局方式。(3)掌握CSS中的常用属性的使用方法。(4)理解CSS的样式构造。
二、实验条件
安装Web开发环境的微机。
三、实验内容
(1)重新对聊天室的注册页面、登陆页面和聊天页面进行页面布局。(1)对聊天室的注册页面、登陆页面和聊天页面进行样式设计。
四、实验步骤
(1)注册页面使用CSS将注册表单居中显示,表单内嵌入表格将文本与输入域格式化显示,表单内使用label标签。
(2)登录页面中添加div层用于显示在线用户数。
(3)登录页面使用div将登录表单,在线用户数,logo图片,超链接等页面元素重新定位布局。
(4)聊天页面改用div标签并使用CSS的position定位属性进行布局,框架内的独立页面使用float属性进行布局。
(5)使用CSS设置三个页面的背景颜色或背景图片。(6)注册页面使用CSS设计所有输入框和提交按钮的样式。
(7)登录页面使用CSS设置的超链接的字体和下划线、登录表单使用圆顶角、在线用户数使用图片数字,使用CSS设计登录按钮的显示样式。
第1页
共8页 实 验 报 告
(8)聊天页面中使用CSS设计信息发送表单和发送按钮的样式,设计用户信息列表和聊天信息段落的的显示样式。
五、实验结果
注册界面效果图及代码: