轻松学习网页设计

css控制列表

功能   语法

列表属性  list-style：list-style-type list-style-position list-style-image

列表项目类型  list-style-type：none（无符号） disc（实体的小圆点） circle（空心的小圆点） square（实心的小方块） decimal（1,2,3...） lower-roman（i,ii,iii...）upper-roman（I,II,III...） lower-alpha（a,b,c...） upper-alpha（A,B,C...）

列表项目位置  list-style-position：inside（列表项目往右移） outside（列表项目正常显示）

列表项目图片  list-style-image：URL（list-style-image：url（lmk.gif））none 不会显示任何图像

经验：控制列表，给列表加背景图片的时候，不要使用它的list-style-image属性

css控制元素的尺寸

功能                          语法

设置元素的宽度  width：100px；

设置元素高度  height：100px；

设置元素最小宽与高  min-width：50px；min-height：50px；（IE6不支持）

设置元素最大宽与高  max-width：50px；max-height：50px；

设置元素的外边距  margin：上 左 下 右

设置元素的内边距  padding：上 右 下 左

Div+Css网页布局第三课

Div+CSS网页布局

目标

• 网页元素分类
• css盒子模型
• 常见的div+css布局方式

什么是div

一、div是什么

div是一个容器，能够放置内容，例如：<div>内容</div>

说明：XHTML页面中的每一个标签对象几乎都可以称得上是一个容器，例如：<h1>这是一段标题</h1>

div是XHTML中指定的专门用户布局设计的容器对象。CSS布局中，div是这种布局的核心对象，做一个简单的布局只需要两样东西div与CSS。

因此也有人称CSS布局为div+css布局。

css盒子模型

W3C组织建议把所有网页上的对象都放在一个盒（box）中——盒子模型

设计师可以通过创建定义来控制这个盒子的属性，这些对象包括段落、列表、标题、图片以及层<div>

盒子模型主要定义四个领域：内容（content）、填充（padding）、边框（border）和边界（margin）。

这里的边界我们也称之为：外边距、外补丁；填充也叫：内边距、内补丁。

整个盒子模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成。