CSS页面布局及样式设计实验报告
css+div布局(实验报告)
实验六 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的知识和技能。
通过实际操作，我深入了解了CSS的选择器、样式规则、布局和响应式设计等重要概念。
以下是我对这次实训的总结：1. CSS基础知识：在实训开始之前，我重新温习了CSS的基础知识，包括选择器、样式规则、颜色和字体、盒模型等。
这些基础知识对于理解CSS的核心概念非常重要。
2. 选择器：在实训中，我学习了更多的选择器，如类选择器、ID选择器、属性选择器等。
这些选择器让我能够更精确地定位和样式化页面元素。
通过使用不同的选择器，我可以根据需要选择单个元素或一组元素进行样式化。
3. 样式规则：在这次实训中，我学习了更多的CSS样式规则，如背景、边框、阴影、渐变等。
通过这些样式规则，我可以创建更加美观和专业的网页设计。
此外，我还学习了如何使用CSS动画和过渡效果，为网页添加动态效果。
4. 布局：在实训中，我学习了如何使用CSS进行页面布局。
通过使用Flexbox和Grid布局，我可以轻松地创建复杂的页面布局。
这些布局方法使得页面元素的排列和分布更加灵活和可控。
5. 响应式设计：在这次实训中，我学习了如何使用媒体查询和响应式设计。
通过使用媒体查询，我可以根据不同的设备和屏幕尺寸，应用不同的样式规则。
这使得我的网页能够在各种设备和屏幕尺寸上良好地显示和使用。
6. 实际应用：在实训中，我通过实际项目来应用所学的CSS知识。
我为一个虚构的网站设计了样式，并实现了响应式布局。
在这个过程中，我遇到了很多问题，但通过查阅文档和请教老师，我成功地解决了这些问题。
这个过程让我更加深入地理解了CSS的实际应用和技巧。
7. 总结：通过这次CSS实训，我不仅温习了基础知识，还学习了更多的高级技能。
我掌握了如何使用选择器、样式规则、布局和响应式设计来创建美观而专业的网页。
这次实训对我的专业技能的提升非常有帮助，也为我未来的职业发展打下了坚实的基础。
实验报告三_练习div+css页面布局的使用方法_
#maindiv
{
width:740px;
margin-top:0px;
margin-left:auto;
margin-right:auto;
}
#HeadDiv
{
width:740px;
background-image:url(images/logo-1.jpg);
height:80px;
text-align:right;
｜
<asp:HyperLinkID="HyperLink5"runat="server"NavigateUrl="#">产品</asp:HyperLink>
｜
<asp:HyperLinkID="HyperLink6"runat="server"NavigateUrl="#">联系我们</asp:HyperLink>
<asp:HyperLinkID="HyperLink3"runat="server"NavigateUrl="#">关于公司</asp:HyperLink>
｜
<asp:HyperLinkID="HyperLink4"runat="server"NavigateUrl="#">新闻</asp:HyperLink>
width:100%;
height:63px;
网页设计与制作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是一种用于网页设计的样式表语言，它可以控制网页的外观和布局。
本篇实验报告将介绍我在学习WebCSS过程中的实验内容和心得体会。
实验一：基础CSS样式的应用在这个实验中，我学习了如何使用CSS来设置网页的基本样式，比如字体、颜色、背景等。
通过实验，我发现CSS可以让网页更加美观和易读。
我尝试了不同的字体和颜色组合，发现不同的选择会给人不同的感觉。
比如，使用Serif字体的标题给人一种正式和专业的感觉，而使用Sans-serif字体则更加现代和简洁。
实验二：盒模型的应用在这个实验中，我学习了CSS的盒模型，它用于定义网页元素的尺寸和边距。
通过实验，我发现盒模型可以让网页的布局更加灵活和自由。
我尝试了设置不同的边距和内边距，发现可以通过微调来改变网页元素之间的间距和整体布局。
同时，我也学习了如何使用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样式表的设置与应用
实验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规则定义”窗口。
网页系统设计实验报告(3篇)
第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. 网页系统规划根据用户需求，本网页系统规划了以下功能模块：- 首页：展示网站简介、最新动态、热门产品等。
- 产品展示：详细介绍各个产品，包括图片、文字、价格等。
- 新闻资讯：发布公司新闻、行业动态等。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
实验项目名称： 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的基本知识。