DIV标签的所有属性

合集下载

div标签的理解

div标签的理解在HTML⾥⾯，div标签是⼀个块状元素，不会和其他元素排列在同⼀⾏，会默认和下⾯的元素换⾏，但是如果我们需要把⼏个div标签排在同⼀⾏，需要怎么做？第⼀种：修改块状元素源码：<div id="div1">这是第⼀个</div><div id="div2">这是第⼆个</div><div id="div3">这是第三个</div>这是div块，默认是换⾏排列，如果不添加css样式，运⾏效果是这样的三个div块竖着排列，因为div是块状元素，不会和其他元素排在同⼀列。

如果需要排在同⼀列，那就需要在写css样式的时候添加⼀⾏代码<style type="text/css">#div1 {display: inline-block;width: 200px;height: 200px;background-color: darkcyan;}#div2 {display: inline-block;width: 200px;height: 200px;background-color:darkkhaki;}#div3 {display: inline-block;width: 200px;height: 200px;background-color:darkkhaki;}</style>需要添加⼀个display: inline-block;运⾏效果是这样的：第⼆种：向右浮动需要把css语句离修改⼀句把display: inline-block;修改为float: left;需要在三个div的css⾥⾯都要添加运⾏效果是：第三种：flex布局⽤⼀个div包裹需要并⾏排列的三个div然后在写css的时候再添加⼀⾏约束源码：html代码：<div class="div"><div id="div1">这是第⼀个</div><div id="div2">这是第⼆个</div><div id="div3">这是第三个</div></div>css代码：<style type="text/css">.div {display:flex;}#div1 {display: inline-block;margin-left: 30px;width: 200px;height: 200px;background-color: darkcyan;}#div2 {display: inline-block;margin-left: 30px;width: 200px;height: 200px;background-color:darkkhaki;}#div3 {display: inline-block;margin-left: 30px;width: 200px;height: 200px;background-color:darkkhaki;}</style>运⾏出来的效果是这样的：拓展知识点：display的⼏个属性值，inline、block、inline-blockinline是⾏内元素，可以与其他元素在同⼀⾏，不能⾃定义修改宽度⾼度等，⼤⼩根据内容⼤⼩决定。

div标签及相关属性

CSS中的长度绝对单位：几乎不用在网页中in 英寸1in = 2.54cmcm 厘米1cm = 0.394inpt 磅1in = 72ptpc pica1in = 6pc相对单位：较常用em 1em = 相应字体的font-size值ex1ex = 相应字体中的小写x字母的高度值，较难求得，一般取0.5empx最为常用的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标签详细介绍DIV标签详细介绍div 是 division 的简写，division 意为分割、区域、分组。

⽐⽅说，当你将⼀系列的链接组合在⼀起，就形成了⽂档的⼀个 division。

<div> 可定义⽂档中的分区或节（division/section）。

<div> 标签可以把⽂档分割为独⽴的、不同的部分。

它可以⽤作严格的组织⼯具，并且不使⽤任何格式与其关联。

如果⽤ id 或 class 来标记 <div>，那么该标签的作⽤会变得更加有效。

id与class的区别class⽤于元素组（类似的元素，或者可以理解为某⼀类元素），⽽id⽤于标识单独的唯⼀的元素。

class可以在页⾯⾥⾯重复使⽤，id由于在页⾯⾥⾯只能出现⼀次，所以不能重复使⽤，所以尽量⽤class来写，这样能在页⾯⾥⾯重复引⽤你写的css，减⼩⼯作量和代码量。

这种情况尽量⽤id：页⾯⼤的模块⾥⾯，⽤id来区分不同的模块，⽐如页⾯⾥⾯有这样的模块：最新新闻，推荐新闻等，就可以考虑⽤id来区分。

还有⼀点，由于id是页⾯中唯⼀的，更多的是定义来留给给页⾯⾥⾯的javascript⽤。

补充：class和id在页⾯⾥⾯的使⽤⽅法：－－－－－－－－－－－－－－－－－－－class：footerid：footer定义class的css是⽤点：“.”，如.footer定义id的css是⽤井号“#”，如#footer如下⾯：* {margin: 0px;padding: 0px;}body{width:910px;height:auto;margin-left:auto;/*左右⾃动可以居中*/margin-right:auto;}.header{background-color: #F6F;float: left;height: 80px;width: 910px;}.content{background-color: #FCF;float: left;height: auto;width: 910px;margin-top: 20px;padding-bottom:20px;}.left{background-color: #930;float: left;height: 500px;width: 290px;margin-top: 20px;margin-left: 10px;display:inline;/*先把这个去掉看下，边距的问题，在IE6下双边据。

divcss属性

NO.1:Cleanclean：left,right,none,bothclean 清除左右的流媒体，浮动元素NO.2:visibility★visibility:hidden影藏内容，但保留空间位置★display:none 影藏内容和空间位置<!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>无标题文档</title><style>div{height:200px; width:200px; border:solid 1px #ccc; color:FFF;font-size:12px;}.d1{background-color:#00FF00;}.d2{background-color:#993300;}.d3{background-color:#000066;}</style></head><body><div>后盾网</div><div>视频教程</div><div>houdunwang</div></body></html>NO.3表单给input添加背景色，背景图一条线的文本框按钮样式控制彩色下拉框类似Excel表格的表单★设置背景颜色为红色,输入的文字为绿色{background-color:red;color:green;}★{border:none;border-bottom:dashed 1px red; color:green;}指定边框为无，底部1像素虚线边框，输入文字为绿色★指定input的背景图片{background-image: url(8.jpg)}★不同背景下拉框：<html><head><title>无标题文档</title><style type="text/css">.select{border:none; background:#09C;}.s1{background-color:#ff9;}.s2{background-color:#FFFF00;}.s3{background-color:#0099FF;}</style></head><body><select name=""><option value="后盾网" class="s1">后盾网</option><option value="" class="s2"></option><option value="免费教程" class="s3">免费教程</option></select></body></html>★表格式的input输入框<!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>无标题文档</title><style type="text/css">.ip{border:none;border-bottom:dashed 1px red; color:green;}</style></head><body><input type="text" /><br /><input type="text" class="ip"/></body></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>无标题文档</title><style type="text/css">.ip{height:30px; width:200px; background-color:#033; border:none; color:#ccc;}.ip_over{height:30px; width:200px; background-color:#990; border:none; color:#00FFFF; cursor:pointer;}</style></head><body><input type="submit" value="后盾网"/><br/><input type="submit" value="后盾网" class="ip" onmousemove="this.className='ip_over'" onmouseout="this.className='ip'"/></body></html>NO.4表格table{table layout:fixed;} 表格的关联table{caption-side:bottom;} 表格的标题显示方式table{border-collapse:collapse;} 表格边框的显示方式table{border-spacing:} 边距的距离table{empty-cells:} 控制空单元格的显示tr:hover{color:red;} 表格鼠标放上去后样式的显示★表格的宽度是跟随内容而变化，所以指定表格的宽度是没有意义的。

div 属性 DIV标签属性有什么如何设置属性

div 属性介绍，对DIV可加属性有哪些，DIV属性一览表DIVCSS5整理DIVCSS5给大家整理DIV标签内常用属性，同时通过div各属性小实例，让大家认识各属性并掌握属性。

div标签内常用属性列表一、div style属性- TOP这里就是直接div使用style设置CSS样式2、style设置css效果截图div内设置style属性CSS样式案例效果截图3、div属性之style总结对div标签内使用style作用是直接对div标签设置CSS样式，所以要想div直接标签内使用样式表，那直接对div使用style属性设置样式即可。

二、div align属性- TOP直接对标签内加align属性，作用是让对象内的内容居左、居中、居右效果。

1、对div设置align属性实例代码如下1.<!DOCTYPE html>2.<html>3.<head>4.<meta charset="utf-8"/>5.<title>div的属性演示</title>6.</head>7.<body>8.<div align="left">居左</div>9.<div align="center">居中</div>10.<div align="right">居右</div>11.</body>12.</html>2、教程案例截图三、div id属性- TOP在div标签内使用id，一方面如果是JS特效可能是动作脚本类识别功能，另外一方面在CSS中以#号命名的样式选择器样式。

当然其它标签均可以设置id属性。

1、id使用实例代码1.<!DOCTYPE html>2.<html>3.<head>4.<meta charset="utf-8"/>5.<title>div的属性演示</title>6.<style>7.#divcss5{color:#F00; font-size:16px; font-weight:bold}8.</style>9.</head>10.<body>11.<div id="divcss5">12.字体为红色，字体16px，加粗13.</div>14.</body>15.</html>2、div id实例截图在div中使用id截图四、div class属性- TOP1.<!DOCTYPE html>2.<html>3.<head>4.<meta charset="utf-8"/>5.<title>div的属性演示</title>6.<style>7..divcss5{color:#00F; font-size:18px}8.</style>9.</head>10.<body>11.<div class="divcss5">12.字体为蓝色，字体18px13.</div>14.</body>15.</html>2、class div实例效果截图div class属性实例截图五、对div设置title属性- TOP1.<!DOCTYPE html>2.<html>3.<head>4.<meta charset="utf-8"/>5.<title>div的属性演示</title>6.</head>7.<body>8.<div title="鼠标悬停时我显示">9.DIVCSS5内容10.</div>11.</body>12.</html>2、实例效果浏览器截图对div设置title，鼠标经过悬停在div对象上时效果截图当鼠标经过悬停与设置title属性的div盒子上时，鼠标旁边提示显示title设置的内容信息。

DIV常用属性大全自己整理

div布局过程中会经常用到一些属性，本文整理了一些常用的和布局相关的属性，有需要的朋友可以参考下，希望对大家熟悉div常用属性有所帮助一、属性列表代码如下:color : #999999 文字颜色font-family : 宋体文字字型font-size : 10pt 文字大小font-style:itelic 文字斜体育font-variant:small-caps 小字体letter-spacing : 1pt 文字间距line-height : 200% 设定行高font-weight:bold 文字粗体vertical-align:sub 下标字vertical-align:super 上标字text-decoration:line-through 加?h除线text-decoration:overline 加顶线text-decoration:underline 加底线text-decoration:none ?h除连接底线text-transform : capitalize 首字大写text-transform : uppercase 英文大写text-transform : lowercase 英文写text-align:right 文字*右对齐text-align:left 文字*左对齐text-align:center 文字置中对齐这些是一些简单的文字效果，可以应用到css的页面中。

背景background-color:black 背景颜色background-image : url(image/bg.gif) 背景图片background-attachment : fixed 固定背景background-repeat : repeat 重复排列-网页预设background-repeat : no-repeat 不重复排列background-repeat : repeat-x 在x轴重复排列background-repeat : repeat-y 在y轴重复排列background-position : 90% 90% 背景图片x与y轴的位置链接A 所有超连接A:link 超连接文字格式A:visited 浏览过的连接文字格式A:active 按下连接的格式A:hover 鼠标移至连接边框border-top : 1px solid black 上框border-bottom : 1px solid #6699cc 下框border-left : 1px solid #6699cc 左框border-right : 1px solid #6699cc 右框border: 1px solid #6699cc 四边框虚线<TEXTAREA STYLE="border:1px dashed pink">实线<TEXTAREA STYLE="border:1px solid pink">设置div的高度与文字的行高一样就可以了,即line-height 和height 的数值是一样的就可以了,最后给div一个over-flow: hidden ,让超出的部分隐藏.二、常用属性代码如下:1、Height:设置DIV的高度；Width:设置DIV的宽度。

div属性

div指令详细介绍

div指令详细介绍div 是HTML（超文本标记语言）中的一个常用元素，用于创建一个容器，可以用来组织和布局页面上的其他元素。

下面是div 元素的详细介绍：1. div 元素的基本概念：1.1 定义：div 是HTML 中的一个块级元素，它本身不具有特定的语义，主要用作布局和样式的容器。

1.2 语法：<div></div>1.3 作用：•容器：div 提供一个通用的容器，可用于包裹其他HTML 元素，方便样式和布局的应用。

•分组：用于将相关的内容进行分组，提高代码的结构性和可读性。

2. div 的属性：div 元素本身没有特有的属性，但可以使用通用的HTML 属性，如class、id、style 等，来进一步定义和控制其行为和样式。

2.1 class 属性：<div class="container"></div>通过class 属性，可以为div 添加一个或多个类名，方便对其应用样式或标识其作用。

2.2 id 属性：<div id="header"></div>id 属性用于为div 元素指定唯一的标识符，通常用于JavaScript 操作或作为页面内部链接的目标。

2.3 style 属性：<div style="color: blue; padding: 10px;"></div>style 属性用于直接为div 元素添加内联样式，包括颜色、字体、边距等。

3. div 的嵌套和层级结构：<div class="container"><div id="header"></div><div id="main-content"></div><div id="footer"></div></div>div 元素可以嵌套，形成层级结构，用于组织和管理页面的不同部分。

DIV的属性

DIV的属性⼀、常⽤属性1、Height:设置DIV的⾼度；Width:设置DIV的宽度。

2、margin:⽤于设置DIV的外延边距，也就是到⽗容器的距离。

margin:后⾯跟有四个距离分别为到⽗容器的上-右-下-左边的距离；margin: [top][right][bottom][left]可以分别设置：margin-left:到⽗容器左边框的距离；margin-right:到⽗容器右边框的距离；margin-top: 到⽗容器上边框的距离；margin-bottom:到⽗容器下边框的距离。

3、padding:⽤于设置DIV的内边距（内如⼦元素与DIV边界的距离）。

padding:后⾯跟有四个距离分别为到⽗容器的上-右-下-左边的距离；margin: [top][right][bottom][left]：需要注意的是padding设置的距离不包括在本⾝的width和height内(在IE7和FF中)，⽐如⼀个DIV的width设置了100px,⽽padding-left设置了50px,那么这个DIV在页⾯上显⽰的将是150px宽。

4、border:设置DIV的边框样式；display:设置显⽰属性。

其值有block、none；float:设置DIV在页⾯上的流向，其值有left(靠左显⽰)、right(靠右显⽰)、none；background:设置DIV的背景样式；background后可直接跟背景的颜⾊、背景图⽚、平铺⽅式等样式。

也可以⽤以下属性分别设置。

background-color:设置背景颜⾊；background-attachment:背景图像的附加⽅式，其值有scroll、fixed; background-image:指定使有的背景图⽚;background-repeat:背景图象的平铺⽅式。

其值有no-repeat(不平铺)、repeat(两个⽅向平铺)、repeat-x(⽔平⽅向平铺)、repeat-y(垂直⽅向平铺); background-position:在DIV中定位背景位置。

解析DIV布局之四大属性用法

解析DIV布局之四大属性用法本文向大家介绍一下DIV布局属性的概念，主要包括position属性，direction属性，float 和clear属性等内容，希望本文的介绍能让你有所收获。

在学习网页布局的过程中，你对DIV布局的属性是否了解，在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。

DIV布局属性：在以前的HTML里，元素的位置只能靠元素的依次排列觉得，而在CSS里你可以更精确的定位元素。

Netscape曾提出过Layer标记，它对于精确布局很有好处，但是并没有被W3C 承认，W3C在CSS提出了类似于Layer标记的功能。

◆DIV布局之position属性：position属性用来决定元素的位置类型，详见属性：属性名称:'position'属性值:absoluterelativestatic初始值:static适合对象:所有元素是否继承:no百分比备注:被禁止其属性值分别代表：absolute：屏幕上的绝对位置。

relative：屏幕上的相对位置。

static：固有位置。

◆DIV布局之direction属性：direction属性决定BOX的排列方向，详见属性：属性名称:'direction'属性值:ltrrtl初始值:ltr适合对象:所有元素是否继承:yes百分比备注:被禁止◆DIV布局之float和clear属性：在HTML中图片可以选择飘浮的位置，现在BOX对象通过CSS对于也可以选择飘浮的位置。

改变BOX的float属性，BOX将飘浮在其他元素的左或右方：属性名称:'float'属性值:leftrightnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止例如：1.<STYLEtype STYLEtype="text/css">2.IMG{float:left}3.BODY,P,IMG{margin:2em}4.</STYLE>5.<BODY>6.<P>7.<IMGsrc IMGsrc=/qz.q/img.gif>8.Somesampletextthathasnoother...9.</BODY>◆相反的，使用clear属性将禁止元素在BOX的左方或右方飘浮：属性名称:'clear'属性值:leftrightbothnone初始值:none适合对象:所有元素是否继承:no百分比备注:被禁止Div+CSS布局入门教程之页面布局和规划本文向大家介绍一下Div+CSS布局入门教程中页面布局和规划，在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等，你对这些属于应该有所了解。

Js Div属性大全

JS操作DIV全属性<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 T RANSITIONAL//EN " "/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"><HTML XMLNS="/1999/XHTML"><HEAD><TITLE>JS操作DIV全攻略</TITLE><MCE:STYLE></MCE:STYLE><STYLE MCE_BOGUS="1"> .TEST{WIDTH:200PX; HEIGHT:200 PX; BACKGROUND-COLOR:R ED;FONT-SIZE:12PX; FONT-WEIGHT:NORMAL;BORDER:S OLID 1PX RED;}</STYLE><MCE:SCRIPT TYPE="TEXT/JAVASCRIPT"></MCE:SCRIPT></HEAD><BODY STYLE="MARGIN:0PX" MCE_STYLE="MARGIN:0PX"><DIV ID="TESTDIV" STYLE="WIDTH:100PX; HEIGHT:100PX; BACKGROUND-COLOR: #D3D3D3; POSITION:ABSOLUTE;"></DIV><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR /><BR />< BR /><BR /><BR /><BR /><BR />上下左右可以操作DIV，已兼容IE FF<BR /><INPUT TYPE="BUTTON" VALUE="控制层内容" ONCLICK="SETTEXT()" /><INPUT TYPE="BUTTON" VALUE="控制层位置" ONCLICK="SETLOCATION()" /> <INPUT TYPE="BUTTON" VALUE="控制层背景色" ONCLICK="SETBRCOLOR()" /><INPUT TYPE="BUTTON" VALUE="控制层背景图" ONCLICK="SETBRIMG()" /> <INPUT TYPE="BUTTON" VALUE="控制层文字" ONCLICK="SETFONT()" /><INPUT TYPE="BUTTON" VALUE="控制层CSS" ONCLICK="SETCSS()" /></BODY></HTML>D IV的一些基本属性LEFT 相对于窗口左边的位置TOP 相对于窗口上边的位置WIDTH DIV TAG 的宽度。

DIVCSS参数大全

DIVCSS参数大全2015-09-06 by hello_word_EPM_5CSS属性大全字体属性：(font)大小 font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式 font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高 line-height: normal;(正常) 单位：PX、PD、EM粗细 font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体 font-variant: small-caps;(小型大写字母) normal;(正常)大小写 text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体： (font-family)'Courier New', Courier, monospace, 'Times New Roman',Times, serif, Arial, Helvetica, sans-serif, Verdana 背景属性： (background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法 background:#000 url(..) repeat fixed left top;区块属性： (Block)字间距letter-spacing: normal; 数值对刘text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle;bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group; table-header-group;table-footer-group; table-raw; table-column-group; table-column; table-cell;table-caption;(表格标题)方框属性： (Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性： (Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color;列表属性： (List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性： (Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全一 CSS文字属性：color : #999999; /*文字颜色*/font-family : 宋体,sans-serif; /*文字字体*/font-size : 9pt; /*文字大小*/font-style:itelic; /*文字斜体*/font-variant:small-caps; /*小字体*/letter-spacing : 1pt; /*字间距离*/line-height : 200%; /*设置行高*/font-weight:bold; /*文字粗体*/vertical-align:sub; /*下标字*/vertical-align:super; /*上标字*/text-decoration:line-through; /*加删除线*/text-decoration:overline; /*加顶线*/text-decoration:underline; /*加下划线*/text-decoration:none; /*删除链接下划线*/text-transform : capitalize; /*首字大写*/text-transform : uppercase; /*英文大写*/text-transform : lowercase; /*英文小写*/text-align:right; /*文字右对齐*/text-align:left; /*文字左对齐*/text-align:center; /*文字居中对齐*/text-align:justify; /*文字分散对齐*/vertical-align属性vertical-align:top; /*垂直向上对齐*/vertical-align:bottom; /*垂直向下对齐*/ vertical-align:middle; /*垂直居中对齐*/ vertical-align:text-top; /*文字垂直向上对齐*/ vertical-align:text-bottom; /*文字垂直向下对齐*/ 二、CSS边框空白padding-top:10px; /*上边框留空白*/padding-right:10px; /*右边框留空白*/padding-bottom:10px; /*下边框留空白*/padding-left:10px; /*左边框留空白三、CSS符号属性：list-style-type:none; /*不编号*/list-style-type:decimal; /*阿拉伯数字*/list-style-type:lower-roman; /*小写罗马数字*/list-style-type:upper-roman; /*大写罗马数字*/list-style-type:lower-alpha; /*小写英文字母*/list-style-type:upper-alpha; /*大写英文字母*/list-style-type:disc; /*实心圆形符号*/list-style-type:circle; /*空心圆形符号*/list-style-type:square; /*实心方形符号*/list-style-image:url(/dot.gif); /*图片式符号*/list-style-position:outside; /*凸排*/list-style-position:inside; /*缩进*/四、CSS背景样式：background-color:#F5E2EC; /*背景颜色*/ background:transparent; /*透视背景*/background-image : url(/image/bg.gif); /*背景图片*/ background-attachment : fixed; /*浮水印固定背景*/ background-repeat : repeat; /*重复排列-网页默认*/ background-repeat : no-repeat; /*不重复排列*/ background-repeat : repeat-x; /*在x轴重复排列*/ background-repeat : repeat-y; /*在y轴重复排列*/指定背景位置background-position : 90% 90%; /*背景图片x与y轴的位置*/ background-position : top; /*向上对齐*/background-position : buttom; /*向下对齐*/background-position : left; /*向左对齐*/ background-position : right; /*向右对齐*/ background-position : center; /*居中对齐*/五、CSS连接属性：a /*所有超链接*/a:link /*超链接文字格式*/a:visited /*浏览过的链接文字格式*/a:active /*按下链接的格式*/a:hover /*鼠标转到链接*/鼠标光标样式：链接手指 CURSOR: hand十字体 cursor:crosshair箭头朝下 cursor:s-resize十字箭头 cursor:move箭头朝右 cursor:move加一问号 cursor:help箭头朝左 cursor:w-resize箭头朝上 cursor:n-resize箭头朝右上 cursor:ne-resize箭头朝左上 cursor:nw-resize文字I型 cursor:text箭头斜右下 cursor:se-resize箭头斜左下 cursor:sw-resize漏斗 cursor:wait光标图案(IE6) p {cursor:url('光标文件名.cur'),text;} 六、CSS框线一览表：border-top : 1px solid #6699cc; /*上框线*/ border-bottom : 1px solid #6699cc; /*下框线*/ border-left : 1px solid #6699cc; /*左框线*/ border-right : 1px solid #6699cc; /*右框线*/以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369 /*设置上框线top颜色*/border-top-width :1px /*设置上框线top宽度*/border-top-style : solid/*设置上框线top样式*/其他框线样式solid /*实线框*/dotted /*虚线框*/double /*双线框*/groove /*立体内凸框*/ridge /*立体浮雕框*/inset /*凹框*/outset /*凸框*/七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式：margin-top:10px; /*上边界*/margin-right:10px; /*右边界值*/margin-bottom:10px; /*下边界值*/margin-left:10px; /*左边界值*/CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-sizefont-family}2 字体类型 {font-family:'字体1','字体2','字体3',...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small|smaller| x-small| xx-small}4 字体风格 {font-style:inherit|italic|normal|oblique}5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色 {color:数值;}7 阴影颜色 {text-shadow:16位色值}8 字体行高 {line-height:数值|inherit|normal;}9 字间距 {letter-spacing:数值|inherit|normal}10 单词间距 {word-spacing:数值|inherit|normal}11 字体变形 {font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形 {font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal|semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距 {line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格 {text-indent:数值|inherit}4 水平对齐 {text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式 {writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色 {background-color:数值}2 背景图片 {background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定 {background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式 {background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白 {margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值： thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值} 数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge| groove}6 边框 {border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color} 下边框{border-bottom:border-bottom-width border-style color}左边框 {border-left:border-left-widthborder-style color}7 宽度 {width:长度|百分比| auto}8 高度 {height:数值|auto}9 漂浮 {float:left|right|none}10 清除 {clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示 {display:none|block|inline|list-item}2 控制空白 {white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|upper-alpha|none}4 图形列表 {list-style-image:URL}5 位置列表 {list-style-position:inside|outside}6 目录列表 {list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resize|sw-resize}posted @ 2009-06-0813:39 DELPHI&.NET初学者[TECSOON WENDAY]阅读(143) | 评论(0) | 编辑表单验证代码全集1:js 字符串长度限制、判断字符长度、js限制输入、限制不能输入、textarea 长度限制2.:js判断汉字、判断是否汉字、只能输入汉字3:js判断是否输入英文、只能输入英文4:js只能输入数字,判断数字、验证数字、检测数字、判断是否为数字、只能输入数字5:只能输入英文字符和数字6: js email验证、js 判断email 、信箱/邮箱格式验证7:js字符过滤,屏蔽关键字8:js密码验证、判断密码2.1: js 不为空、为空或不是对象、判断为空、判断不为空2.2:比较两个表单项的值是否相同2.3:表单只能为数字和'_',2.4:表单项输入数值/长度限定2.5:中文/英文/数字/邮件地址合法性判断2.6:限定表单项不能输入的字符2.7表单的自符控制2.8:form文本域的通用校验函数1. 长度限制2. 只能是汉字3.' 只能是英文4. 只能是数字5. 只能是英文字符和数字6. 验证邮箱格式7. 屏蔽关键字(这里屏蔽***和****)8. 两次输入密码是否相同够了吧 :)屏蔽右键很酷oncontextmenu='return false' ondragstart='return false'onselectstart='return false'加在body中二2.1 表单项不能为空2.2 比较两个表单项的值是否相同2.3 表单项只能为数字和'_',用于电话/银行帐号验证上,可扩展到域名注册等2.4 表单项输入数值/长度限定2.5 中文/英文/数字/邮件地址合法性判断2.6 限定表单项不能输入的字符1. 检查一段字符串是否全由数字组成---------------------------------------2. 怎么判断是否是字符---------------------------------------if (/[^/x00-/xff]/g.test(s)) alert('含有汉字');else alert('全是字符');3. 怎么判断是否含有汉字---------------------------------------if (escape(str).indexOf('%u')!=-1) alert('含有汉字'); else alert('全是字符');4. 邮箱格式验证---------------------------------------//函数名：chkemail//功能介绍：检查是否为Email Address//参数说明：要检查的字符串//返回值：0：不是 1：是function chkemail(a){ var i=a.length;var temp = a.indexOf('@');var tempd = a.indexOf('.');if (temp > 1) {if ((i-temp) > 3){if ((i-tempd)>0){return 1;}}}return 0;}5. 数字格式验证--------------------------------------- //函数名：fucCheckNUM//功能介绍：检查是否为数字//参数说明：要检查的数字//返回值：1为是数字，0为不是数字function fucCheckNUM(NUM) {var i,j,strTemp;strTemp='0123456789';if ( NUM.length== 0)return 0for (i=0;i{j=strTemp.indexOf(NUM.charAt(i)); if (j==-1){//说明有字符不是数字return 0;}}//说明是数字return 1;}6. 电话号码格式验证--------------------------------------- //函数名：fucCheckTEL//功能介绍：检查是否为电话号码//参数说明：要检查的字符串//返回值：1为是合法，0为不合法function fucCheckTEL(TEL){var i,j,strTemp;strTemp='0123456789-()# ';for (i=0;i{j=strTemp.indexOf(TEL.charAt(i));if (j==-1){//说明有字符不合法return 0;}}//说明合法return 1;}7. 判断输入是否为中文的函数---------------------------------------function ischinese(s){var ret=true;for(var i=0;iret=ret && (s.charCodeAt(i)>=10000); return ret;}8. 综合的判断用户输入的合法性的函数---------------------------------------。

css中div标签的用法

在CSS中，`div`标签是一个通用的块级元素，可以用来组织和格式化大块的HTML内容。

默认情况下，`div`元素会占据其父元素的一整行空间，并且与其他元素垂直排列。

你可以使用CSS来修改`div`元素的样式，以适应你的布局需求。

以下是一些常见的CSS属性，你可以用于修改`div`元素的外观和行为：
* `width`和`height`：这些属性用于设置`div`元素的宽度和高度。

* `background-color`：这个属性用于设置`div`元素的背景颜色。

* `border`：这个属性用于设置`div`元素的边框样式，包括边框的宽度、颜色和样式。

* `margin`和`padding`：这些属性用于设置`div`元素的外边距和内边距，可以控制元素与其他元素之间的距离。

* `display`：这个属性用于控制`div`元素的显示方式，例如块级元素（`block`）、行内元素（`inline`）、列表项（`list-item`）等。

下面是一个简单的示例，展示了如何使用CSS来设置一个`div`元素的样式：
```html
<div style="width: 200px; height: 100px; background-color: #f00; border: 2px solid #000; margin: 10px; padding: 20px;">
这是一个div元素
</div>
```
在上面的示例中，我们使用内联样式来设置`div`元素的宽度、高度、背景颜色、边框样式、外边距和内边距。

你可以将这些属性值替换为你需要的样式，以适应你的布局需求。

div多有属性

isTextEdit 获取是否可使用该对象创建一个 TextRange 对象。
LANG lang 设置或获取要使用的语言。
LANGUAGE language 设置或获取当前脚本编写用的语一个子对象的引用。
nextSibling 获取对此对象的下一个兄弟对象的引用。
innerHTML 设置或获取位于对象起始和结束标签内的 HTML。
innerText 设置或获取位于对象起始和结束标签内的文本。
isContentEditable 获取表明用户是否可编辑对象内容的值。
isDisabled 获取表明用户是否可与该对象交互的值。
isMultiLine 获取表明对象的内容是包含一行还是多行的值。
标签属性属性描述
ACCESSKEY accessKey 设置或获取对象的快捷键。
ALIGN align 设置或获取对象相对于显示或表格的排列方式。
ATOMICSELECTION 指定元素及其内容是否可以一不可见单位统一选择。
BEGIN begin 设置或获取时间线在该元素上播放前的延迟时间。
CONTENTEDITABLE contentEditable 设置或获取表明用户是否可编辑对象内容的字符串。
DATAFLD dataFld 设置或获取由 dataSrc 属性指定的绑定到指定对象的给定数据源的字段。
DATAFORMATAS dataFormatAs 设置或获取如何渲染提供给对象的数据。
clientHeight 获取对象的高度，不计算任何边距、边框、滚动条或可能应用到该对象的补白。
clientLeft 获取 offsetLeft 属性和客户区域的实际左边之间的距离。
clientTop 获取 offsetTop 属性和客户区域的实际顶端之间的距离。

div的postion属性及DIV嵌套DIV

1.前言我们在利用div+css进行布局时，常常被div的位置弄的焦头烂额，很多人甚至放弃了div 而直接用table。

这里一如既往的推荐使用div布局，其实我们只要掌握了div的position属性和div的float属性，布局是非常灵活的，这里详细说一下div的position，没想象中那么简单，也没想象中那么复杂。

2.position的四种取值static:static定位就是不定位，出现在哪里就显示在哪里，这是默认取值，只有在你想覆盖以前的定义时才需要显示指定relative:relative 就是相对元素static定位时的位置进行偏移，如果指定static时top是50象素，那么指定relative并指定top是10象素时，元素实际top就是60象素了。

absolute:absolute绝对定位，直接指定top、left、right、bottom。

有意思的是绝对定位也是“相对”的。

它的坐标是相对其容器来说的。

容器又是什么呢，容器就是离元素最近的一个定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。

如果没有这个容器，那就使用浏览器初始的，也就是body或者html元素。

标准是说只需要指定left和right，width可以自动根据容器宽度计算出来，可惜ie不支持。

fixed:fixed才是真正的绝对定位，其位置永远相对浏览器位置来计算。

而且就算用户滚动页面，元素位置也能相对浏览器保持不变，也就是说永远可以看到，这个做一些彩单的时候可以用。

可惜的是ie还不支持3.relative,absolute,fixed需要指定具体位置relative,absolute,fixed如果不指定它的top,left等属性，那么它的position实际上依然是static。

使用了relative,absolute,fixed就必须指定具体的位置。

4.关于DIV的嵌套我们设定外层div的名字为div1,内层div的名字为div24.1如果div1的position是static，说明div2位置是出现在哪里就显示在哪里。

div的使用方法

div的使用方法div是HTML中常用的一个标签，用于定义一个文档中的区域或部分。

它可以用来划分页面结构，设置样式以及实现交互效果等等。

在本文中，我们将介绍div标签的使用方法，包括如何设置div的属性和样式，以及如何嵌套和组合div标签。

一、div的基本用法使用div标签非常简单，只需在HTML文档中使用<div>和</div>将需要划分的内容包裹起来即可。

例如，我们可以将一个页面划分为页眉、导航栏、内容区域和页脚四个部分，每个部分都使用一个div标签进行包裹。

二、设置div的属性和样式除了基本的用法外，我们还可以通过设置div的属性和样式来实现更多的功能和效果。

比如，我们可以给div设置一个id属性，通过CSS样式来对其进行定制化的设计。

例如，我们可以给导航栏的div设置一个id为"nav"，然后在CSS中定义该id的样式，使其具有特定的背景颜色、字体和布局等。

三、嵌套和组合div标签除了单独使用div标签外，我们还可以通过嵌套和组合div标签来创建更复杂的页面结构和布局。

例如，我们可以在一个div标签内再嵌套多个div标签，用于实现多列布局或者层叠效果。

同时，我们还可以通过设置div的class属性来对一组div进行样式的统一设置和管理。

四、使用div实现交互效果除了用于页面布局和样式设计外，div标签还可以用于实现一些简单的交互效果。

例如，我们可以通过JavaScript脚本动态改变div 的内容或样式，实现页面的动态更新和交互。

同时，我们还可以通过设置div的事件属性来响应用户的操作，实现一些简单的交互功能，比如点击、拖拽等。

总结：通过上述的介绍，我们可以看出，div标签在HTML中的作用非常重要。

它不仅可以用于页面的划分和布局，还可以通过设置属性和样式来实现更多的功能和效果。

同时，通过嵌套和组合div标签，我们可以创建出各种复杂的页面结构和布局。