下载文档原格式
实验六 CSS布局
学号 201114004 姓名王渝迪专业计算机科学与技术成绩
【实验目的】
掌握用CSS的布局。
【实验内容】
1、熟悉Dreamweaver软件的环境；
2、会使用CSS进行布局。
【实验步骤】
1.打开Dreamweaver，新建HTML文件。
在代码中body中插入一个DIV标签。
然后选择标签，新
建CSS规则，在新建的CSS规则中，对新建的规则进行设置。
2.对背景项设置，可以设置背景色；对方框项设置，可以设置标签的宽，高，和浮动（左对齐，右
对齐，居中，无），以及方框位置的Padding和Margin进行设置；对边框设置，设置它的类型、宽度和颜色。
这是一栏布局。
3.二栏布局是在一栏布局的基础上再新建一个DIV标签。
对新建的标签进行同样的设置，在设置方
框的浮动时，选择不同的浮动，会出现不同的效果，如一个DIV标签设置为左对齐，另一个设为右对齐。
这种效果还可以通过所建规则中的定位进行设置。
4.嵌套布局。
将第三个div嵌套在另一个div中。
【实验结果】
【实验心得和体会】
通过本次的实验，我熟练掌握了div布局技巧。
能够完成简单的css+div布局。
如上图。
现在网页设计过程中基本都是使用css+div的格式进行布局。
学会css+div对于网页设计来说有很重要的意义。
CSS实训总结在这次CSS实训中，我学到了很多关于CSS的知识和技能。
通过实际操作，我深入了解了CSS的选择器、样式规则、布局和响应式设计等重要概念。
以下是我对这次实训的总结：1. CSS基础知识：在实训开始之前，我重新温习了CSS的基础知识，包括选择器、样式规则、颜色和字体、盒模型等。
这些基础知识对于理解CSS的核心概念非常重要。
2. 选择器：在实训中，我学习了更多的选择器，如类选择器、ID选择器、属性选择器等。
这些选择器让我能够更精确地定位和样式化页面元素。
通过使用不同的选择器，我可以根据需要选择单个元素或一组元素进行样式化。
3. 样式规则：在这次实训中，我学习了更多的CSS样式规则，如背景、边框、阴影、渐变等。
通过这些样式规则，我可以创建更加美观和专业的网页设计。
此外，我还学习了如何使用CSS动画和过渡效果，为网页添加动态效果。
4. 布局：在实训中，我学习了如何使用CSS进行页面布局。
通过使用Flexbox和Grid布局，我可以轻松地创建复杂的页面布局。
这些布局方法使得页面元素的排列和分布更加灵活和可控。
5. 响应式设计：在这次实训中，我学习了如何使用媒体查询和响应式设计。
通过使用媒体查询，我可以根据不同的设备和屏幕尺寸，应用不同的样式规则。
这使得我的网页能够在各种设备和屏幕尺寸上良好地显示和使用。
6. 实际应用：在实训中，我通过实际项目来应用所学的CSS知识。
我为一个虚构的网站设计了样式，并实现了响应式布局。
在这个过程中，我遇到了很多问题，但通过查阅文档和请教老师，我成功地解决了这些问题。
这个过程让我更加深入地理解了CSS的实际应用和技巧。
7. 总结：通过这次CSS实训，我不仅温习了基础知识，还学习了更多的高级技能。
我掌握了如何使用选择器、样式规则、布局和响应式设计来创建美观而专业的网页。
这次实训对我的专业技能的提升非常有帮助，也为我未来的职业发展打下了坚实的基础。
网页设计与制作CSS实验报告1. 实验目的本次实验旨在掌握网页设计与制作的基本原理，并运用CSS技术实现对网页的样式和布局的控制。
2. 实验步骤2.1 设计网页结构首先，我们通过HTML语言搭建了一个简单的网页结构。
在网页的`<head>`标签中引入了一个外部的CSS样式表文件，以便之后的样式控制。
html<!DOCTYPE html><html><head><link rel="stylesheet" type="text/css" href="style.css"></head><body><! 网页内容></body>2.2 添加CSS样式接下来，我们使用CSS技术对网页进行样式控制，包括文字样式、背景样式、布局等。
2.2.1 文字样式通过CSS选择器，我们可以选择特定的元素，从而对其文字样式进行控制。
例如，我们可以使用以下CSS代码对网页的段落文字进行样式设置：cssp {font-family: Arial, sans-serif;font-size: 16px;color: 333333;}2.2.2 背景样式除了文字样式，我们还可以使用CSS对网页的背景进行样式控制。
通过CSS代码，我们可以设置背景颜色、背景图片等。
例如，以下CSS代码将网页的背景设置为白色，并添加了一张背景图片：cssbackground-color: ffffff;background-image: url("background.jpg");background-repeat: no-repeat;background-size: cover;}2.2.3 布局样式此外，CSS还可以控制网页的布局，包括元素的位置、大小等。
我们可以使用CSS代码来调整网页布局，以使其更加美观。
webcss实验报告WebCSS实验报告引言：WebCSS是一种用于网页设计的样式表语言，它可以控制网页的外观和布局。
本篇实验报告将介绍我在学习WebCSS过程中的实验内容和心得体会。
实验一：基础CSS样式的应用在这个实验中，我学习了如何使用CSS来设置网页的基本样式，比如字体、颜色、背景等。
通过实验，我发现CSS可以让网页更加美观和易读。
我尝试了不同的字体和颜色组合，发现不同的选择会给人不同的感觉。
比如，使用Serif字体的标题给人一种正式和专业的感觉，而使用Sans-serif字体则更加现代和简洁。
实验二：盒模型的应用在这个实验中，我学习了CSS的盒模型，它用于定义网页元素的尺寸和边距。
通过实验，我发现盒模型可以让网页的布局更加灵活和自由。
我尝试了设置不同的边距和内边距，发现可以通过微调来改变网页元素之间的间距和整体布局。
同时，我也学习了如何使用CSS的浮动属性来实现网页元素的排列和定位。
实验三：响应式设计的实现在这个实验中，我学习了如何使用CSS的媒体查询来实现响应式设计。
通过实验，我发现响应式设计可以让网页在不同设备上都能够良好地显示和适应。
我尝试了设置不同的媒体查询条件，比如屏幕宽度、设备类型等，发现可以通过CSS来针对不同的情况做出不同的样式调整。
这样，无论是在电脑上还是在手机上浏览网页，用户都能够获得良好的体验。
实验四：CSS动画的应用在这个实验中，我学习了如何使用CSS的动画效果来为网页添加一些互动和生动的元素。
通过实验，我发现CSS动画可以让网页更加吸引人和有趣。
我尝试了设置不同的动画效果，比如淡入淡出、旋转等，发现可以通过CSS来控制动画的速度、持续时间和循环次数。
这样，用户在浏览网页时可以感受到一些视觉上的变化和活力。
实验五：CSS预处理器的应用在这个实验中，我学习了如何使用CSS预处理器来简化和优化CSS代码的编写。
通过实验，我发现CSS预处理器可以提高代码的可维护性和重用性。
css实验报告
CSS（Cascading Style Sheets）是一种用于对网页进行样式修饰的标记语言。
通过CSS，我们可以对网页的字体、颜色、布局等进行控制，使网页看起来更加美观和易于阅读。
在本次实验中，我学习并实践了CSS的基本用法，并通过设置样式参数和样式选择器对网页进行了修饰。
首先，我创建了一个简单的网页结构。
在HTML中，我创建了一个包含标题和内容的div元素，并为div元素设置了一个唯一的id属性值。
然后，我在CSS中使用id选择器来选择并设置该div元素的样式参数。
通过设置字体、颜色、背景颜色和边框等参数，我成功实现了对div元素的修饰。
其次，我学习了CSS的样式选择器。
通过样式选择器，我可以选择并设置多个元素的样式参数，而无需为每个元素单独设置样式。
在实验中，我使用了类选择器和后代选择器来选择并设置多个元素的样式参数。
在实验过程中，我遇到了一些问题。
例如，当我设置字体和颜色时，我忘记使用引号将参数值括起来，导致设置无效。
但通过阅读文档和查找资料，我快速解决了这些问题，并成功实现了对网页的修饰。
通过这次实验，我不仅学到了CSS的基本用法，还了解到了CSS的强大之处。
通过CSS，我可以轻松地对整个网页进行样式修饰，而不需要修改HTML代码。
可以说，CSS是一种非常灵活和方便的样式修饰工具。
总之，通过本次实验，我学习并实践了CSS的基本用法。
通过设置样式参数和样式选择器，我成功修饰了网页的样式，并且解决了一些常见的问题。
通过这次实验，我对CSS的理解更加深入，并且对网页设计有了更高的兴趣和热情。
实验3 CSS样式表的设置与应用《网页设计制作》上机实验实验3CSS样式表的设置与应用一、实验目的1．掌握CSS样式的作用2．掌握CSS样式的创建和使用二、实验要求1. 掌握使用CSS样式面板创建4种基本选择器类型的CSS样式。
2. 掌握以内部样式、外部样式使用CSS样式的方式三、实验内容和步骤CSS（Cascading Style Sheet，层叠样式表）技术是一种格式化网页的标准方式，它通过设置CSS属性使网页元素获得各种不同效果。
CSS不是一种程序设计语言，而只是一种用于网页排版的标识性语言，是对现有HTML语言功能的补充和扩展。
CSS的主要功能是通过对HTML选择器进行设定，来实现对网页中的字体、字号、颜色、背景、图像及其他元素的控制，使网页能够完全按照设计者的要求来显示。
CSS的定义由三部分构成：选择符selector、属性property和属性值value。
其基本格式如下：selector{property l:value l;property 2:value 2;??}其中selector（选择符）表示需要应用样式的内容，property表示由CSS标准定义的样式属性，value表示样式属性的值。
准备工作1 以解压缩后的“实验3”文件夹为根文件夹，在Dreamweaver中建立站点。
第1页共24页《网页设计制作》上机实验2 在Dreamweaver的首选参数中设置代码提示功能中结束标签在“键入起始标签>后”3 熟悉CSS样式面板CSS样式面板可以用来进行新建CSS规则，编辑CSS规则，删除CSS规则以及为网页指定外部样式表等操作。
第2页共24页《网页设计制作》上机实验? “全部”标签显示当前网页中使用的使用各种样式选择器的全部样式。
双击其中的某个样式可以打开“CSS规则定义”窗口对样式进行编辑。
? “正在”标签显示当前鼠标所在处的网页元素具有的CSS属性及属性值。
可以在窗口的下方点击某一属性值进行修改，不必打开“CSS规则定义”窗口。
第1篇一、实验目的1. 理解网页系统设计的基本概念和流程。
2. 掌握网页系统的规划、设计和实现方法。
3. 提高网页设计与制作能力，熟悉相关软件的使用。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 开发工具：Adobe Dreamweaver CC4. 编程语言：HTML、CSS、JavaScript三、实验内容1. 网页系统规划2. 网页系统设计3. 网页系统实现4. 网页系统测试与优化四、实验步骤1. 网页系统规划（1）明确系统功能：根据用户需求，确定网页系统的功能模块，如首页、产品展示、新闻资讯、联系方式等。
（2）确定页面布局：根据功能模块，规划页面布局，包括头部、导航栏、主体内容、底部等。
（3）设计导航结构：根据页面布局，设计导航结构，使用户能够方便地浏览各个页面。
2. 网页系统设计（1）设计页面风格：根据网站定位和用户需求，设计页面风格，包括颜色、字体、图片等。
（2）设计界面元素：根据页面风格，设计界面元素，如按钮、图标、表格等。
（3）设计交互效果：使用JavaScript等脚本语言，实现页面元素的交互效果，如滚动动画、鼠标悬停等。
3. 网页系统实现（1）编写HTML代码：使用HTML标签，构建网页结构。
（2）编写CSS代码：使用CSS样式，美化网页界面。
（3）编写JavaScript代码：使用JavaScript脚本，实现页面交互效果。
4. 网页系统测试与优化（1）功能测试：测试各个功能模块是否正常工作。
（2）性能测试：测试网页加载速度和响应时间。
（3）兼容性测试：测试网页在不同浏览器和设备上的显示效果。
（4）优化：根据测试结果，对网页进行优化，提高用户体验。
五、实验结果与分析1. 网页系统规划根据用户需求，本网页系统规划了以下功能模块：- 首页：展示网站简介、最新动态、热门产品等。
- 产品展示：详细介绍各个产品，包括图片、文字、价格等。
- 新闻资讯：发布公司新闻、行业动态等。
CSS实习报告范文一、实习背景我在家互联网企业进行为期两个月的实习期间主要从事前端开发工作。
在这期间，我主要负责网站页面的样式设计与布局，使用CSS完成网站的整体美化和优化。
二、实习内容1.页面样式设计根据产品需求和UI设计师提供的设计稿，我使用CSS进行页面样式设计。
首先，我使用HTML制作页面的基本结构，然后使用CSS添加样式，包括颜色、字体、边框、背景等。
根据UI设计师提供的设计稿，我将页面的样式与设计稿尽量保持一致，以达到美化页面的效果。
2.页面布局在进行页面布局时，我使用了CSS的盒模型和浮动布局等技术。
通过设置不同元素的宽度、高度、外边距和内边距等属性，我能够灵活地调整页面的布局。
同时，为了适应不同屏幕大小的设备，我还使用了响应式布局，使页面在不同设备上能够呈现出最佳的效果。
3.样式优化在完成页面的样式设计和布局之后，我对页面进行了优化。
首先，我对CSS代码进行了压缩，去除了多余的空格和换行符，减小了文件的大小，提高了页面加载速度。
其次，我使用了CSS Sprites技术，将多个小图标合并成一个大图，并通过CSS的background-position属性来显示不同的图标，减少了请求次数，提高了页面加载速度。
此外，我还使用了CSS3的动画效果，为页面增添了一些交互效果，提升了用户体验。
三、实习总结通过这次实习，我对CSS的应用有了更深入的了解。
我学会了如何使用CSS实现页面的样式设计和布局，以及如何通过优化CSS代码提高页面的加载速度。
在实习期间，我充分发挥了自己的创造力和想象力，将UI设计师的设计稿转化成了实际可见的页面效果。
我还学到了很多与团队合作的技巧，通过与产品经理、UI设计师和后端开发人员的密切合作，我能够更好地理解团队的需求，并与他们紧密配合，共同完成项目。
通过这次实习，我不仅学到了很多关于CSS的知识和技巧，还提升了自己的团队合作能力和问题解决能力。
在未来的工作中，我将继续努力学习，不断提升自己的技术能力和专业水平，为企业的发展做出更大的贡献。
《Html+Css网站设计》实训任报告
在本次实训中，我们收获了以下几点：
1. HTML基础知识：学习了HTML的基础语法、标签、属性和元素，能够创建简单的网页结构。
2. CSS样式设计：学习了CSS的基础知识，包括:选择器、样式属性、优先级等；并能够使用CSS样式美化网页。
3. 网页布局：学习了网页布局的基本原则和技巧，并通过实践掌握了如何使用HTML
和CSS创建不同类型的布局，例如流式布局和固定布局。
4. 网页交互：学习了使用JavaScript创建网页交互效果的基本方法，例如使用事件、元素操作和动态更新网页内容等。
在实训中，我们也遇到了一些困难和挑战。
我们发现，在一些特定的布局和样式效果中，我们需要更多的练习和优化才能达到理想的效果。
同时，我们也发现了一些框架和工
具可以帮助我们更好地完成网站设计任务，例如Bootstrap和Sublime Text等。
通过本次实训，我们得到了很多宝贵的经验，包括团队合作、分工合作、时间管理和
沟通技巧等。
我们也认识到网站设计需要多方向的知识和技术，如基础的HTML和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设计登录按钮的显示样式。
（8）聊天页面中使用CSS设计信息发送表单和发送按钮的样式，设计用户信息列表和聊天信息段落的的显示样式。
五、实验结果注册界面效果图及代码：<frameset cols="25%,75%">//总体框架<frame src="registImg.html" /><frame src="regist.html" /></frameset></html><body style="text-align:right;">//添加图片代码<img src="./img/d1.png"></body><body>//用户注册信息代码<form action="do_submit.cgi" method="post"><h1><font face="华文新魏/黑体"></font>注册信息</h1>用户姓名：<input type="text" name="USERNAME"><br/><br/>用户密码：<input type="password" name="USERNAME"><br/><br/><input type="radio" name="sex" checked>女<br/><br/>--><form>姓 别： <label for="male">男</label><input type="radio" name="sex" id="male" /><label for="female">女</label><input type="radio" name="sex" id="female" /></form>年 龄：<input type="text" name="age"><br/><br/> 联系电话：<input type="text" name="TEL"><br/><br/>邮箱地址：<input type="text" name="EMAIL"><br/><br/><p>职 业：<select size=1 name="work"><option>学生</option><option>白领</option><option>企业家</option><option>教师</option><option>医生</option></select></p><input type="submit" value="提交" name="submit"><input type="reset" value="重置" name="reset"></form></body>登录界面效果图及代码：<style type="text/css">#div {height: 320px;width: 680px;position: absolute;left: 50%;top: 50%;margin: -159px auto auto -340px;}#div #div1 {height: 94px;width: 100%;border-radius: 10px;}#div #div1 #img {width: 130px;height: 90px;float: left;}#div #div1 #title {line-height: 94px;font-size: 34px;color: #921AFF;width: 545px;height: 90px;float: left;}#div #div2 {border-radius: 10px;height: 216px;width: 670px;border: 5px solid;border-color: #FFAAD5;}#div #div2 #div3 {height: 200px;width: 300px;margin-top: 6px;margin-left: 6px;border-radius: 10px;border: 2px solid;border-color: #FFCBB3;font-size: 23px;text-align: center;float: left;background: url("./img/d4.png");} .button {height: 40px;width: 100px;box-shadow: 0px 0px 10px #3e7fcf;} input{width:140px;height:30px;}#div #div2 #div4 {height: 190px;width: 90px;float: left;margin-top: 20px;margin-left: 8px;}#div #div2 #div5{height: 200px;width: 200px;float: left;margin-left:28px;}</style></head><body bgcolor="#FF9797"><div id="div"><div id="div1"><div id="img"><img src="./img/logo.png" /></div><div id="title"><marquee width=455px height=94px vspace="5" hspace="5" behavior="scroll">微型聊天室</marquee></div></div><div id="div2"><div id="div3"><form action="#" method="post" id="myform"><br />用户姓名：<input type="text" name="USERNAME"><br /><br />用户密码：<input type="password" name="USERNAME"><br /><br /><button class="button" type="submit">登 录</button><button class="button" type="reset">重 置</button></form></div><div id="div4"><img src="./img/0.png"><br/><br/><center>在线人数</center><a href="MyHtml.html"><img src="./img/wan.png"width="99px" height="28px" border="none"></a></div><div id="div5"><img src="./img/hehua.png"></div></div></div></body></html>登录界面效果图及代码：<style type="text/css">#divbox {height: 480px;width: 720px;position: absolute;left: 50%;top: 50%;margin: -240px auto auto -360px;border: 1px red solid;}#divbox #divlist {height: 344px;width: 184px;background: #FF7575;line-height: 20px;margin-top: 6px;margin-left: 6px;float: left;border: 4px solid;border-color: #D9006C;border-radius: 8px;}#divbox #divlist p {text-indent: 2em;}#divbox #divtalk {height: 344px;width: 504px;margin-top: 6px;margin-right: 6px;background: #FFFFB9;float: right;border: 4px solid;border-color: #D9006C;border-radius: 8px;}#divbox #divtalk p {text-indent: 2em;}#divbox #divsend {height: 104px;width: 698px;margin-top: 6px;margin-left: 6px;background: #FFD1A4;border: 4px solid;border-color: #D9006C;position: absolute;left: 50%;top: 87%;margin: -52px auto auto -352px;border-radius: 8px;}.button {height: 104px;width: 78px;box-shadow: 0px 0px 10px #3e7fcf;}</style></head><body><center><h1>聊天室界面</h1></center><div id="divbox"><div id="divlist"><img src="./img/dog.png">在线用户： <br><p>张萨</p><p>王武</p><p>杜六</p></div><div id="divtalk"><p>张萨说：今天天气不错呀！</p><p>王武说：嗯嗯，正好可以出去春游呢!</p><p>杜六说：好主意，那咱们去哪儿呢？</p><p>王武说：小南海怎么样？</p></div><div id="divsend"><div style="float: left;"><textarea style="width: 620px; height: 104px;"></textarea> </div><div style="float: left;"><input id="button" type="button" value="发言"style="width: 78px; height: 104px;" /></div></div> </div></body></html>六、讨论由于实验的练习掌握了div的基本知识。
学生实验报告
学期：2015-2016学年第二学期
班级：2015级计算机科学与技术
学号：
姓名：
课程编号：
课程名称：网页设计与制作
填写说明
1、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。
2、课程编号和课程名称必须和教务系统中保持一致，实验项目名称填写须完整规范，不能省略或使用简称。
3、每个实验项目应填写一份实验报告。
如同一个实验项目分多次进行，可在实验报告中写明。
4、如果实验报告页面不够，可分成两个实验报告填写。
实验目录及成绩登记
说明：实验项目顺序和名称由学生填写，必须前后保持一致；实验成绩以百分制计，由实验指导教师填写并签名，一般不能涂改，确有涂改的，应在备注栏说明原因；实验报告部分最终成绩为所有实验项目成绩的平均值。
实验报告
实验日期：年月日星期。
学生实验报告实验指导书五步骤（1）新建一个文件夹试验五将“唯存教育”文件夹中的myweb文件夹复制到此新文件夹中。
（2）启动dreamweaver新建一个站点保存在实验五文件夹中。
（3）新建一个打开中的article.html切换至代码视图。
新建css样式保存至实验五中，在代码视图加link标记。
（4）再添加css控制网页表实验指导书六步骤）新建一个文件夹试验六将“八大行星”文件夹中的myweb文件夹复制到此新文件夹中。
dreamweaver新建一个站点保存在六文件夹中。
（3）打开index.html，将窗口切换至代码视图，为body中的container和list添加div标签。
（4）建立命名标记：点击菜单栏上的命名锚记输入名称确定后在文档设计视图中选择创建连接文本，在属性检查器“链接”入数字符号#和锚记名称。
（5）新建css样式表控制网实验指导书七（1）新建一个文件夹试验七将“77号作品”文件夹中的myweb文件夹复制到此新文件夹中。
（2）启动dreamweaver新建一个站点保存在实验七文件夹中。
（3）打开index.html和style.css，在style.css中补充网页背景样式，未添加样式前的网页如图（四）给网页添加背景颜色#f2caff如图。
（五）添加css样式后如图实验指导书八步骤（1）新建一个文件夹试验八将“信息与网络中心”文件夹中的myweb文件夹复制到此新文件夹中。
（2）启动dreamweaver新建一个站点保存在实验八文件夹中。
（3）打开index.html 和style.css，打开style.css补充网页样式后如图实验指导书九步骤（1）新建一个文件夹试验九将“信息与网络中心”文件夹中的myweb文件夹复制到此新文件夹中。
（2）启动dreamweaver新建一个站点保存在实验九文件夹中。
（3）打开index.html 和style.css，打开style.css补充网页样式修改sidebar和content后Head添加图片和高度后如图加footer后添加圆角框顶部后如图添加圆角框中部和底部图像如图添加fltlt浮动后添加图片元素填充和边框和水平排列后如图最终效果如图实验指导书十一步骤（1）新建一个文件夹试验十一将“宝贝屋”文件夹中的myweb文件夹复制到此新文件（2）启动dreamweaver新建一个站点保存在实验十一文件夹中。
实验6使用CSS排版一．实验目的1．掌握内部CSS样式和外部CSS样式文件。
2．掌握应用CSS样式的方式。
二．实验环境Editplus三．实验内容（考核实验）制作个人网页四．实验步骤1、制作一个个人网页1)制作如图所示页面效果。
2)使用的图像在photo目录下3)要求对页面进行排版（固定宽度且居中的版式），如下图。
排版思路：宽度固定而且居中的版式是网络中最常见的排版方式之一，首先将所有页面内容用一个大<div> 包裹起来，指定该<div>的ID为container，这个ID在整个页面中是唯一的。
部分代码如下：body{margin:0px;padding:0px;text-align:center;background:#e9fbff;}解释：margin:0px;指定页面四周的空隙都为0.text-align:center;这是整个排版的关键语句，将页面<body>中的所有元素都设置为居中。
#container{position: relative;margin: 0 auto;padding:0px;width:700px;text-align: left;background:url(container_bg.jpg) repeat-y;}解释：position: relative;相对定位，设置块相对于原来的位置。
由于<body>已经设置了居中，因此这里不需要再调整，只是考虑到浏览器的兼容性，加上这句代码。
margin: 0 auto; 非常关键的一句，它使得该块与页面的上下边界距离为0，左右则自动调整。
这一句代码的完整写法为m argin: 0 auto 0 auto;这里采用了简写。
width:700px;设定固定宽度为700PXtext-align: left; 用来覆盖<body>中设置的对齐方式，使得#container中的所有内容恢复左对齐。
实验题目班级姓名学号指导教师“CSS 样式”面板**** **** **** **** 一、实验目的：熟练运用“css样式”面板二、实验内容了解并能熟练运用css样式面板上的各种元素三、实验开发软件Dreamweaver开发工具实验步骤：在dreamweaver软件上分别将css样板上的字体，边框，鼠标形状等元素添加到网页Css样板上各元素的使用及形式记录如下：1.CSS的使用格式：<?xml-stylesheet href=“CSS文件的URI”type=“text/css”?>CSS（Cascading Style Sheets 层叠样式表单）2.标记与样式表样式表中文本代表可以是（1）标记列表(多个不同标记以相同的方式显示（2）标记#ID属性(相同的标记以不同的方式显示设置文本的显示方式：通过指定display属性值来设置文本的显示方式块方式使得文本在浏览器的一个块区域内显示，块的大小依赖于需要显示的字符数量和字符大小，可以通过设置position,width,length属性来设置块的显示位置和大小；块显示时候,默认左对齐；如果多个样式都设置的是块显示,则这些块将按先后顺序左对齐，如果父表示是块显示，则其子标记也是块显示。
形式：display:block行方式形式：display:line;提示：如果多个样式都是行方式,则按先后顺序首尾相接显示在一行里，可以指定position 属性来指定显示的位置，如果父标记指定的是block,子标记指定的是line，子标记在父标记的block范围内以line方式显示。
列表方式显示形式：display:list-item;提示：可通过设置list-style-type属性值来设置列表符号的外观disc:实心圆、circle:圆圈、square:方块、decimal:十进制数、lower-roman:小写罗马数字upper-roman:答谢罗马数字、lower-alpha:小写英文字母、upper-alpha:大写英文字母3.字体文本样式4.边框：为文字显示指定边框如果是以块方式显示，边框就是块的边框如果是以行方式显示，边框就是行的边框如果是以列表方式显示，边框就是列表项的边框设置边框形式：1.border-style:值;，使得文本具有边框 2.dotted:点组成的虚线3.dash:短线组成的虚线4.double:双线5.groove:3D沟槽状6.ridge:3D脊状7.inset:3D内嵌8.outset:3D外嵌9.solid:普通边框设置上下左右边框设置border-style后，还可以为四个方向的边框分别进行设置border-top:、border-bottom、border-right:、border-left:这四个属性的取值与border-style一样设置边框颜色形式：border-color:一个颜色值：四个边框的颜色一样二个颜色值：上下边框为第一颜色值，左右边框为第二颜色值四个颜色值：上右下左为依次指定的颜色值5.边缘文本周围不可见的区域如果文本按块显示，边缘就是块的边缘如果文本按行显示，边缘就是行的边缘如果文本按列表显示，边缘就是列表的边缘形式：margin-top:, margin-bottom:, margin-right:, margin-left:颜色和背景文字颜色：color背景颜色：background-color显示图象显示背景图象background-image:url(文件名)设置图象的重复方式Background-repeat:、repeat、repeat-x、repeat-y、no-repeat单独显示图象为一个空标记指定一个图象，空标记没有文本，背景大小为0*0，必须用block形式，并指定width和height设置鼠标形状形式Cursor、auto、crosshair、default、hand、move、e-resize、ne-resize、nwsesize、n-resize、we-resize、ww-resize、w-resize、w-resize、text、wait、help处理层叠形式z-index:整数值：值越大，所在位置越高，值越小，位置越低(可能被位置高的层挡住)相关问题及其说明：具体css样式的应用将在所做的网站逐一展现。
实验题目使用CCS美化“北京奥运吉祥物——福娃”网站一、实验目的用CCS美化网站，来控制网页样式。
首先进行布局分析包括网页的头部，网页主体等。
然后是摸块布局设计，页面总体布局设计、链接页面的CSS的文件、要遵循设计页面的通用规则，设计#heard对象部分由网页的logo部分和导航区构成，在是设计#content对象部分，content分为三列，第一行由分为头片新闻区，新闻区和公告栏，第二行分为福娃简介和福娃揭秘，第三行是精彩图片区、名人说福娃和投票调查区。
最终使CSS用美化网站.。
通过本次实验能熟练掌握CSS美化网站的基本技巧和技能，在以后的学习、工作生活中能够应用，为我们工作带来，生活带来方便。
二、实验内容1、页面总体布局设计，可以通过对选择“插入记录布局对象 DIV标签”命令的方法进行布局，也可以通过在代码视图中直接编写源代码的方进行布局，布局页面的HTM框架的代码。
2 、连接页面的CSS文件，先建一个名为styie.css的文件，然后打开CSS样式面板，单击附加样式表，连接超链接。
3 、设计网页的通用规则。
通用规则对所有的标记都起作用，绝大部分标记都会涉及属性。
打开CSS样式面板双击新建的那个文件，单击确定按钮，，用相同的方法设置BODAY的字体和方法。
4 、设计#header对象部分。
包括logo#logo和导航#nav.网页logo部分是一个中间栏固定，左右栏自适应的结构，并在fianshlogo中插入透明fiansh、动画；导航区域由#NAV#navbgl两个区组成，使用css中超链接属性。
5 、设计#content对象部分，#maincon为中间列，宽度固定，左右两列没有内容因此不需要考虑，而主体显示部分为三行，分别显示网页不同区域。
6 、设计#footer对象部分。
三、实验情况和实验结果1 页面总体布局2网页logo效果图3网页导航区效果图4网页#firstmain效果图四、实验体会CSS层叠样式表，是用于控制网页样式，是以HTML为基础提供丰富的格式化功能，由字体，颜色，背景，整体排版等。
制作菜单css实验报告实验目的本次实验的目的是利用CSS 技术制作一个菜单，在页面上展示出简洁、美观的效果，并能够实现一定的交互功能。
实验过程1. 准备工作在开始实验前，需要准备好实验所需要用到的素材和工具。
素材包括页面所需的图标、背景颜色、字体等。
工具则是指能够编写和调试CSS 代码的文本编辑器和浏览器。
2. 页面布局通过HTML 标签构建出一个基本的页面结构，包括`<header>`、`<nav>` 和`<ul>` 等标签。
然后使用CSS 选择器为这些标签设置样式，实现菜单的基本布局。
3. 设置菜单样式给`<ul>` 标签设置`list-style: none;`，去掉默认的列表样式。
然后设置菜单项的样式，比如字体、字号、颜色等。
根据需要设置菜单项的悬停效果、点击效果等。
4. 实现交互功能通过CSS 伪类选择器`:hover` 和`:active`，设置菜单在鼠标悬停和点击时的效果。
可以改变菜单项的背景色、字体颜色等，以实现交互效果。
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设计登录按钮的显示样式。
（8）聊天页面中使用CSS设计信息发送表单和发送按钮的样式，设计用户信息列表和聊天信息段落的的显示样式。
五、实验结果注册界面效果图及代码：<frameset cols="25%,75%">//总体框架<frame src="registImg.html" /><frame src="regist.html" /></frameset></html><body style="text-align:right;">//添加图片代码<img src="./img/d1.png"></body><body>//用户注册信息代码<form action="do_submit.cgi" method="post"><h1><font face="华文新魏/黑体"></font>注册信息</h1>用户姓名：<input type="text" name="USERNAME"><br/><br/>用户密码：<input type="password" name="USERNAME"><br/><br/><input type="radio" name="sex" checked>女<br/><br/>--><form>姓 别： <label for="male">男</label><input type="radio" name="sex" id="male" /><label for="female">女</label><input type="radio" name="sex" id="female" /></form>年 龄：<input type="text" name="age"><br/><br/> 联系电话：<input type="text" name="TEL"><br/><br/>邮箱地址：<input type="text" name="EMAIL"><br/><br/><p>职 业：<select size=1 name="work"><option>学生</option><option>白领</option><option>企业家</option><option>教师</option><option>医生</option></select></p><input type="submit" value="提交" name="submit"><input type="reset" value="重置" name="reset"></form></body>登录界面效果图及代码：<style type="text/css">#div {height: 320px;width: 680px;position: absolute;left: 50%;top: 50%;margin: -159px auto auto -340px;}#div #div1 {height: 94px;width: 100%;border-radius: 10px;}#div #div1 #img {width: 130px;height: 90px;float: left;}#div #div1 #title {line-height: 94px;font-size: 34px;color: #921AFF;width: 545px;height: 90px;float: left;}#div #div2 {border-radius: 10px;height: 216px;width: 670px;border: 5px solid;border-color: #FFAAD5;}#div #div2 #div3 {height: 200px;width: 300px;margin-top: 6px;margin-left: 6px;border-radius: 10px;border: 2px solid;border-color: #FFCBB3;font-size: 23px;text-align: center;float: left;background: url("./img/d4.png");} .button {height: 40px;width: 100px;box-shadow: 0px 0px 10px #3e7fcf;} input{width:140px;height:30px;}#div #div2 #div4 {height: 190px;width: 90px;float: left;margin-top: 20px;margin-left: 8px;}#div #div2 #div5{height: 200px;width: 200px;float: left;margin-left:28px;}</style></head><body bgcolor="#FF9797"><div id="div"><div id="div1"><div id="img"><img src="./img/logo.png" /></div><div id="title"><marquee width=455px height=94px vspace="5" hspace="5" behavior="scroll">微型聊天室</marquee></div></div><div id="div2"><div id="div3"><form action="#" method="post" id="myform"><br />用户姓名：<input type="text" name="USERNAME"><br /><br />用户密码：<input type="password" name="USERNAME"><br /><br /><button class="button" type="submit">登 录</button><button class="button" type="reset">重 置</button></form></div><div id="div4"><img src="./img/0.png"><br/><br/><center>在线人数</center><a href="MyHtml.html"><img src="./img/wan.png"width="99px" height="28px" border="none"></a></div><div id="div5"><img src="./img/hehua.png"></div></div></div></body></html>登录界面效果图及代码：<style type="text/css">#divbox {height: 480px;width: 720px;position: absolute;left: 50%;top: 50%;margin: -240px auto auto -360px;border: 1px red solid;}#divbox #divlist {height: 344px;width: 184px;background: #FF7575;line-height: 20px;margin-top: 6px;margin-left: 6px;float: left;border: 4px solid;border-color: #D9006C;border-radius: 8px;}#divbox #divlist p {text-indent: 2em;}#divbox #divtalk {height: 344px;width: 504px;margin-top: 6px;margin-right: 6px;background: #FFFFB9;float: right;border: 4px solid;border-color: #D9006C;border-radius: 8px;}#divbox #divtalk p {text-indent: 2em;}#divbox #divsend {height: 104px;width: 698px;margin-top: 6px;margin-left: 6px;background: #FFD1A4;border: 4px solid;border-color: #D9006C;position: absolute;left: 50%;top: 87%;margin: -52px auto auto -352px;border-radius: 8px;}.button {height: 104px;width: 78px;box-shadow: 0px 0px 10px #3e7fcf;}</style></head><body><center><h1>聊天室界面</h1></center><div id="divbox"><div id="divlist"><img src="./img/dog.png">在线用户： <br><p>张萨</p><p>王武</p><p>杜六</p></div><div id="divtalk"><p>张萨说：今天天气不错呀！</p><p>王武说：嗯嗯，正好可以出去春游呢!</p><p>杜六说：好主意，那咱们去哪儿呢？</p><p>王武说：小南海怎么样？</p></div><div id="divsend"><div style="float: left;"><textarea style="width: 620px; height: 104px;"></textarea> </div><div style="float: left;"><input id="button" type="button" value="发言"style="width: 78px; height: 104px;" /></div></div> </div></body></html>六、讨论由于实验的练习掌握了div的基本知识。
