最简单的divcss网页设计报告及其代码

（文章一）：实验报告1-DIV+CSS网页设计学生实验报告学期：2xx-2xx学年第二学期班级：2xx级计算机科学与技术学号：姓名：课程编号：课程名称：网页设计与制作填写说明

（1）、填写实验报告须字迹工整,使用黑色钢笔或签字笔填写。（2）、课程编号和课程名称必须和教务系统中保持一致，实验项目名称填写须完整规范，不能省略或使用简称。

（3）、每个实验项目应填写一份实验报告。如同一个实验项目分多次进行，可在实验报告中写明。

（4）、如果实验报告页面不够，可分成两个实验报告填写。实验目录及成绩登记说明：实验项目顺序和名称由学生填写，必须前后保持一致；实验成绩以百分制计，由实验指导教师填写并签名，一般不能涂改，确有涂改的，应在备注栏说明原因；实验报告部分最终成绩为所有实验项目成绩的平均值。实验报告实验日期：年月日星期（文章二）：DIV+CSS网页设计常用布局代码单行一列body{margin:0px;padding:0px;text-align:center;}

#content{margin-left:auto;margin-right:auto;width:400px;width:370px;} 两行一列body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370p x;}

#content-end{margin-left:auto;margin-right:auto;width:400px;width:370p

x;} 三行一列body{margin:0px;padding:0px;text-align:center;} #content-top{margin-left:auto;margin-right:auto;width:400px;width:370p x;}

#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370 px;}

#content-end{margin-left:auto;margin-right:auto;width:400px;width:370p x;} 单行两列#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:au to;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 两行两列#header{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} #bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:au to;} #bodycenter#dv1{float:left;width:280px;} #bodycenter#dv2{float:right;width:410px;} 三行两列#header{width:700px;margin-right:auto;margin-left:auto;}

#bodycenter{width:700px;margin-right:auto;margin-left:auto;}

#bodycenter#dv1{float:left;width:280px;}

#bodycenter#dv2{float:right;width:410px;}

#footer{width:700px;margin-right:auto;margin-left:auto;overflow:auto;} // 单行三列绝对定位#left{position:absolute;top:0px;left:0px;width:120px;}

#middle{margin:20px190px20px190px;}

#right{position:absolute;top:0px;right:0px;width:120px;} float定位一x: t;divid=warpt;divid=columnt;divid=column1这里是第一列t;/divt;divid=column2这里是第二列t;/divt;divclass=cleart;/divt;/divt;divid=column3这里是第三列t;/divt;divclass=cleart;/divt;/div CSS: #wrap{width:100%;height:auto;} #column{float:left;width:60%;} #column1{float:left;width:30%;} #column2{float:right;width:30%;}

#column3{float:right;width:40%;} .clear{clear:both;} float定位二x: t;divid=centerclass=columnt;h1Thisisthemaincontent.t;/h1t;/divt;divid=le ftclass=columnt;h2Thisistheleftsidebar.t;/h2t;/divt;divid=rightclass=colu mnt;h2Thisistherightsidebar.t;/h2t;/div CSS: body{margin:0;padding-left:200px;padding-right:190px;min-width:240p x;} .column{position:relative;float:left;} #center{width:100%;} #left{width:180px;right:240px;margin-left:-100%;}

#right{width:130px;margin-right:-100%;} 两行三列x:t;divid=header 这里是顶行t;/divt;divid=warpt;divid=columnt;divid=column1这里是第一列t;/divt;divid=column2这里是第二列t;/divt;divclass=cleart;/divt;/Pt;Pt;/divt;divid=column3这里是第三列t;/divt;divclass=cleart;/divt;/div CSS: #header{width:100%;height:auto;} #wrap{width:100%;height:auto;} #column{float:left;width:60%;} #column1{float:left;width:30%;} #column2{float:right;width:30%;} #column3{float:right;width:40%;} .clear{clear:both;} 三行三列x:

t;divid=header这里是顶行t;/divt;divid=warpt;divid=columnt;divid=column1这里是第一列t;/divt;divid=column2这里是第二列t;/divt;divclass=cleart;/divt;/divt;divid=column3这里是第三列t;/divt;divclass=cleart;/divt;/divt;divid=footer这里是底部一行t;/div CSS: #header{width:100%;height:auto;} #wrap{width:100%;height:auto;} #column{float:left;width:60%;} #column1{float:left;width:30%;} #column2{float:right;width:30%;} #column3{float:right;width:40%;} .clear{clear:both;} #footer{width:100%;height:auto;}

（文章三）：DIV+CSS教程完整版_完美整理+完整代码第一天X CSS基础知识欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。不过这里的DIV+CSS是一种错误的叫法，建议大家还是称之为web标准。学习本系列教程需有一定和css基础，也就是指您之前做过网页，会用表格布局。如果您刚开始学习网页制作，不知道什么是表格布局及和css，建议您先去充电，否则学习本教程会非常吃力或者根本就听不懂。由于时间关系，本教程只讲解一些基础知识，让您从原来的表格布局跨入到web标准（div+css）布局，会使用web标准制作出常见的页面，这也达到了本教程的目的。本教程多以实例形式循序渐进讲解，实例涉及到哪些关键点或难点就讲解什么，较少讲解概念。因为概念这些东西很难说明白，或者说明白你也不一定能听懂，听懂了也不一定能理解。所以把概念留给大家以

后再深入研究。由于章节关系，没有把css和css hack单独分出，只是在用到的时候穿讲解了。基础和css基础只在第一节中介绍了几点重要的。下面我们开始第一天的学习

（一）、x css基础知识首先说一下我们这节课的知识点

1. 文档类型

2. 语言编码

3. 标签

4. css样式

5. css优先级

6. css盒模型组成1）文档类型当我们用dreamweaver新建一下格式文档时，查看源代码，会发现代码最上部有如下这句话：t;!DOCTYPE PUBLIC -//W3C//DTD X

1.0 Transitional//EN /retype/zoom/42bebb3d9e3143323868939e?pn=4&x=0&y=138aww=462 awh=427&o=png_6_0_0_135_245_519_480_89

2.979_126

2.879&type=pic&aimh=427d5sum=3d603fce4e95b9a20b144da2c27ed41 6&sign=77b67ee18f&zoom=&png=2348-6175&jpg=0-0”

target=“_blank”>点此查看(content)、填充(padding)、边框(border)、边界(margin)，CSS盒子模式都具备这些属性。我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震

而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。

（二）、如何开始学习web标准？1）有和CSS基础学习本系列教程前，要求您有一定的和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。2）转变观念在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。3）多动手、多动脑说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过

评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。还有一个同学留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个时间，自己也早把图片下载下来了。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。另外在学习完一节教程后，一定要自己做一遍实例，这样能更快掌握。