DIV+CSS基础教程全攻略

格式：doc
大小：1.08 MB
文档页数：46

下载文档原格式

DIVCSS入门教程

DIVCSS入门教程一、DIV的基本用法```html<div></div>```二、DIV的布局和样式1.宽度和高度可以使用CSS样式属性来设置DIV的宽度和高度，如下所示：```cssdivwidth: 200px; /* 设置DIV的宽度为200像素 */height: 100px; /* 设置DIV的高度为100像素 */```2.背景颜色和背景图片可以使用CSS样式属性来设置DIV的背景颜色和背景图片，如下所示：```cssdivbackground-color: red; /* 设置DIV的背景颜色为红色 */ background-image: url("bg.jpg"); /* 设置DIV的背景图片为bg.jpg */```3.边框和边框样式可以使用CSS样式属性来设置DIV的边框和边框样式，如下所示：```cssdivborder: 1px solid black; /* 设置DIV的边框为1像素的实线黑色边框 */border-radius: 5px; /* 设置DIV的边框圆角为5像素*/```4.文本样式可以使用CSS样式属性来设置DIV内文本的样式，如下所示：```cssdivcolor: white; /* 设置DIV内文本的颜色为白色 */ font-size: 16px; /* 设置DIV内文本的字体大小为16像素 */text-align: center; /* 设置DIV内文本的水平居中对齐*/line-height: 30px; /* 设置DIV内文本的行高为30像素*/```5.浮动布局可以使用CSS样式属性来设置DIV的浮动布局，如下所示：```cssdivfloat: left; /* 设置DIV的浮动为左浮动 */clear: both; /* 设置DIV下方没有浮动元素，用于清除浮动影响 */```6.盒模型可以使用CSS样式属性来设置DIV的盒模型，如下所示：```cssdivmargin: 10px; /* 设置DIV的外边距为10像素 */ padding: 10px; /* 设置DIV的内边距为10像素 */box-sizing: border-box; /* 设置DIV的盒模型为border-box，包含边框在内的宽度不变 */```以上是DIV的基本用法和常见的CSS样式属性。

DIVCSS入门基础知识教程

DIV+CSS盒子模型CSS盒子模型-什么是CSS盒子模型。

认识日常生活中盒子：常常我们遇到盒子是用于可装东西长方形、正方形的盒子。

如装皮鞋盒子、装电视机盒子，这个是比较具体的盒子。

CSS盒子：根据字面我们可以理解，CSS盒子也是装东西的，比如我们要将文字内容、图片布局网页中，那就需要像盒子一样装着。

这个时候我们对其对象设置高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）,即可实现像盒子一样的长方形、正方形平面盒子。

通常我们这样：一组<div></div>、<span></span>等类似这种语法标签组叫1个盒子。

因为我们对其设置了高度(height)、宽度(width)、边框(border)、边距(margin)、填充（padding）等属性后即可呈现出盒子一样的长方形或正方形。

所以我们CSS盒子模型因此而得来。

日常使用CSS盒子：我们说将什么内容放入一个盒子里，我们就要想到是放入<div></div>里，脑海里就要这个概念。

假如我们说设置一个宽度为100px盒子，我们就要知道如下一个概念：Css样式代码：.yangshi{width:100px;}对应html代码：<div class="yangshi">内容</div>这个时候我们可以将<div class="yangshi">内容</div>看作为一个盒子。

DIV+CSS是什么？DIV+CSS我们可以分为DIV和CSS两个概念。

CSS：我们也讲过是什么，大家可参考网址（CSS是什么）：DIV：这个是网页HTML的标签，通常我们在HTML代码中使用DIV标签配合应用CSS类布局网页。

1、DIV是html其中一个常用标签，如span、table、h1等之类标签2、在HTML中DIV标签我们用的最多，具有代表性3、div配合css类，布局出网页< div>内容</div>< div class="divcss5">内容</div>< div id="divcss5">内容</div>DIV CSS是什么截图您可能需要了解CSS是什么？什么是html？Html代码是什么？css是什么?什么是CSS？CSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表，所以称之为层叠样式表（Cascading Stylesheet）简称CSS。

DIV+CSS基础培训教程

第一章：CSS核心基础第一章：CSS核心基础
二、(X)HTML与CSS的核心基础
2.3）基本CSS 2.3）基本CSS的选择器 CSS的选择器 2.3.1 标记选择器
如: p div table tr td input ul ol dl等等 dl等等
第一章：CSS核心基础第一章：CSS核心基础
一、WEB标准的概述
1.3）理论精髓 1.3）理论精髓使用XHTML对网站进行标准化重构，使用CSS将表现与内使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离。
第一章：CSS核心基础第一章：CSS核心基础
一、WEB标准的概述
1.4）优势 1.4）优势
使你的页面载入得更快降低你的流量费用让你在修改设计时更有效率而代价更低帮助你的整个站点保持视觉的一致性让你的站点可以更好地被搜索引擎找到使你的站点对浏览者和浏览器更具亲和力
• • •
一化、快速化。
第一章：CSS核心基础
内容大纲
• • • • • • • • • • • 一、WEB标准的概述 1.1）基本概念 1.2）基本构成 1.3）理论精髓 1.4）优势二、(X)HTML与CSS核心基础 2.1）(X)HTML与HTML 2.2）(X)HTML与CSS的关系 2.3）基本的CSS选择器 2.4）复合的CSS选择器 2.5）CSS伪类样式 2.6） CSS继承特性 2.7） CSS层叠特性三、课后作业
第一章：CSS核心基础第一章：CSS核心基础
二、(X)HTML与CSS的核心基础
2.2）(X)HTML与CSS的关系 2.2）(X)HTML与CSS的关系 2.2.2 在XHTML引入CSS的方法 XHTML引入引入CSS的方法在XHTML中，引入css的方法主要有： XHTML中，引入css的方法主要有：导入式 <style type="text/css"> @import url("mystyle.css"); url("mystyle.css"); </style> 链接式 <link href="mystyle.css " rel="stylesheet" href="mystyle.css type="text/css" />

我学习DIV+CSS

cursor 设计鼠标的箭头 anto 正常 crosshair 十字 default 默认 pointer 点状鼠标 move 移动鼠标
e/ne/nw/n-resize 鼠标大小 text 文字鼠标 wait 等待鼠标 help 求助鼠标 progress 过程鼠标
三、通过CSS定义图片的样式
六、CSS滤镜的应用(一般情况下用不着，在PS中处理成图片就可以了)
filter:filtername(parameters)
alpha 设置透明(enabled 是否激活 opacity finishOpacity startX startY finishX finishY)
blur 设置模糊效果(makeshadow pixelradius shadowopacity )
a:link 未被访问前的样式属性 a:hover 鼠标悬停时的样式属性 a:active 被激活的属性 a:visited 已经被访问过的样式属性
margin 外边距
padding 内边距
border 和外边框有关的效果
background-color 设置背景的颜色
font-size字体大小
line-height行高
text-decoration文本修饰(underline 下划线 overline 顶划线 line-through 删除线 blink 文本闪烁)
letter-spacing字间距
text-align对齐方式(只可以作用于p blockquqte ul h1 h6标识符里面)
glow 为对象的外边界增加光效(enabled color strength)
wave 设置对象的波纹效果(enabled add freq lightStrength phase strength)

第8章DIV+CSS布局入门

机械工业出版社
8.1 认识div
8.1.2 使用div标签
1．插入div标签 2．div的嵌套
机械工业出版社
8.2 AP元素
8.2.1 AP元素与AP Div元素
1．AP元素 2．AP Div元素
机械工业出版社
8.2 AP元素
8.2.2 使用AP Div
1．插入AP Div 2．连续绘制多个AP Div 3．创建嵌套的AP Div
机械工业出版社
8.2 AP元素
8.2.3 AP Div的属性设置与相关操作
1．AP Div的属性面板
2．改变AP Div的堆叠顺序 3．调整AP Div的大小
机械工业出版社
8.3 CSS盒模型
8.3.1 什么是盒模型
盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
机械工业出版社
8.3 CSS盒模型
8.3.4 外边距的叠加
1．两个元素垂直相遇时叠加 2．两个元素包含时叠加
机械工业出版社
8.4 CSS的定位
8.4.1 静态定位（position:static;）
静态定位是position属性的默认值，即该元素出现在文档的常规位置，不会重新定位。
机械工业出版社
利用CSS样式布局页面结构时，浮动（float）是使用率较高的一种定位方式。当某个元素被赋予浮动属性后，该元素便脱离文档流向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
机械工业出版社
8.5 浮动与清除浮动
8.5.2 清除浮动（clear）
在CSS样式中，浮动与清除浮动是相互对立的，使用清除浮动不仅能够解决页面错位的现象，还能解决子级元素浮动导致父级元素背景无法自适应子级元素高度的问题。清除浮动主要利用的是clear属性中的both（左右两侧均不允许浮动元素）、left（左侧不允许浮动元素）和right（右侧不允许浮动元素）3个属性值清除由浮动产生的效果。

第五章彻底弄懂CSS盒子模式（DIV布局快速入门）

</d iv > <div class="mainBox"> <h3>熟悉步骤 </h3> <p>正文内容 </p >
</div>熟悉工作流程
在真正开始工作之前我们脑海中要形成这样一种思想：表格是什么我不知道，在内容部分我不能让它再出现表现控制标签，如：font、color、height、width、align 等标签不能再出现，（简单说工作前先洗脑，忘掉以前的一惯做法，去接受和使用全新的方法），我不是单纯的用 DIV 来实现排版的嵌套，DIV 是块级元素，而像 P 也是块级元素，例如要分出几个文字内容块，不是一定要用 DIV 才叫 DIV 排版，不是―<div>文字块一 </div><div>文字块二</div><div>文字块三</div>‖，而用―<p>文字块一</p><p>文字块二 </p><p>文字块三</p>‖更合适。
Width
width + padding-left + padding-right + border-left + border-right
Height
height + padding-top + padding-bottom + border-top + border-bottom
这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV 嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而 CSS 盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，看到的图形和结构就类似我们要做的网页版面设计了，如下图。

DIVCSS网页布局初级入门系列教程-4.

第七天横向导航菜单今天我们开始学习《十天学会web标准(div+css)》的html 列表，包含以下内容和知识点：▪▪▪横向列表菜单用图片美化的横向导航 css Sprites 一、横向列表菜单前边学习过纵向导航菜单，又学习了float属性，那么要实现横向导航菜单是不是很简单了，只需要把li横向排列就可实现了。

把第四节的代码拿过来直接用，修改后的代码如下： <!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 { font-family: Verdana; font-size: 12px; line-height: 1.5; } a { color: #000; text-decoration: none; }a:hover { color: #F00; }#menu { border: 1px solid #CCC; height:26px; background: #eee;} #menu ul { list-style: none; margin: 0px; padding: 0px; }#menu ul li { float:left; padding: 0px 8px; height: 26px; line-height: 26px; } </style> </head><body><div id="menu"><ul><li><a href="#">首页</a></li><li><a href="#">网页版式布局</a></li><li><a href="#">div+css教程</a></li><li><a href="#">div+css实例</a></li><li><a href="#">常用代码</a></li></ul></div></body></html>提示：可以先修改部分代码后再运行最主要就是用float让li向右浮动后，实现横向排列，具体步骤不再赘述。

DIV+CSS入门教程

DIV+CSS的叫法是不准确的入门教程】DIV+CSS【DIV+CSS入门教程】第一章：应知道1.1DIV+CSS的叫法是不准确的我想凡是来到“这个专题”的同学，很大部分是冲着DIV+CSS来的，目的就是学习DIV+CSS 的，说的再直接一些就是学习如何用DIV+CSS布局页面，如何从一张图片制作成标准的DIV+CSS页面。

如果你看完第一段还没有发现错误的话，那你就很有必要，接着往下看。

DIV+CSS这种叫法其实是一种很错误的叫法，这是国人一厢情愿的叫法，而标准的叫法是什么呢？呵呵，没错，是xHTML+CSS，不理解吧，我来细细给你说，如果下面的你能理解，保证面试的时候会有很大的帮助，同时也可以让你后面的学习更轻松。

？为什么国人将这种页面布局的方法叫做DIV+CSSDIV+CSS？因为过去布局页面基本上都是用Table布局，也可以说是Table+CSS，而现在布局页面呢，用DIV，所以叫DIV+CSS，听起来也挺合理，认为这样布局出来的页面也就是标准页面，甚至有些人走了个极端，看到其他网站用到Table，就会嘲笑页面做的不够标准，好似用不用Table成为了页面是否标准的一个标尺。

现在我可以告诉大家，凡是有着这种行为的，都学得不咋样，很皮毛！用了Table页面就不标准了?!纯粹无稽之谈，那什么才是标准页面呢？先看一个专业概念，WEB标准，然后我会问三个问题，你来回答：WEB标准不是某一个标准，而是一系列标准的集合。

网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。

对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。

这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。

DIV+CSS基础教程全攻略

CSS教程基础一、CSS 高度_css heightDIV CSS高度基础知识这里的CSS高度是指通过CSS来控制设置对象的高度。

使用CSS属性单词height。

单位可以使用PX，em等常用使用PX（像素）为单位。

实例：.yangshi{height:300px;}即设置了yangshi选择器对象高度为300px。

CSS高度单词：heightCSS 最大高度：max-height (IE7及以上版本浏览器支持)CSS 最小高度：min-height (IE7及以上版本浏览器支持)CSS上下居中：line-height以上可跟值为数字加单位。

Html初始高度与DIV+CSS高度对照以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

实例：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格接下来我们讲解CSS 高度使用方法及技巧1、CSS自适应高度一般我们需要让宽度一定时高度随内容增加而增高。

此时我们将无需设置高度即可实现此效果。

同时也无需使用height:auto来实现高度自适应。

通常默认情况下不设置高度，对象高度即是自适应高度。

2、固定高度及隐藏超出固定高度的内容很多时候我需要设置对象固定高度同时让多余的内容不显示出来。

解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容）如设置一个高度为50px；宽度为50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为1px黑色边框演示，CSS 代码：.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>CSS 固定高度效果截图：3、说明观看此上图，看出设置固定高度宽度并设置1px的黑色边框，并且实现内容未超出设置高度宽度。

Div+CSS基础代码网页布局+实例教程

Div+css一，什么是CSSCSS全称为Cascading Style Sheets，中文翻译为“层叠样式表”，简称CSS样式表又被我们称为CSS样式，CSS样式又被作为一种能制作出各种样式网页的技术统称。

二．DIV+CSS简单地说DIV+CSS(DIV CSS)被称为“WEB标准”中常用术语之一。

首先认识DIV 是用于搭建html网页结构（框架）标签，像<b>、<h1>、<span>等html标签一样，再认识CSS是用于创建网页表现（样式/美化）样式表统称，通过css来设置div标签样式，这一切常常我们称之为div+css。

表格以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

例子：<table><tr><td height="100">我的高度为100px</td></tr><tr><td height="50">我高度为50px</td></tr></table>分别设置了高度为100px和50px的两行表格DIV的布局方法CSS 代码.yangshi{ height:50px; width:50px; overflow:hidden; border:1px solid #666;}Html body内代码：<div class="yangshi">演示，内容测试内容高度超出演示实例，divcss5实例</div>完整CSS 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" /><title>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，实例</div></body></html>CSS 宽度传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;HTML宽度与DIV+CSS对比1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。

十天学会DIV CSS

第一天XHTML CSS基础知识欢迎大家学习《十天学会web标准》，也就是我们常说的DIV+CSS。

不过这里的D IV+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" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd">这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHT ML的语法。

DIVCSS基础教程

DIV+CSS基础教程之CSS背景属性背景颜色属性(background-color)这个属性为HTML元素设定背景颜色，相当于HTML中bgcolor属性。

body {background-color:#99FF00;}上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

背景图片属性(background-image)这个属性为HTML元素设定背景图片，相当于HTML中background属性。

<body style="background-image:url(../images/css_tutorials/">上面的代码为Body这个HTML元素设定了一个背景图片。

背景重复属性(background-repeat)这个属性和background-image属性连在一起使用，决定背景图片是否重复。

如果只设置background-image属性，没设置background-repeat属性，在缺省状态下，图片既横向重复，又竖向重复。

repeat-x 背景图片横向重复repeat-y 背景图片竖向重复no-repeat 背景图片不重复body {background-image:url(../images/css_tutorials/; background-repeat:repeat-y}上面的代码表示图片竖向重复。

背景附着属性(background-attachment)这个属性和background-image属性连在一起使用，决定图片是跟随内容滚动，还是固定不动。

这个属性有两个值，一个是scroll，一个是fixed。

缺省值是scroll。

body {background-image:url(../images/css_tutorials/; background-repeat:no-repeat; background-attachment:fixed}上面的代码表示图片固定不动，不随内容滚动而动。

第14章DIVCSS布局基础

，设定clear属性为both。例14-15
14.5 CSS布局方式：相对定位
除了使用浮动布局外，常用的布局方式还有定位。CSS 提供position属性用于定位。使用position定位可以定义元素相对其父元素或者其他元素的精确位置。Position属性共有四个关键字值，分别是static、absolute、relative和 fixed。其中static为默认值，表示块保持在原来的位置上。 absolute代表绝对定位，relative代表相对定位，这两种定位方式是最常用的。本小节先讲述相对定位。
如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。
如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。例14-5
4．单边距值：margin-top 、margin-right 、marginbottom 、margin-left
border-style也包括border-top-style 、border-right-style
、 border-bottom-style 、border-left-style 例14-9
2．边框宽度border-width ，在设定边框宽度之前，必须先指定边框的样式。
参数： medium : 默认宽度 thin : 小于默认宽度 thick : 大于默认宽度 length : 由浮点数字和单位标识符组成的长度值。不可为负值。例14-10
14.4.1 两个元素的浮动应用
在页面布局中，很多时候会使用两个元素的浮动应用。例如，页面为两分栏的子元素的浮动应用。例14-12 技巧：IE6解释元素的边

div+css从入门到精通

DIV CSS网页制作一般流程本节向大家描述一下DIV CSS网页制作的流程及方法，在制作网页开始时候需要认识和了解一些基本知识，比如了解DIV+CSS网页制作常用属性，了解ID与class 区别及用法，了解掌握常用CSS属性，CSS盒子机构；了解CSS在页面中运用等内容，相信本文介绍对你的学习一定会有所帮助。

学习DIV CSS网页制作的流程及方法如何学习网页设计、网页制作，相信新入门想学习DIV+CSS网页制作的很多朋友都有个问题，究竟怎样学习DIV+CSS网页制作呢？学习网页制作的流程是怎么样的呢？好了下面就来介绍下根据我的经验理出来的学习制作经验，希望给大家带来帮助和参考，让新手在制作学习中少走弯路。

制作网页开始时候需要认识和了解知识：1、了解html语言及结构，及能运用；2、了解DIV+CSS网页制作常用属性，了解ID与class区别及用法，了解掌握常用CSS属性，CSS盒子机构；3、了解CSS在页面中运用；4、了解程序插入程序循环（制作网页模板关键）；5、了解Adobe Photoshop CS，并且掌握Adobe Photoshop CS对PSD、PNG、GIF、JPG图片格式存储和图片切图，图片输出等；6、待到一定阶段就要考虑和认识DIV+CSS网页制作，在各浏览器中兼容问题及解决兼容方法；7、考虑和认识W3C认证。

如果对CSS属性不了解及清楚用法可进入CSS在线手册查询。

DIV+CSS网页制作开发流程：一、有网页效果图1、分析网页效果图、找出效果图结构规律；2、Photoshop图片处理去掉无效果的文字、文章；3、在Photoshop把图片切成较小的GIF、JPG或PNG格式图片，根据网页效果来选择图片格式类型；4、图片切完了紧接着就开始创建网页的文件夹、CSS文件、HTML文件（imges - 图片文件夹、CSS - CSS文件夹、html文件直接放到网站根目录下）；5、开始创建html文件与CSS文件，这里可以用每次新开发的网页模板（CSS与html模板）；6、根据网页图片效果图制作开发网页(在制作中要调试和检查兼容)；7、最后完工后重新检测和检查网页在各个浏览器兼容等。

DIV_CSS入门教程

用了Table页面就不标准了?!纯粹无稽之谈，那什么才是标准页面呢？先看一个
专业概念，WEB标准，然后我会问三个问题，你来回答：
WEB标准不是某一个标准，而是一系列标准的集合。网页主要由三部分组成：结构
（Structure）、表现（Presentation）和行为（Behavior）。对应的标准也分三方面：结
应该叫xHTML+CSS。
凡是看到这节的同学们，以后尽可能说xHTML+CSS，不要再说DIV+CSS喽，如果
非要说，也要加上一句说明哟，比如
面试官：你对DIV+CSS了解么？
应聘者：DIV+CSS准确的说应该叫xHTML+CSS，我对这种页面布局方法非常了解！……
有span、p、a、ul、li、dl、dt、dd….，即使我不用DIV，用其他标签(比如:ul、li)制作
出来的页面也是标准页面！所以说用DIV+CSS来制作标准页面这句话就很狭隘喽~如果满屏
全部都是DIV那也算不上标准页面，曾经由一个朋友告诉我，说他的页面全部用的DIV，每
个模块，每个功能区域，就连一条线都是纯DIV实现，并且相当自豪的告诉我，没有人比他
一样简单容易。
3、搜索引擎更友好，排名更容易靠前。
第一点、内容和形式分离
网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码
精简，更小打开更快。
这个是DIV+CSS技术最显著的特点，也是CSS存在的根源。完全的颠覆现在传统（table）
网上有一篇文章，转过来，文章着重介绍DIV三点优势,也许看完文章后，就像社区元
老heflyaway说的感觉作者比较迷恋Table，每篇文章都不可避免的带有个人色彩，而转出

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

CSS教程基础一、CSS 高度_css heightDIV CSS高度基础知识这里的CSS高度是指通过CSS来控制设置对象的高度。

使用CSS属性单词height。

单位可以使用PX，em等常用使用PX（像素）为单位。

实例：.yangshi{height:300px;}即设置了yangshi选择器对象高度为300px。

Html初始高度与DIV+CSS高度对照以前html直接设置高度width="300"这种方式嵌入表格标签内，而且无需带单位，默认以px（像素）为单位。

此时我们将无需设置高度即可实现此效果。

同时也无需使用height:auto来实现高度自适应。

通常默认情况下不设置高度，对象高度即是自适应高度。

2、固定高度及隐藏超出固定高度的内容很多时候我需要设置对象固定高度同时让多余的内容不显示出来。

禁止溢出设置CSS高度、CSS宽度的CSS属性单词及值overflow:hidden; 。

3、设置最小高度使用CSS 单词：min-height为什么要设置最小高度？有时特别是在文章页面里因为文章内容多少参差不齐，所以我们可以使用最小高度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度，因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。

这里有个问题就是IE6不支持最小高度设置（min-height），解决办法使用css hack方法来解决，大家知道区别不同浏览器时候用的css hack中IE6可以使用“_”来区别其它浏览器。

最小高度运用：.yangshi{min-height:50px; _height:50px;}这样就可以解决此问题，说明这里就不能再使用overflow:hidden;-CSS overflow设置隐藏超出内容溢出。

完整CSS 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" /><title>CSS 高度实例</title><style>.yangshi{ min-height:50px; _height:50px;width:150px;border:1px solid #666;}</style></head><body><div class="yangshi">演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，divcss5实例</div></body></html>效果图：以上是超出内容自动适应高这里是内容够少，未能充满设置最小高度。

无论在IE6还是IE7及以上版本浏览器或者火狐谷歌浏览器都支持最小高度的设置。

关于CSS height高度总结说明：这里讲解CSS height与html height区别及用法，同时讲解了最小高度、自适应高度、固定高度的设置及运用。

二、CSS 宽度——CSS width一、宽度基础知识CSS宽度是指通过CSS 样式设置对应div宽度，以下我们了解传统html宽度、宽度自适应、固定宽度等宽度知识。

传统Html 宽度属性单词：width 如width="300";CSS 宽度属性单词：width 如width:300px;最大宽度单词：max-width如max-width:300px; css手册中了解max-width：/shouce/c_maxwidth.shtml。

最小宽度单词：min-width如：min-width:300px css手册中了解min-width：/shouce/c_minwidth.shtml同时你可以进入CSS在线手册中width手册了解详细基础知识：/shouce/c_width.shtml二、Html初始宽度与DIV+CSS宽度对照1、传统html中宽度width="300"，即设置对应元素宽度为300px（像素）。

而宽度值后无需跟单位，默认情况下以像素（px）为单位。

如：<td width="300">我的宽度为300px</td>即：设置了对应表格td的宽度为300px.2、div css中宽度设置width:300px;，即设置对应CSS样式为300px，这里需要跟单位。

如：#header{ width:300px;}即：定义header CSS选择器样式为300px宽度。

而在标签运用：<div id="header">我的宽度为300px宽度</div>三、css宽度演示与讲解1、CSS 宽度自适应常常我们看见一个网页宽度随浏览器宽度改变而自动改变，如一样，宽度是自适应宽度。

这里运用了百分比即可实现自适应宽度。

如果网页总宽度为80%即width:80%;，将使此宽度知道自适应宽度为浏览器80%。

当然前提是设置最外层没有宽度限制条件下。

DIV CSS 自适应宽度例子：CSS样式代码：<style type="text/css">body{ margin:0 auto; text-align:center;}.yangshi{ width:80%; border:1px solid #003; margin:0 auto;}</style>Html中body div代码：<div class="yangshi">我是80%自适应宽度</div>这样即设置内容居中，为了方便测试加上1px黑色边框。

大家可以测试观察其内容是随浏览器拉大而宽度变宽而自适应宽度80%，而左右两边始终有10%宽度留着，因为设置此box宽度为80%。

以上为CSS 宽度（width）演示图解。

2、CSS 宽度固定固定即设置宽度为固定值即可如很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度width:300px，即设置对应固定宽度为300像素。

3、最小固定宽度CSS样式属性单词：min-width兼容支持：min-width除IE6不支持为，IE7以上浏览器、火狐、谷歌都支持常常用于设置宽度最小值，如设置对应DIV的样式最小宽度值限制。

例：.yangshi{border:1px solid #003; min-width:300px;}即设置最小宽度为300px，当然一般很少设置最小宽度。

如果要使用最小宽度即，使用浮动（float）可使用最小宽度限制。

最大固定宽度CSS属性单词：max-width兼容支持：max-width除IE6不支持为，IE7以上浏览器、火狐、谷歌都支持最大固定宽度是对对应的样式div设置最大宽度限制，即内容不超过此设置最大宽度。

最大宽度限制例子：.yangshi{border:1px solid #003;max-width:300px;}即设置了最大宽度限制为300px，以下为设置最大宽度限制演示图：通过图例和基础知识DIVCSS5给大家讲解了关于css宽度知识，希望大家能掌握其宽度运用。

CSS 边框即CSS borderCSS边框基础知识CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。

Html原始边框与DIV+CSS边框对照Html表格控制边框：border="1" bordercolor="#000000"说明：控制表格边框宽度为1px，颜色为黑色，默认为实线样式边框。

DIV+CSS基础教程全攻略

合集下载

DIVCSS入门教程

DIVCSS入门基础知识教程

DIV+CSS基础培训教程

我学习DIV+CSS

第8章DIV+CSS布局入门

第五章彻底弄懂CSS盒子模式（DIV布局快速入门）

DIVCSS网页布局初级入门系列教程-4.

DIV+CSS入门教程

DIV+CSS基础教程全攻略

Div+CSS基础代码网页布局+实例教程

十天学会DIV CSS

DIVCSS基础教程

第14章DIVCSS布局基础

div+css从入门到精通

DIV_CSS入门教程

文档推荐

最新文档