DIV+CSS属性设置参数
Div+CSS网站布局应用教程第8章 使用CSS样式设置列表效果
8.2.2
ul无序列表
Hale Waihona Puke 无序列表是网页中常见的元素之一，用于将一组相关的列表项目排列在 一起，并且列表中的项目没有特别的想顺序。无序列表使用<li>标签来罗列 各个项目，并且每个项目前面都带有特殊符号，比如黑色实心圆等。在 CSS中，可以通过list-style-type属性对无序列表前面的符号进行控制。 list-style-type属性的语法格式如下。 list-style-type: 参数1, 参数2,…;
自测8——为网页元素赋予内 容
自测8：为网页元素赋予内容 最终文件：光盘\最终文件\第8章\8-4-1.html 视 频：光盘\视频\第8章\8-4-1.swf
8.4.2
透明度opacity属性
opacity属性用来设置一个元素的透明度，opacity取值为1时是完全不透 明的，反之，取值为0时是完全透明的。1~0之间的任何值都表示该元素的透 明度。 opacity属性的语法格式如下。 opacity: <length> | inherit;
自测2——设置列表符号
自测2：设置列表符号 最终文件：光盘\最终文件\第8章\8-2-2.html 视 频：光盘\视频\第8章\8-2-2.swf
8.2.3
list-style-image属性
在网页设计中，除了可以使用CSS样式中的列表符号，还可以使用liststyle-image属性自定义列表符号。 list-style-image属性的基本语法如下。 list-style-image: 图片地址;
自测5——制作复杂新闻列表
自测5：制作复杂新闻列表 最终文件：光盘\最终文件\第8章\8-2-5.html 视 频：光盘\视频\第8章\8-2-5.swf
W3cSchool_DIV+CSS2_参考手册
CSS 参考手册CSS背景属性属性描述值background 简写属性，作用是将背景属性设置在一个声明中。
background-color background-image background-repeat background-attachment background-positionbackground-attachment 设置是否背景图像是固定的或随页面其余部分滚动。
scroll fixedbackground-color 设置元素的背景颜色。
color-rgb color-hex color-name transparentbackground-image 将图像设置为背景。
url nonebackground-position 设置背景图像的起始位置。
top lefttop center top right center left center center center right bottom left bottom center bottom right x-% y-%x-pos y-posbackground-repeat 设置背景图像是否及如何重复。
repeat repeat-x repeat-y no-repeatCSS 边框属性(border)属性描述值border 简写属性。
作用是在一个声明中用来设置四个边框的所有属性。
border-width border-style border-colorborder-bottom 简写属性。
作用是在一个声明中用来设置底边框的所有属性。
border-bottom-width border-styleborder-colorborder-bottom-color 设置底边框的颜色。
border-color border-bottom-style 设置底边框的样式。
border-styleborder-bottom-width 设置底边框的宽度。
常用CSSDIV排版技术用法剖析
本文向大家描述一下CSS+DIV排版技术的使用，主要包括纵向排列元素，横向排列元素，用列表排列元素和用绝对坐标定位元素等内容，用DIV把元素定义为块对象，用CSS 设置对象的格式和位置。
几种常用CSS+DIV排版技术用DIV把元素定义为块对象，用CSS设置对象的格式和位置。
CSS+DIV排版方式是目前应用很广的排版方式，它的使用非常灵活，可制作非常复杂的版面。
以下是几种常用的CSS+DIV排版技术。
纵向排列元素此类CSS+DIV排版技术用<div>标签定义块对象，由于<div>标签本身有换行作用，各元素自然排成一列。
用CSS的margin属性设置对象间的距离，用padding属性调整对象的宽度和高度。
举例：<styletypestyletype="text/css">#menu{width:100px。
font-size:15px。
}.dd{border:1pxdotted#0000FF。
padding-top:5px。
padding-bottom:5px。
padding-left:5px。
margin-bottom:3px。
}</style><dividdivid="menu"><divclassdivclass="dd">HTML</div><divclassdivclass="dd">CSS</div><divclassdivclass="dd">JavaScript</div></div>显示效果为：横向排列元素用<div>标签定义块对象，用CSS的float属性设置对象的浮动，此为CSS+DIV排版中的横向排列。
举例：<styletypestyletype="text/css">#box{height:110px。
divcss滚动条样式DIV滚动条属性及样式设置方式
divcss滚动条样式DIV滚动条属性及样式设置⽅式DIV滚动条就是利⽤DIV标签，在⾥⾯嵌⼊CSS样式表，当div所定义的区域的内容达到⼀定程度时，在div标签⾥⾯嵌⼊CSS 样式表，定义overflow的属性值，设置DIV滚动条相关的属性。
这⾥向⼤家描述⼀下DIV滚动条属性及样式设置，所谓DIV滚动条，就是利⽤DIV标签，在⾥⾯嵌⼊CSS样式表，加⼊overflow 的属性值，这样，当div所规范的区域内的内容达到⼀定程序时，滚动条就派上⽤场。
DIV滚动条属性及样式设置所谓DIV滚动条，就是利⽤DIV标签，在⾥⾯嵌⼊CSS样式表，加⼊overflow的属性值，这样，当div所规范的区域内的内容达到⼀定程序时，滚动条就派上⽤场。
其功能⼤约是为了节约页⾯空间，就是所谓的“缩地”了。
看看效果如何吧，代码在下⼀楼提供。
当div所定义的区域的内容达到⼀定程度时，在div标签⾥⾯嵌⼊css样式表，定义overflow的属性值，设置DIV滚动条相关的属性。
⽰例代码：复制代码代码如下:<style type="text/css">.testDiv{border-style:solid;border-width:50px;border-color:pink;position:absolute;top:200px;left:300px;height:200px;width:300px;overFlow-x:scroll;overFlow-y:hidden;scrollBar-face-color:green;scrollBar-hightLight-color:red;scrollBar-3dLight-color:orange;scrollBar-darkshadow-color:blue;scrollBar-shadow-color:yellow;scrollBar-arrow-color:purple;scrollBar-track-color:black;scrollBar-base-color:pink;}</style>注：1.overFlow:visible却省值，没有DIV滚动条，根据内容⾃动扩撑区域的⼤⼩，即定义的区域⽆效scroll总是显⽰滚动条hidden没有滚动条，超出区域的内容不可见auto根据内容⾃动判断是否添加滚动条2.DIV滚动条颜⾊属性：face-color：滑块颜⾊hightlight-color：⾼亮颜⾊3dlight-color：三维光线颜⾊darkshadow-color：暗影颜⾊shadow-color：阴影颜⾊arrow-color：箭头颜⾊track-color：滑道颜⾊base-color：DIV滚动条的主要颜⾊，其中包含滚动按钮和滚动滑块3.overFlow-xoverFlow-yvisible却省值，没有DIV滚动条，根据内容⾃动扩撑区域的⼤⼩，即定义的区域⽆效scroll总是显⽰滚动条hidden没有DIV滚动条，超出区域的内容不可见auto根据内容⾃动判断是否添加滚动条。
css中div透明度有几种方法设置？
css中div透明度有⼏种⽅法设置？css设置div背景透明有两种⽅法：第⼀种使⽤opacity：0~1，这个⽅法有个缺点，就是内容也会跟着透明；第⼆种⽅法就是rgba(0,0,0,0~1)，使⽤这个⽅法就只会设置div背景透明，⽽不会影响到div⾥的内容。
⼀、css rgba()设置颜⾊透明度语法：rgba（R,G,B,A）;RGBA 是代表Red（红⾊） Green（绿⾊） Blue（蓝⾊）和 Alpha（不透明度）三个单词的缩写。
RGBA 颜⾊值是 RGB 颜⾊值的扩展，带有⼀个 alpha 通道 - 它规定了对象的不透明度。
rgba（)⾥的值的介绍：R：红⾊值。
正整数（0~255）G：绿⾊值。
正整数（0~255）B：蓝⾊值。
正整数（0~255）A：透明度。
取值0~1之间rgba()只是单纯的可以设置颜⾊透明度，这样在页⾯的布局中有很多应⽤。
⽐如说：让背景出现透明效果，但上⾯的⽂字不透明。
代码实例：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>rgba()</title><style>.demo{width: 350px;height: 300px;margin: 50px auto;}.demo *{width: 120px;height: 120px;margin: 10px;float: left;}.demo1{background:rgba(255,0,0,1);}.demo2{background:rgba(255,0,0,0.5);}</style></head><body><div><div>背景⾊不透明，⽂字不透明！</div><div>背景⾊半透明，⽂字不透明！</div></div></body></html>⼆、css opacity属性设置背景透明度语法：opacity: value ;value ：指定不透明度，从0.0（完全透明）到1.0（完全不透明）。
Css div 常用CSS标签及属性
Css+div总结的一些常用CSS标签及属性CSS中的长度绝对单位：几乎不用在网页中in 英寸 1in = 2.54cmcm 厘米 1cm = 0.394inpt 磅 1in = 72ptpc pica 1in = 6pc相对单位：较常用em 1em = 相应字体的font-size值ex 1ex = 相应字体中的小写x字母的高度值，较难求得，一般取0.5em px 最为常用的CSS中的元素分类display 设定元素所属类别，不可继承none(设定为不显示在屏幕上)block(块级元，包括 P,H1-H6,list,div,body)inline(内联元，包括 a,em,span)list-item(列表元，如 LI)颜色与背景类color 设置文字颜色#rgb #rrggbb rgb(255,255,255) rgb(100%,100%,100%)H1{color:red}H1{color:#f00}H1{color:#ff0000}H1{color:rgb(255,0,0)}H1{color:rgb(100%,0%,0%)}background-color 设置背景颜色，格式同上；不可继承，可用于所有元BODY{background-color:red}BODY{background-color:#f00}BODY{background-color:#ff0000}BODY{background-color:rgb(255,0,0)}BODY{background-color:rgb(100%,0%,0%)}background-image 设置背景图片，默认为none，不可继承，可用于所有元url(imageURL) nonebody{backround-image:url(back.jpg);}background-repeat 设置背景图片是否重复排列，不可继承，用于所有元repeat(XY轴均重复) repeat-x(X轴重复排列) repeat-y(Y轴重复排列) No-repeat(不重复排列，默认值)BODY{background-repeat:repeat-x;}BODY{background-repeat:No-repeat;}background-attachment 设定背景图片是否卷动，不可继承，用于所有元scroll(随网页卷动，默认值) fixed(不随网页卷动)BODY{background-attachment:fixed;}background-position 设定背景图片或背景颜色开始显示的位置，不可继承，用于块级元和可替换元top,buttom,left,right,center(用关键字)70px 10px(用长度值)50% 30%(用百分比)BODY{background-position:right top;}BODY{background-position:50px 10px;}BODY{background-position:20% 50%;}background 定义背景综合属性，不要求顺序，各属性值以空格分开BODY{background:#ffcc00 url(bg.jpg) fixed center}字型类font-family 设置字型属性，取值可以是任何字型名称，缺省为浏览器内定字型，可以设多个以逗号(,)分开，有空格的英文字型可用单引号或双引号括起来。
设置div内容居中
设置div内容居中一、使用CSS的text-align属性。
text-align属性是CSS中用来控制文本水平对齐方式的属性，但它也可以用来实现div内容的水平居中。
我们只需要将div的display属性设置为block，然后将其父元素的text-align属性设置为center，就可以实现div内容的水平居中。
```css。
.parent {。
text-align: center;}。
.child {。
display: block;/ 其他样式 /。
}。
```。
通过上述代码，我们可以实现将子元素div的内容水平居中显示。
这种方法简单易行，适用于一些简单的布局需求。
二、使用CSS的flex布局。
flex布局是CSS3中新增的一种布局方式，它可以非常方便地实现元素的居中显示。
我们可以通过设置父元素的display属性为flex，然后使用justify-content和align-items属性来实现内容的水平和垂直居中。
```css。
.parent {。
display: flex;justify-content: center;align-items: center;}。
.child {。
/ 其他样式 /。
}。
```。
通过上述代码，我们可以实现将子元素div的内容水平和垂直居中显示。
flex布局具有强大的布局能力，适用于各种复杂的布局需求。
三、使用CSS的position属性。
position属性可以帮助我们实现元素的绝对定位，从而实现内容的居中显示。
我们可以通过将div的position属性设置为absolute，然后使用top、bottom、left和right属性来实现内容的水平和垂直居中。
```css。
.parent {。
position: relative;}。
.child {。
position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);/ 其他样式 /。
div介绍盒子模型边框属性CSS初始化文字排版边框调整溢出
div介绍盒⼦模型边框属性CSS初始化⽂字排版边框调整溢出今天学习的div，了解了div是⼲什么⽤的掌握了什么是盒⼦模型，以及div的外边距内边距以及边框，运⽤div和CSS给⽂字排版，利⽤边框的来做图像，div溢出的处理CSS初始化： 精确排版的时候⽤这个清理⼀下*{margin:0px;padding:0px;}*/1 <!doctype html>2 <html>3 <head>4 <meta charset="utf-8">5 <title>div介绍</title>6 <!--7 <div></div>不是功能标签8是可以放⽂字、图⽚以及各种元素块标签，相当于是个⽅便袋，常⽤于来布局9 div不设置宽⾼不显⽰-->1011 <style>121314 #d1{15 background-color: red;16 width: 50px;17 height: 50px;18float: left;19 }202122 #d2{23 background-color: blue;24 height: 100px;25 width: 100px;26/* 浮动*/27float: right;28 }29 #d3{30 background-color:#666666;3132 height: 100px;33/*清除浮动，不让浮动的盖住*/34 clear: both;35 }36 </style>37 </head>3839 <body>4041 <div id="d1">我是左div</div>42 <div id="d2">我是右div</div>43 <div id="d3">我是三div</div>44 </body>45 </html><!doctype html><html><head><meta charset="utf-8"><title>溢出处理</title><style>#d{background-color: yellow;width: 100px;height: 100px;/*如果内容超出div则隐藏*//* overflow: hidden;*//*不管内容是否超出，都会给div加⼀个滚动条*//* overflow: scroll;*//*如果内容不超出div则没有滚动条，如果超出；⾃动添加滚动条 */overflow: auto;}</style></head><body><div id="d">刘奶奶找⽜奶奶买⽜奶，⽜奶奶给刘奶奶拿⽜奶</div></body></html><!doctype html><html><head><meta charset="utf-8"><title>快速添加边框的粗细、类型、颜⾊</title> <style>#d{/*快速添加边框的粗细、类型、颜⾊*/border-left: 100px solid white;border-right: 100px solid white;border-bottom: 100px solid #FC01FB;width: 00px;height: 00px;background-color: yellow;}#d1{border-left: 100px solid white;border-right: 100px solid white;border-bottom: 100px solid #06B5D1;width: 00px;height: 00px;background-color: yellow;}#d2{width: 85px;height: 100px;background-color: white;float: left;}#d3{width: 30px;height: 100px;background-color: yellow;float: left;}#d4{width: 85px;height: 100px;background-color: white;float: left;}</style></head><body><div id="d"></div><div id="d1"></div><div id="d2"></div><div id="d3"></div><div id="d4"></div></body></html><!doctype html><html><head><meta charset="utf-8"><title>⽹页⽂字⽤DIV排版</title><style>li{list-style-type: none;float: left;/* 间距*/margin: 20px;}</style></head><body><ul><li> ⾸页</li><li>新闻⽹</li><li>⾸页概况</li></ul></body></html><!doctype html><html><head><meta charset="utf-8"><title>盒⼦模型边框属性 CSS初始化</title><style>/*盒⼦模型：外边距；margin margin:auto auto的意思是⾃适应边框；barder内边框；paddingmargin重叠现象：只要有⼀个元素没有float属性就会出现重叠现象，margin取相邻元素的margin最⼤值CSS初始化：*{margin:0px;padding:0px;}*/*{margin:0px;padding:0px;}#big{width: 500px;height: 500px;background-color: yellow;}#small1{width: 100px;height: 100px;background-color: red;float: left;margin: 10px 10px 10px; /*上右下左*/border: 20px solid black;padding: 10px; /*上右下左和margin⼀样*/}#small2{width: 100px;height: 100px;background-color: blue;float: left;margin: 10px;}#small3{width: 100px;height: 100px;background-color: aqua;clear: both;margin: 10px;}#small4{width: 100px;height: 100px;background-color: orange;clear: both;margin: 10px;}</style></head><body><div id="big"><div id="small1">戒指</div><div id="small2"></div><div id="small3"></div><div id="small4"></div></div></body></html>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
DIV+CSS属性设置参数
Line-height 行距Backgound-image 插入图片width 宽度
Height 高度Value 初始值Maxlength 最大字符数
  空格<br> 强制换行<p>分段标记<font>字体设置
Disc 实心圆点（默认属性）Circle 圆圈Square 小方快Type 条目标记修改start 有序条目初始值<pre>预排版BORDER 加边框marquee 滚动strong 加粗字体Direction 滚动方向
定位
Position 定位relative 相对定位absolute 绝对定位
Left 左边距top 上边距right 右边距
Bottom 下边距margin 外边距padding 内边距
Float 漂移
字体
Sive 字体大小family 字体样式text-decoration 文本下划线None 取消
段落样式：
Text-align:段落水平对齐设置值：
center 居中right 向右对齐left 向左对齐justify 继承上一步的属性
vertical-align:段落垂直对齐设置值：
sub 上标super 下标top 向上对齐middle 垂直居中bottom 向下对齐
10px、-10px相对于元素行高属性的百分比
Letter-spacing:字母的间距
Word-spacing:单词的间距
Line-height：文本行高
Text-indent:缩进方式
White-space:排版方式设置值：
Normal 正常pre 预排版nowrap 不换行
边框样式：
Border 边框style 风格dotted 点线Solid 实线dashed 虚线
背景样式：
Background-color 背景颜色
Backround-imige 背景图片
Background-repeat 背景重复方式设置值
Background-position 背景位置设置值
Background-attachment 固定或滚动背景设置值
Fixed 锁定scroll 滚动
表格样式
Table{table-layout：fixed；}
表格内容的显示宽度和关联方式fixed 不关联
Table{caption-side:bottom;}
控制表格标题的显示位置
Table{border-collapse:collapse;}
表格边框的显示方式
Table{border-spacing:}
表格内边框和外边框的距离
Tavle{empty-cells:}
控制对空单元格的显示方式
Tr:hover{color:red;}
鼠标经过时的颜色显示
Caption 标题hide 忽略；隐藏
伪元素样式：
A:link 超链接的正常状态（没有任何动作前）
A:visited 访问过的超链接状态
A:hover 光标移动到超链接上的状态
A:active 选中超链接时的状态
P:first-line 段落中的第一行文本
P:tirst-letter 段落中的第一个字母
鼠标样式：
Cursor 鼠标样式url 引用move 移动
Text 文本pointer 手型help 帮助
Wait 等待
滚动条样式：
Scrollbar-face-color 滚动条凸出部分的颜色
Scrollbar-highlight-color 滚动条空白部分的颜色
Scrollbar-shadow-color 立体滚动条阴影的颜色
Scrollbar-3dlight-color 滚动条亮边的颜色
Scrollbar-arrow-color 上下按钮上三角箭头的颜色
Scrollbar-track-color 滚动条的背景颜色
Scrollbar-darksadow-color 滚动条强阴影的颜色
Scrollbar-base-color 滚动条的基本颜色
Overflow：hidden 隐藏scroll 显示
Auto 自动
列表样式：
List-styletype:dise(实心圆)、circle（空心圆）、square（方块）、decimal（阿拉伯数字）、Lower-roman(小写罗马数字)、upper-roman（大写罗马数字）、lower-alpha（
小写英文字母）、upper-alpha（大写英文字母）、none（无项目符号）
List-style-image：列表图片符号
List-style-position设置值:inside（内部）、outside（外部）
DISPLAY属性：
Display设置值：
block 块级元素inline 行级元素inline-block 行级的块级元素list-item 显示列表元素
clip在使用position：absolute(绝对定位)后才会由效果！
Overflow溢出效果：
Visible 溢出显示hidden 溢出隐藏scroll 溢出产生滚动条auto 溢出自动产生滚动条。