最简单的divcss网页设计报告及其代码
最简单的divcss网页设计报告及其代码
篇一：实验报告1-DIV+CSS网页设计
学生实验报告
学期：2021-2021学年第二学期班级：2021级计算机科学与技术学号：姓名：课程编号：课程名称：网页设计与制作
填写说明
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:370 px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:370 px;}
三行一列
body{margin:0px;padding:0px;text-align:center;}
#content-top{margin-left:auto;margin-right:auto;width:400px;width:370 px;}
#content-mid{margin-left:auto;margin-right:auto;width:400px;width:370 px;}
#content-end{margin-left:auto;margin-right:auto;width:400px;width:370 px;}
单行两列
#bodycenter{width:700px;margin-right:auto;margin-left:auto;overflow:a uto;}
#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:a uto;}
#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定位一
xhtml:
divid= warp divid= column divid= column1 这里是第一列 /div divid= column2 这里是第二列 /div 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定位二
xhtml:
divid= center > CSS:
body{margin:0;padding-left:200px;padding-right:190px;min-width:240px; }
.column{position:relative;float:left;}
#center{width:100%;}
#left{width:180px;right:240px;margin-left:-100%;}
#right{width:130px;margin-right:-100%;}
两行三列
xhtml: divid= header 这里是顶行 /div divid= warp divid= column divid= column1 这里是第一列 /div divid= column2 这里是第二列 /div 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;}
三行三列
xhtml:
divid= header 这里是顶行 /div divid= warp divid= column divid= column1 这里是第一列 /div divid= column2 这里是第二列 /div 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教程完整版_完美整理+完整代码
第一天 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格式文档时，查看源代码，会发现代码最上部有如下这句话：
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
/retype/zoom/42bebb3d9e3143323868939e?pn=4&x=0&y=138&raww=462&rawh=42 7&o=png_6_0_0_135_245_519_480_892.979_1262.879&type=pic&aimh=427&md5s um=3d603fce4e95b9a20b144da2c27ed416&sign=77b67ee18f&zoom=&png=2348-61 75&jpg=0-0” target=“_blank”>点此查看
(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。
我们可以把它想像成现实中上方开口的盒子，然后从正上往下俯视，边框相当于盒子的厚度，内容相对于盒子中所装物体的空间，而填充呢，相当于为防震而在盒子内填充的泡沫，边界呢相当于在这个盒子周围要留出一定的空间，方便取出。是不是这样就很容易理解盒模型了。
所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中weight所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方
这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。
如果现在您对CSS盒模型理解还不够透彻，继续往下看，后来的章节会都会应用到盒模型实例。
二、如何开始学习web标准？
1）有HTML和CSS基础
学习本系列教程前，要求您有一定的html和css基础，制作过网页，会用表格进行网页布局，这样学习起来才会很轻松。如果您对这些还不懂，建议先学习这些知识，然后再来学习本教程。
2）转变观念
在以前我们制作网站时，总是习惯于先考虑外观、颜色、字体及布局等所有表现在页面上的内容。但外观并不是最重要的，相反最终用户在访问网页时的体验才是优先要考虑的。一个由div＋css布局且结构良好的页面可以通过css定义成任何外观，在任何网络设备上（包括手机、PDA和计算机）上以任何外观表现出来，而且用div＋css布局构建的网页以够简化代码，加快显示速度。
所以要想学好div＋css，首先要转变观念，需要抛弃传统的表格(Table)布局方式，采用层(DIV)布局，并且使用层叠样式表(CSS)来实现页面的外观。给网站浏览者更好的体验。
3）多动手、多动脑
说到这点，有点小儿科了，就像我们上小学时老师常常教我们的那样。为什么我在这里也做为一点列出来呢，我是通过评论发现，有些同学提的问题太没水平了，稍微动下脑筋就明白了，或者自己动手一试就知道了，但他就懒得试。举个简单的例子，拿浏览器兼容来说吧，你写个样式之后，在IE和火狐分别打开看一下不就明白了，但就是不去做。还有一个同学留言要我把一个实例中的图片打包发给他，我一看代码，就用到一张图片，无语了，有你留言的这个时间，自己也早把图片下载下来了。所以在这里告诫大家，一定要多动手、多动脑，不要怕麻烦。另外在学习完一节教程后，一定要自己做一遍实例，这样能更快掌握。