最简单的divcss网页设计报告及其代码
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对于网页设计来说有很重要的意义。
divcss制作网页模板的基本步骤(divcss网页页面效果制作
divcss制作网页模板的基本步骤（divcss网页页面效果制作导读大家好,小宜来为大家讲解下。
div，css制作网页模板的基本步骤（div+css网页页面效果制作这个很多人还不知道,现在让我们一起来看看吧！Div ...大家好,小宜来为大家讲解下。
div，css制作网页模板的基本步骤（div+css网页页面效果制作这个很多人还不知道,现在让我们一起来看看吧！Div CSS制作网页模板的基本步骤在当今数字化的世界里，网站已成为公司、组织、个人宣传以及推广业务的关键。
为了制作优质的网站，设计师们需要掌握许多技术和方法，其中之一是使用Div CSS。
本文将介绍Div CSS制作网页模板的基本步骤，帮助初学者了解如何应用这一技术，确保网页的美观和难忘。
一、确定网页结构每个网页都有一个独特的结构。
在开始使用Div CSS之前，您需要知道您想要创建的网页类别。
是一个单页网站，还是包含多个页面？您使用的是静态页面还是动态页面？这些因素都将影响您的设计。
二、设计布局设计布局是网站设计中的重要一步。
您可以使用Div CSS创建各种不同的布局，比如多列、单列、网格等。
您可以使用float属性设置网页中内容的布局。
通过复制和粘贴，您可以创建一个包含多个元素的布局，然后使用float属性对它们进行排列。
三、使用CSS设置样式CSS是Cascading Style Sheets的缩写，用于定义HTML元素的外观和布局，使网站看起来更具吸引力。
您可以使用CSS设置文字、颜色、背景、边框、文本、间距等。
Div CSS的一个关键特性是可以在HTML模板中分离布局和样式。
然后，通过CSS样式表拾取器来应用这些样式。
四、使用CSS优化网站在优化网站时，可以通过CSS的各种技术提高性能和用户体验。
在页面加载时，如果使用过多的CSS或大型背景图像，会使页面加载速度变慢。
流线型CSS是一种有效的优化网页的方式。
通过移除旧版的CSS，使用高效代码重写新的CSS，并将其中的重复内容与变量合并，可在较短的时间内实现较快的加载速度。
介绍网站制作DIV+CSS基本布局实现代码
介绍网站制作DIV+CSS基本布局实现代码
下面小编给大家分享的是介绍网站制作DIV+CSS基本布局实现代码，在这里详细的介绍网站制作DIV+CSS基本布局实现代码，希望对大家有所帮助.
很多企业网站制作布局都具有传统型，基本层次包括：顶部：header、主要区域：main、左侧：sidebar、右侧：containe和底部：footer。
本文主要讲诉用DIV+CSS如何实现这样的布局。
在制作之前我们先注意下浏览器的兼容问题，在IE中，正常的代码就可以完全显示，但在FF中，footer层就会消失。
这是因为FF不知道浮动以后发生的事情，不清楚main的高度为几何，我们看不到它的存在。
我们应该在sidebar、containe结束的地方清除浮动，让FF知道如何处理footer层，而不是直接放到上面，在视觉上消失。
HTML代码如下：
;;
;;
;
;;
;;
;;
;
;;
CSS代码如下：
*{margin:0;padding:0;} //整体布局声明，边距与填充均为零。
网页基础编程实验报告
一、实验目的1. 熟悉HTML、CSS和JavaScript等网页编程技术。
2. 掌握网页布局和样式设计的基本方法。
3. 学会使用JavaScript实现简单的交互功能。
4. 培养动手实践能力和团队协作精神。
二、实验环境1. 操作系统：Windows 102. 浏览器：Google Chrome3. 编辑器：Visual Studio Code4. 网页编程语言：HTML、CSS、JavaScript三、实验内容1. HTML基础2. CSS基础3. JavaScript基础4. 网页布局与样式设计5. 简单交互功能实现四、实验步骤1. HTML基础（1）创建一个名为“index.html”的HTML文件，并设置以下基本结构：<!DOCTYPE html><html><head><title>网页基础编程实验</title></head><body><h1>欢迎来到我的网页</h1><p>这是一个简单的网页示例。
</p></body></html>（2）保存文件后，在浏览器中打开“index.html”，查看网页效果。
2. CSS基础（1）在“index.html”文件的<head>部分添加以下CSS样式：<style>body {font-family: Arial, sans-serif;background-color: #f2f2f2;}h1 {color: #333;text-align: center;}p {font-size: 16px;text-align: center;}</style>（2）保存文件后，在浏览器中打开“index.html”，查看网页样式效果。
3. JavaScript基础（1）在“index.html”文件的<body>部分添加以下JavaScript代码：<script>function sayHello() {alert("Hello, World!");}</script>（2）在网页中添加一个按钮，并为其绑定sayHello函数：<button onclick="sayHello()">点击我</button>（3）保存文件后，在浏览器中打开“index.html”，点击按钮，查看弹窗效果。
网页设计与制作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代码来调整网页布局，以使其更加美观。
超级牛最详细的Div+CSS布局案例
DIV固定宽度居中显示－超级牛最详细的Div+C SS布局案例这个例子的主要内容是居中显示，现在的显示器的宽度都比较大，并且规格不统一，所以判断一个网页是不是专业，第一眼就是这个网站是不是居中，如果不居中，一般不是一个很老的没有人维护的网站就是一个技术很差的人写的。
CSS代码如下：body { font-family:Verdana; font-size:14px; margin:0;}#container {margin:0 auto; width:900px; height:500px; background:#CD5C5C;}页面代码如下：<div id="container"><p>1列固定宽度居中</p></div>效果下图显示：（点击看大图）其中居中的关键是“margin:0 auto;”代码例子由“标准之路”提供，感谢！序－经验之谈－超级牛最详细的Div+CSS布局案例最近有很多晚辈问我关于网站制作方面的问题，随着SEO的普及，DIV+CSS的网站制作理念成为了流行，但在实际操作中，DIV其实是很不好控制的。
大家会碰到很多问题，例如应该在左中右的，但却没有达到这样的效果。
在写大家最关心的Div+CSS布局案例前，让我先啰嗦几句，从事互联网工作已经快6年了，一个网站的产生，一般分为调研，策划，设计，制作，开发，内容、维护，如果是高级点的网站，会涉及到运营和推广的工作。
我有幸全部工作流程都涉及过，我想先说一点我自己从事页面构造时的经验和理解，当然在一定程度上可能存在局限性，但因为看到了很多失败的经历，所以想在说技术前，说点别的。
在制作网站前，一定要先构思网站的内容，很多人会说，我们当然是先构思的，不构思怎么会想到做网站，但很多人的构思都是表面的，在脑海里的，而不是形成文字的，其实有时，看上去很麻烦，很形式化的文字报告却可以帮助我们理清很多自己以为清楚却实际并不清楚的概念。
css实验报告
css实验报告
CSS（Cascading Style Sheets）是一种用于对网页进行样式修饰的标记语言。
通过CSS，我们可以对网页的字体、颜色、布局等进行控制，使网页看起来更加美观和易于阅读。
在本次实验中，我学习并实践了CSS的基本用法，并通过设置样式参数和样式选择器对网页进行了修饰。
首先，我创建了一个简单的网页结构。
在HTML中，我创建了一个包含标题和内容的div元素，并为div元素设置了一个唯一的id属性值。
然后，我在CSS中使用id选择器来选择并设置该div元素的样式参数。
通过设置字体、颜色、背景颜色和边框等参数，我成功实现了对div元素的修饰。
其次，我学习了CSS的样式选择器。
通过样式选择器，我可以选择并设置多个元素的样式参数，而无需为每个元素单独设置样式。
在实验中，我使用了类选择器和后代选择器来选择并设置多个元素的样式参数。
在实验过程中，我遇到了一些问题。
例如，当我设置字体和颜色时，我忘记使用引号将参数值括起来，导致设置无效。
但通过阅读文档和查找资料，我快速解决了这些问题，并成功实现了对网页的修饰。
通过这次实验，我不仅学到了CSS的基本用法，还了解到了CSS的强大之处。
通过CSS，我可以轻松地对整个网页进行样式修饰，而不需要修改HTML代码。
可以说，CSS是一种非常灵活和方便的样式修饰工具。
总之，通过本次实验，我学习并实践了CSS的基本用法。
通过设置样式参数和样式选择器，我成功修饰了网页的样式，并且解决了一些常见的问题。
通过这次实验，我对CSS的理解更加深入，并且对网页设计有了更高的兴趣和热情。
网页设计作业源代码
<html><head><title>WEB Design</title><style type="text/css">*{margin:0 auto;width:600px;font-family:Arial;}#header{margin:0 auto;height:60px;width:600px;font-size:25px;vertical-align:middle;color:skyblue;}#nav{height:30px;background:skyblue;}a{float:left;display:block;width:120px;font-size:17px;padding-left:4px;color:white;text-align:center;vertical-align:middle;font-style:bold;padding-top:7px;}a:link{text-decoration:none;}a:hover{background:gray;}p{font-size:25px;padding-top:10px;padding-bottom:10px;}.int{font-size:17px;text-indent:2em;word-space:1px;font-style:normal;font-weight:normal;} table,th,td{border: 3px solid black;margin-top:10px;border-collapse:collapse;text-align:center;} th{width:600px;height:30px;}</style></head><body><div id="header"><strong>WEB DESIGN<strong></div><div id="nav"><div class="navs"><a href="#">HOME</a></div><div><a href="#">HTML</a><div class="navs"><a href="#">CSS</a></div><div class="navs"><a href="#">JavaScript</a></div></div><p>Introduction</p><hr width:100%/><p class="int">Web design encompasses many different skills and disciplines in the production and maintenance of websites. The different areas of web design include web graphic design; interface design; authoring, including standardised code and proprietary software; user experience design; and search engine optimization. Often many individuals will work in teams covering different aspects of the design process, although some designers will cover them all. The term web design is normally used to describe the design process relating to the front-end (client side) design of a website including writing mark up. Web design partially overlaps web engineering in the broader scope of web development. Web designers are expected to have an awareness of usability and if their role involves creating mark up then they are also expected to be up to date with web accessibility guidelines.</p><p>Schedule</p><hr width:100%/><table><tr></tr><td>date</td><td>9:00-12:00</td><td>13:00-16:00</td><tr></tr><td>dec.1-5th</td><td>HTML</td><td>Photoshop</td><tr></tr><td>dec.8-12th</td><td>CSS</td><td>Photoshop</td><tr></tr><td>dec.15-19th</td><td colspan="2">JavaScript</td></table></body></html>。
css+div代码讲解
一列固定宽度居中<!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=gb2312" /><style type="text/css">注释：告诉浏览器，这段标签内包含的内容是css或text；也就是说如果某种浏览器（特别是wap等手机浏览器械、）不能识别css的，会将代码认为text，从而不显示也不报错。
#layout { height: 300px; width: 400px; background: #99FFcc; margin:auto; }</style></head><body><div id="layout">此处显示id "layout" 的内容</div></body></html>一列二至多块布局<!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=gb2312" /><style type="text/css">body { margin:0; padding:0;}#header { margin:5px auto; width:500px; height:80px; background:#9F9;}#main { margin:5px auto; width:500px; height:400px; background:#9FF;}#footer { margin:5px auto; width:500px; height:80px; background:#9f9;}</style></head><body><div id="header">此处显示id "header" 的内容</div><div id="main">此处显示id "main" 的内容</div><div id="footer">此处显示id "footer" 的内容</div></body></html>纵向导航代码：<!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=gb2312" />注释：content-type:text/html。
div+css布局完整代码
3.CSS布局高级技巧
margin和padding总是有可能要用到，而产生的问题如何解决呢？由于浏览器解释容器宽度的方法不同：
IE 6.0 Firefox Opera等是
真实宽度=width+padding+border+margin
IE5.X
真实宽度=width-padding-border-margin
<div id="column1">这是第二列</div>
<div class="clear"></div>
</div>
css:
#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}
#content-end { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
两列
单行两列
#bodycenter { width: 700px;margin-right: auto; margin-left: auto;overflow: auto; }
网上流传的，我觉得很经典了，你可以看原地址更清楚些。
CSS常用布局实例
一列
单行一列
body { margin: 0px; padding: 0px; text-align: center; }
#content { margin-left:auto; margin-right:auto; width: 400px; width: 370px; }
实验三DIV+CSS样式应用
实验名称DIV+CSS样式应用实验3 DIV+CSS样式应用1实验目的1)了解页面常用布局结构；2)掌握使用CSS盒子模型浮动与定位的方法3)掌握DIV的使用方法；4)掌握DIV+CSS布局的基本方法；2实验内容及要求1)制作一个简单的如下图框架的首页，不需要填写具体内容，使用背景色标出区域；3 实验原理浮动边框可以向左或向右移动，直到外边缘碰到包含框或另一个浮动框的边框为止。
通过float或margin来让元素产生位置移动。
4仪器与材料安装有Windows7或以上操作系统的计算机，Dreamweaver5实验内容5.1CSS 布局入门CSS 布局与传统表格(table)布局最大的区别在于：原来的定位都是采用表格，通过表格的间距或者用无色透明的GIF 图片来控制文布局版块的间距；而现在则采用层(div)来定位，通过层的margin、padding、border 等属性来控制版块的间距。
定义DIV，分析一个典型的定义div 例子：说明如下：1)层的名称为sample，在页面中用就可以调用这个样式；2)margin 是指层的边框以外留的空白，用于页边距或者与其它层制造一个间距。
"10px 10px 10px 10px"分别代表"上右下左"(顺时针方向)四个边距，如果都一样，可以缩写成"margin: 10px;"。
如果边距为零，要写成"margin: 0px;"；3)注意：当值是零时，除了rgb 颜色值0%必须跟百分号，其他情况后面可以不跟单位"px"。
margin 是透明元素，不能定义颜色；4)padding 是指层的边框到层的内容之间的空白。
和margin 一样，分别指定上右下左边框到内容的距离。
如果都一样，可以缩写成"padding:0px"。
单独指定左边可以写成"padding-left: 0px;"。
htmldiv标准代码
htmldiv标准代码首先，让我们来看一下div标签的基本语法。
在HTML中，div标签是用来定义一个文档中的分区或区块的。
它通常被用来组织文档的布局，并且可以通过CSS来进行样式的设置。
div标签的基本语法如下：```html。
<div>。
<!-这里是div标签的内容 -->。
</div>。
```。
在上面的代码中，我们可以看到div标签是由`<div>`和`</div>`这对标签组成的。
在`<div>`标签中可以包含任意的HTML内容，比如文本、图片、表格等。
div标签可以用来创建一个独立的区块，它可以被用来布局网页的各个部分，比如头部、导航、内容区、侧边栏和底部等。
除了基本的div标签外，我们还可以通过给div标签添加id和class属性来对其进行进一步的标识和样式设置。
id属性用来唯一标识一个元素，而class属性则可以用来标识一组元素。
我们可以通过id和class属性来为div标签添加样式，或者通过JavaScript来操作它们。
```html。
<div id="header">。
<!-这里是头部内容 -->。
</div>。
<div class="content">。
<!-这里是内容区内容 -->。
</div>。
<div id="footer">。
<!-这里是底部内容 -->。
</div>。
```。
通过给div标签添加id和class属性，我们可以更加灵活地对网页进行布局和样式的设置。
比如，我们可以通过id属性来为特定的区块添加样式，或者通过class属性来为一组元素添加相同的样式。
总的来说，div标签是HTML中非常重要的一个元素，它可以用来创建网页的布局结构，并且可以通过CSS和JavaScript来进行样式和行为的设置。
网页布局CSS+Div
用CSS设计网页布局实例效果，如下图所示（浏览示例页面）：本例素材及页面源代码下载该实例的每个部分都有其侧重点，其中前三项关于素材制作与设计，要求有一定的Photoshop或Fireworks操作基础，这也是网页设计的必备基础技能。
下面将学习如何一步一步的构建一个CSS页面。
本例分成以下7个部分：首先是关于如何在PS/FW中制作导航按钮素材；接着针对的是内容背景、页面的整体布局以及顶部解析等，最后一部分是如何整合CSS和XHTML。
1. 导航菜单素材的设计有些人可能会疑惑为什么要从导航按钮图片的制作开始，事实上是让大家了解进而注重素材制作中的一些细节处理，这对最终的作品效果有很大的影响，至少在视觉上而言。
首先看一下完成的效果：1）玻璃质感导航图片的制作首先在Photoshop/FW中建立一个178x22像素的RGB空白文档，添加一个新图层命名为“按钮”，并用灰色#ECECEC进行填充。
再新建一个图层命名为“高光”，在其上、左边缘各绘制1px的白色线条，你用画笔或单像素选取工具都可以。
然后我们用橡皮工具把左边缘白线的底部擦除一段，在这里使用大小20px透明度为50%的橡皮刷，如下图所示。
新建一个名为“网点”的图层，用1px的铅笔工具在适当的位置绘制几个小点，示例中的颜色是#727272，当然这里你可以自由发挥设计更有创意的小点组合，关键就是要让它们看起来精致有序，如下图所示。
接着通过钢笔工具绘制路径创建选区，并在选区内填充#d6d6d6颜色，来模拟玻璃的质感效果。
整个图片素材的制作过程虽然不是很复杂，但是最终效果看起来也不是很差。
2）鼠标经过导航时的翻转图片创建翻转效果图片，只要简单地在原有素材基础上调整色调即可，关于文本的添加在这里就不细说了。
我们可以为每个图层调整色调，在示例中主要使用了几种颜色：背景#BFE3FF、玻璃质感#A5D1F3、网点#E4001B，如下图所示。
这部分涉及到一些PS/FW的基本知识，如果你不是很了解，建议先学习一些PS/FW的入门基础，毕竟Adobe合并了Macromedia之后，其旗下软件尤其是PS与网页设计的关联性已经越来越紧密了。
div和css
河南城建学院计算机学院《网页编程》实验报告班级姓名：学号：实验日期： 2014 年 11 月 03 日软件环境： Windows 、ie一、实验目的1、掌握web标准和网站重构；2、掌握css选择器分类；3、掌握css应用；4、掌握div元素的定位。
二、实验内容1、结合web标准实现网页设计；2、应用内部样式表和外部样式表到网页；3、结合div和css实现页面美化。
三、运行结果截图及代码清单<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><link href="Untitled-5.css" rel="stylesheet" type="text/css"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title><style type="text/css">body {background-image: url(t010dd639f9b629de6f.jpg);background-repeat: no-repeat;font-size: 14px;font-family: "宋体";}.才 {font-weight: bold;}如果有来生我要做一棵树，站成永恒，没有悲欢的姿势。
制作博客网页实验报告(3篇)
第1篇一、实验目的1. 熟悉HTML、CSS、JavaScript等网页制作技术。
2. 学会使用HTML标签创建网页的基本结构。
3. 掌握CSS样式表对网页进行美化和布局。
4. 熟悉JavaScript编程，实现网页的交互功能。
5. 提高网页制作能力，为今后开发个人博客做好准备。
二、实验环境1. 操作系统：Windows 102. 浏览器：Chrome3. 编程工具：Sublime Text 34. 开发语言：HTML、CSS、JavaScript三、实验内容1. 网页基本结构（1）创建HTML文件，命名为“index.html”。
（2）使用HTML标签创建网页的基本结构，包括：头部（head）、主体（body）和尾部（footer）。
（3）在头部标签中，添加标题（title）和元数据（meta）。
（4）在主体标签中，添加导航栏（nav）、文章区域（article）和侧边栏（aside）。
2. 网页布局与美化（1）使用CSS样式表设置网页的整体布局。
（2）设置导航栏、文章区域和侧边栏的样式，包括：字体、颜色、边框、背景等。
（3）使用媒体查询（Media Query）实现响应式布局，适应不同屏幕尺寸。
3. 网页交互功能（1）使用JavaScript编写脚本，实现文章区域的动态加载。
（2）实现侧边栏的折叠功能，方便用户查看。
（3）使用JavaScript实现搜索框的搜索功能。
四、实验步骤1. 创建HTML文件，命名为“index.html”。
2. 在HTML文件中，使用以下代码创建网页的基本结构：```html<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我的博客</title><link rel="stylesheet" href="style.css"></head><body><header><nav><!-- 导航栏内容 --></nav></header><main><article><!-- 文章内容 --></article><aside><!-- 侧边栏内容 --></aside></main><footer><!-- 页脚内容 --></footer><script src="script.js"></script></body></html>```3. 创建CSS文件，命名为“style.css”，并设置网页的样式。
CSS+DIV页面布局实验
border: 1px solid red;
float: left;
margin-top: 15px;
}
.special{
width: 1226px;
height: 438px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
background-color:yellow;
margin-right: auto;
margin-left: auto;
}
.product{
height: 420px;
width:1226px;
margin-right: auto;
margin-left: auto;
border: solid red;
width: 1226px;
border: 1px solid red;
margin-right: auto;
margin-left: auto;
}
.p5{
height: 150px;
width: 798px;
border: 1px solid red;
float: left;
}
.p6{
height: 150px;
float: left;
}
.special>.shop1{
height: 380px;
width: 232.5px;
border: 1px solid red;
margin-left:15px;
float: left;
}
.special>.shop2{
height: 58px;
实验四DivCSS网页布局
实验四 Div+CSS网页布局一、站点规划在网页制作中，有许多的术语，例如： HTML、CSS、DIV等等。
下面我们就开始一步一步使用DIV+CSS 进行网页布局设计吧。
所有的设计第一步就是构思，构思好了，一般来说还需要制作的界面布局简单的构画出来。
下面，我们需要根据构思图来规划一下页面的布局，仔细分析一下该图，我们不难发现，图片大致分为以下几个部分：1、顶部部分，其中又包括了LOGO、MENU和一幅Banner图片；2、内容部分又可分为侧边栏、主体内容；3、底部，包括一些版权信息。
有了以上的分析，我们就可以很容易的布局了，我们设计层如下图:根据上图，我再画了一个实际的页面布局图，说明一下层的嵌套关系，这样理解起来就会更简单了。
DIV结构如下：│body {}/*这是一个HTML元素，具体我就不说明了*/└#Container {}/*页面层容器*/├#Header {}/*页面头部*/├#PageBody {}/*页面主体*/│├#Sidebar {}/*侧边栏*/│└#MainBody {}/*主体内容*/└#Footer {}/*页面底部*/至此，页面布局及规划已经完成，接下来我们要做的就是开始书写HTML代码和CSS。
接下来我们在桌面新建一个文件夹，命名为“DIV+CSS页面布局”，在文件夹下新建两个空的记事本文档，输入以下内容：这是XHTML的基本结构，将其命名为index.htm，另一个记事本文档则命名为css.css。
下面，我们在<body></body>标签对中写入DIV的基本结构，代码如下：为了使以后阅读代码更简易，我们应该添加相关注释，接下来打开css.css文件，写入CSS信息，代码如下：把以上文件保存，用浏览器打开，这时我们已经可以看到基础结构了，这个就是页面的布局了。
关于以上CSS的说明：1、请养成良好的注释习惯，这是非常重要的；2、body是一个HTML元素，页面中所有的内容都应该写在这标签对之内，我就不多说了；3、讲解一些常用的CSS代码的含义：font:12px Tahoma；这里使用了缩写，完整的代码应该是：font-size:12px;font-family:Tahoma；说明字体为12像素大小，字体为Tahoma格式；margin:0px；也使用了缩写，完整的应该是：margin-top:0px;margin-right:0px;margin-bottom:0px;margin-left:0px或margin:0px 0px 0px 0px顺序是上 / 右 / 下 / 左，你也可以书写为margin:0(缩写)；以上样式说明body部分对上右下左边距为0像素，如果使用auto则是自动调整边距，另外还有以下几种写法：margin:0px auto；说明上下边距为0px，左右为自动调整；我们以后将使用到的padding属性和margin有许多相似之处，他们的参数是一样的，只不过各自表示的含义不相同，margin是外部距离，而padding则是内部距离。
前端网页设计代码大全
20)固定ckground="背景图片地址" body
bgproperties=fixed>
21)定制帖子背景颜色：<body bgcolor="#value">(value值见10)
22)帖子背景音乐：<bgsound="背景音乐地址" loop=infinite>
height:95px;z-index:2"> height=100% width=100%>
<iframe width=0 height=0></iframe>
</div>
<div id="Layer1" style="position:absolute; top:50;width:200px;
height:115px;z-index:1">
alert("禁止按Shift键!"); //可以换成ALTCTRL
}
document.onkeydown=look;
</script>
29.网页不会被缓存
<META HTTP-EQUIV="pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
alert("登陆成功！");
第三章DIV+CSS代码编写
定义：关联选择器是多个选择器用空格隔开来实
现的选择器。 语法：关联选择器的定义方式为多个选择器用空 格隔开 selector1 selector2{属性:值;}，当使用 关联选择器时必须按照选择器顺序依次使用 举例如：定义：<style> .color1 p{ color:red; } </style> 使用方法：<b class=“color1”><p>内容</p></b>
任何一个元素都可以设臵边框，边框属性可以
设臵一个元素边框颜色、边框颜色、边框颜色 等。可以一起设臵4个边的边框，也可以分别设 臵每个边框。分别设臵时按照顺时针方向设臵 ，即上->右->下->左。
1. 2. 3.
4.
Border-style 边框样式 值为：none(没有边框)，dotted(点线 式边框)，dashed(破折线式边框)，solid(实线式边框)， double(双线式边框)，groove(槽显示边框)，ndge(脊线式边 框)，inset(内嵌式边框)，outset(突起效果边框) Border-style:值1 值2 值3 值4； 一个值指四个边样式相同 两个值指上下边第1个样式，左右边第2个样式 三个值指上边第1个样式，下边第2个样式，左右边第3个样 式 四个值指上边第1个样式，右边第2个样式，下边第3个样式 ，左右边第4个样式 Border-top-style 上边框样式 Border-right-style右边框样式 Border-bottom-style 下边框样式 Border-left-style左边框样式
外部样 式表
输入样 式表
内联样式表
DIV+Css总结
1.以下是下划线的效果<style>p.one {text-decoration:underline;} /* 下划线效果*/p.two {text-decoration:overline; }/* 顶划线*/p.three {text-decoration:line-through;} /* 中间划线*/p.four {text-decoration:blink;}/*闪烁，只在firefox中可以。
*/p.five{ text-decoration:underline overline line-through; }/* 三种同时,有几种就用空格隔开*/</style>2. 英文字母大小写的方式<style><!--p{ font-size:17px; }p.one{ text-transform:capitalize; } /* 单词首字大写*/p.two{ text-transform:uppercase; } /* 全部大写*/p.three{ text-transform:lowercase; } /* 全部小写*/-->font-family:Arial, Helvetica, sans-serif; /* 字体*/letter-spacing:-2px; /* 字母间距*/</style>3. vertical-align的用法！vertical-align只作用于在同一行内的元素vertical-align声明在很多中文文档中解释是“决定元素在垂直位置的显示”，它有下面几个参数baseline | sub | super | top | text-top | middle | bottom | text-bottom |baseline：与元素的基线对齐。
middle：与元素中部对齐。
sub：字下沉。
super：字上升。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
最简单的divcss网页设计报告及其代码实验六CSS布局【实验目的】掌握用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对于网页设计来说有很重要的意义。
DIV+CSS网页设计实例教程目录：第一步：规划网站，本教程将以图示为例构建网站；第二步：创建html模板及文件目录等；第三步：将网站分为五个div，网页基本布局的基础；第四步：网页布局与div浮动等；第五步：网页主要框架之外的附加结构的布局与表现；第六步：页面内的基本文本的样式(css)设置；第七步：网站头部图标与logo部分的设计；第八步：页脚信息(版权等)的表现设置；第九步：导航条的制作(较难)；第十步：解决IE浏览器的显示BUG；第一步：规划网站，本教程将以图示为例构建网站1.规划网站，本教程将以下图为例构建网站。
其基本布局见下图：主要由五个部分构成：1.Main Navigation 导航条，具有按钮特效。
Width: 760px Height: 50px2.Header 网站头部图标，包含网站的logo和站名。
Width: 760px Height: 150px3.Content 网站的主要内容。
Width: 480px Height: Changes depending on content4.Sidebar 边框，一些附加信息。
Width: 280px Height: Changes depending on5.Footer 网站底栏，包含版权信息等。
Width: 760px Height: 66px第二步：创建html模板及文件目录等 1.创建html模板。
代码如下：CompanyName - PageName@import "css/master.css";将其保存为index.html,并创建文件夹css，images，网站结构如下：2.创建网站的大框，即建立一个宽760px的盒子，它将包含网站的所有元素。
在html文件的和之间写入Hello world.创建css文件，命名为master.css,保存在/css/文件夹下。
写入：#page-container {width: 760px;background: red;}控制html的id为page-container的盒子的宽为760px，背景为红色。
表现如下：现在为了让盒子居中，写入margin: auto;，使css文件为：#page-container {width: 760px;margin: auto;background: red;}现在你可以看到盒子和浏览器的顶端有8px宽的空隙。
这是由于浏览器的默认的填充和边界造成的。
消除这个空隙，就需要在css文件中写入：html, body {margin: 0;padding: 0;}第三步：将网站分为五个div，网页基本布局的基础:1.将“第一步”提到的五个部分都放入盒子中，在html文件中写入：Main NavHeaderSidebar AContentFooter表现如下：2.为了将五个部分区分开来，我们将这五个部分用不同的背景颜色标示出来，在css文件写入：#main-nav {background: red;height: 50px;}#header {background: blue;height: 150px;}#sidebar-a {background: darkgreen; }#content {background: green;}#footer {background: orange;height: 66px;}表现如下：第四步：网页布局与div浮动等：1.浮动，首先让边框浮动到主要内容的右边。
用css控制浮动: #sidebar-a {float: right;width: 280px;background: darkgreen;}表现如下：2.往主要内容的盒子中写入一些文字。
在html文件中写入：Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.表现如下：但是你可以看到主要内容的盒子占据了整个page-container的宽度，我们需要将#content的右边界设为280px。
以使其不和边框发生冲突。
css代码如下：#content {margin-right: 280px;background: green;}同时往边框里写入一些文字。
在html文件中写入：Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam gravida enim ut risus. Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim. Maecenas in lectus.Donec in sapien in nibh rutrum gravida. Sed ut mauris. Fusce malesuada enim vitae lacus euismod vulputate. Nullam rhoncus mauris ac metus. Maecenas vulputate aliquam odio. Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,purus. Suspendisse mattis nunc vestibulum ligula. In hac habitasse platea dictumst.表现如下：这也不是我们想要的，网站的底框跑到边框的下边去了。
这是由于我们将边框向右浮动，由于是浮动，所以可以理解为它位于整个盒子之上的另一层。
因此，底框和内容盒子对齐了。
因此我们往css 中写入：#footer {clear: both;background: orange;height: 66px;}表现如下：第一天 XHTML CSS基础知识欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。
不过这里的DIV+CSS是一种错误的叫法，建议大家还是称之为web标准。
学习本系列教程需有一定html和css基础，也就是指您之前做过网页，会用表格布局。
如果您刚开始学习网页制作，不知道什么是表格布局及html和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。
由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。
本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。
因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。
所以把概念留给大家以后再深入研究。
由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿插入讲解了。
html基础和css基础只在第一节中介绍了几点重要的。
下面我们开始第一天的学习一、xhtml css基础知识首先说一下我们这节课的知识点1. 文档类型2. 语言编码3. html标签4. css样式5. css优先级6. css盒模型组成1）文档类型当我们用dreamweaver新建一下html格式文档时，查看源代码，会发现代码最上部有如下这句话：点此查看(content)、填充(padding)、边框(border)、边界(margin)， CSS 盒子模式都具备这些属性。
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。
是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。
二、如何开始学习web标准？1）有HTML和CSS基础学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。