- 浏览: 69036 次
- 性别:
- 来自: 上海
文章分类
最新评论
一、常用属性:
1、Height: 设置DIV 的高度。
2、Width: 设置DIV 的宽度。
例:
< div style="width:200px;height:200px;background-color:Black;" >
</ div >
3、margin: 用于设置DIV 的外延边距,也就是到父容器的距离。
例:
< div style ="background-color:Black;width:500px;height:500px;" >
< div style ="margin:5px 10px 20px 30px;width:200px; height:200px;background-color:White;" >
</ div >
</ div >
说明:margin:
后面跟有四个距离分别为到父容器的上-
右-
下-
左边的距离;可以看例子中的白色DIV
到黑色DIV
的边距离效果。还可以分别设置这四个边的距离,用到的属性如下: 4、margin-left:
到父容器左边框的距离。 5、margin-right:
到父容器右边框的距离。 6、margin-top:
到父容器上边框的距离。 7、margin-bottom:
到父容器下边框的距离。 例: 8、padding:用于设置DIV
的内边距。 例: 9、padding-left:
左内边距。 10、padding-right:
右内边距。 11、padding-top;
上内边距。 12、padding-bottom:
下内边距。 例: 13、position:
设置DIV
的定位方式。 例: 说明:position
的属性中有static
、fixed
、relative
、absolute
四个属性。常用relative
和absolute
。若指定为static
时,DIV
遵循HTML
规则;若指定为relative
时,可以用top
、left
、right
、bottom
来设置DIV
在页面中的偏移,但是此时不可使用层;若指定为absolute
时,可以用top
、left
、right
、bottom
对DIV
进行绝对定位;若指定为fixed
时,在IE7
与FF
中DIV
的位置相对于屏屏固定不变,IE6
中没有效果(
期待高手指点原因)
; 14、left:
设置对象相对于文档层次中最近一个定位对象的左边界的位置。 15、top:
设置对象相对于文档层次中最近一个定位对象的上边界的位置。 16、right:
设置对象相对于文档层次中最近一个定位对象的右边界的位置。 17、bottom:
设置对象相对于文档层次中最近一个定位对象的下边界的位置。 18、z-index:
设置DIV
的层叠顺序。 例:
说明:上例效果中如果不设z-index
属性蓝色DIV
应该在中间,而现在的效果蓝色在最上面了。还要说明的是用z-index
属性时,position
必需要指定为absolute
才行。 19、font:
指定DIV
中文本的样式,其后可跟文本的多个样式。 例: 说明:font
后可以跟文本样式的多个属性,如字体粗细、字体大小、何种字体等等。还可以用以下几个属性分别加以设置: 20、font-family:
设置要用的字体名称; 21、font-weight:
指定文本的粗细,
其值有bold bolder lighter
等。 22、font-size:
指定文本的大小。 23、font-style:
指定文本样式,其值有italic normal oblique
等。 24、color:
指定文本颜色。 25、text-align:
指定文本水平对齐方式,其值有center(
居中) left right justify
。 26、text-decorator:
用于文本的修饰。其值有none underline overline line-through
和blink
的组合。 (
在IE
中无闪烁效果,FF
中有效果。期待高手指点,)
27、text-indent:
设置文本的缩进。 28、text-transform:
设置文本的字母大小写。其值有lowercase uppercase capitalize(
首字母大写) none
。 例: auto(
内容超出时显示滚动条)
、hidden(
超出时隐藏内容)
。 30、direction:
内容的流向。其值有ltr(
从左至右)
、rtl(
从右至左)
。 31、line-height:
指定文本的行高。 32、Word-spacing:
字间距。 例: 33、border:
设置DIV
的边框样式。
例:
说明:border
后跟边框的样式、宽度、颜色等属性。还可以用以下属性分别设置。 34、border-width:
设置边框的宽度。 35、border-color
:设置边框的颜色。 36、border-style:
设置边框的样式。 例:
border-top:
设置上边框样式。 37、border-bottom:
设置下边框样式。 38、border-left:
设置左边框样式。 39、border-right:
设置右边框样式。 说明:某一边框的某一样式也可单独设置,以上边框为例可以用:border-top-style
、border-top-width
、border-top-color
来分别设置,由于使用各border
相同,所以不在举例说明。 40、display:
设置显示属性。其值有block
、none
。 41、float:
设置DIV
在页面上的流向,其值有left(
靠左显示)
、right(
靠右显示)
、none
。 50、background:
设置DIV
的背景样式。 例: 说明:background
后可直接跟背景的颜色、背景图片、平铺方式等样式。也可以用以下属性分别设置。 51、background-color:
设置背景颜色。 52、background-attachment:
背景图像的附加方式,其值有scroll
、fixed
。 53、background-image:
指定使有的背景图片。 54、background-repeat:
背景图象的平铺方式。其值有no-repeat(
不平铺)
、repeat(
两个方向平铺)
、 repeat-x(
水平方向平铺)
、repeat-y(
垂直方向平铺)
。 55、background-position:
在DIV
中定位背景位置。其值有top bottom left right
的不同组合。也可以以用坐标 指定具体的位置。 例:
<
div
style
="width:500px;height:500px;background-color:Black;"
>
<
div
style
="margin-left:50px; margin-top:50px; width:200px; height:200px;
background- color:White;"
>
</
div
>
</
div
>
<
div
style
="padding:5px 10px 20px 30px;background-color:Black;width:500px;height:500px;"
>
<
div
style
="width:200px; height:200px;background-color:White;"
></
div
>
</
div
>
<
div
style
="padding-left:50px;padding-top:50px;width:150px;height:150px;
background-color:Black;"
>
<
div
style
="width:140px; height:140px;background-color:White;"
>
</
div
>
</
div
>
<
div
style
="width:200px; height:200px;background-color:Black;"
>
<
div
style
="position:relative; top:10px;left:10px; width:140px; height:140px;
background-color:White;"
>
</
div
>
<
div
style
="position:absolute; top:60px;left:60px; background-color:Silver;
width:100px;height:100px;"
>
</
div
>
<
div
style
="position:fixed; top:210px;left:210px; background-color:Navy;
width:100px;height:100px;"
>
</
div
>
</
div
>
<
div
style
="position:absolute; top:50px;left:50px; background-color:Blue;
width:100px;height:100px;"
>
</
div
>
<
div
style
="position:fixed; top:200px;left:200px; background-color:Navy;
width:100px;height:100px;"
>
</
div
>
<
div
style
="position:static; top:200px;left:100px; background-color:Yellow;
width:100px;height:100px;"
>
</
div
>
<
div
style
="position:absolute; top:50px;left:50px; width:100px; height:100px;background-color:black;"
>
</
div
>
<
div
style
="position:absolute; top:60px;left:60px; width:100px; height:100px;
background-color:Blue;z-index:1;"
>
</
div
>
<
div
style
="position:absolute; top:70px;left:70px; background-color:Silver;width:100px;height:100px;"
>
</
div
>
<
div
style
=" font:bold 14px 宋体;background-color:Yellow"
>
明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。
</
div
>
<
div
style
="text-align:left; text-decoration:line-through blink; text-indent:30px;
text-transform:capitalize;color:Blue; font:bold italic 14px 宋体; background-color:Yellow"
>
明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。
abcdefghijklmnopqRSTUVWXYZ
</
div
>
<
div
style
="font:16px 宋体;width:600px;height:200px; word-spacing:5px; line-height:20px;
direction:rtl; overflow:auto;background-color:Yellow"
>
明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。
<
br
/>
明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。
<
br
/>
明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。
<
br
/>
明月几时有?把酒问青天。不知天上宫阙、今夕是何年?我欲乘风归去,惟恐琼楼玉宇,高处不胜寒.起舞弄清影,何似在人间? 转朱阁,低绮户,照无眠。不应有恨、何事长向别时圆?人有悲欢离合,月有阴晴圆缺,此事古难全。但愿人长久,千里共蝉娟。
</
div
>
<
div
style
="border:dotted 2px black; background-color:Yellow; width:100px;height:100px;"
>
</
div
>
<
label
style
="font-size:14px;"
>
选择样式:
</
label
>
<
select
id
="bstyle"
onchange
="document.getElementById('tdd').style.
borderStyle=this.options[this.selectedIndex].text;"
>
<
option
selected
="selected"
>
none
</
option
>
<
option
>
dashed
</
option
>
<
option
>
dotted
</
option
>
<
option
>
groove
</
option
>
<
option
>
hidden
</
option
>
<
option
>
inset
</
option
>
<
option
>
outset
</
option
>
<
option
>
ridge
</
option
>
<
option
>
double
</
option
>
<
option
>
solid
</
option
>
</
select
>
<
div
id
="tdd"
style
="border-style:none; border-width:5px; border-color:Black; width:100px;height:100px;background-color:Yellow;"
>
</
div
>
<
div
style
="width:600px;height:200px; background:yellow url(mw3.jpg) repeat scroll;
overflow:auto"
>
<
div
style
="width:2px;height:1000px;"
></
div
>
</
div
>
<
div
style
="background-color:Yellow; background-image:url(mw3.jpg); background-position:right bottom; background-attachment:scroll; width:600px;height:200px;"
>
</
div
>
发表评论
-
DIV样式总结(二)
2010-12-23 16:57 959二、一些特殊效果: 1、cursor: 设置DIV ... -
div的title属性
2010-12-23 13:10 2022title属性可以用在除了base,basefont,head ... -
CSS中的div,span和label
2010-12-22 20:22 5055div与span 大家在初学div+css布局时,有 ... -
position 的 static、relative、absolute、fixed、inherit
2010-12-16 17:22 1226position 有五个值:stati ...
相关推荐
在本书最后一个部分,还精选了5个常见类型网页综合实例,包括博客网站、小型工作室网站、企业网站、购物网站、旅游网站等,帮助读者总结前面所学知识,综合应用各种技术、方法和技巧,提高读者综合应用的能力。
Div+CSS网站设计的优点 。
这里我就简单的说一下这个小模板,上面的一些是广泛的定义一个网页的整体的样式,因为现如今的浏览器的种类可以说是及其繁多,大多数都各自为政,都以自己的浏览器为标准,这样一来就苦了战斗在web编程最前沿的开发...
DIV+CSS网页样式与布局实例,通过不同章节的代码示例展示如何通过DIV+CSS布局网页
div+css布局页面的使用经验总结,包括div设置,css样式表修饰div块进行页面的布局等等。
Div中常用样式的属性,如设置距离顶部啊,这些常用的属性,在这里总结了一下,希望对大家有用
在本书最后一个部分,还精选了5个常见类型网页综合实例,包括博客网站、小型工作室网站、企业网站、购物网站、旅游网站等,帮助读者总结前面所学知识,综合应用各种技术、方法和技巧,提高读者综合应用的能力。
在本书最后一个部分,还精选了5个常见类型网页综合实例,包括博客网站、小型工作室网站、企业网站、购物网站、旅游网站等,帮助读者总结前面所学知识,综合应用各种技术、方法和技巧,提高读者综合应用的能力。
总结一下自己在写这个需求遇到的问题,相信大家应该是经常遇到的。即要求滚轮滚动到指定的位置。先看下基本的解决方案。 1.给链接a加个#的方式来实现跳转。(锚点方法)这里直接贴下代码: <div id=container> <a>...
第一个样式是京东客服,气泡的圆角和钩子都是用了图片。使用了一个table组合成了一个圆角的框框。lm样式拼出了钩子。 XML/HTML Code复制内容到剪贴板 <div u00a0class=jimi_lists clearfix> <div u00a0class...
XHTML 下css+div布局总结..................................................................................................................... 6 网页设计 DIV+CSS 第1 天:选择什么样的DOCTYPE ...............
XHTML 下css+div 布局总结....................... 6 网页设计DIV+CSS——第1 天:选择什么样的DOCTYPE ....... 9 第一天............. 9 什么是DOCTY 4.群选择器.... 14 5.派生选择器 14 6.id 选择器... 14 6.类别...
在样式布局中,我们经常碰到需要将元素居中。通过css实现元素的水平居中较为简单:对文本,只需要对其父级元素设置text-align: center;,而对div等块级元素,只需要设置其left和right的margin值为auto。要实现元素的...
一、问题总结: 样式必须直接写在元素内部才能通过div.style.left直接获取属性值(也就是必须是内联样式才行),定义在css中的样式不能通过这种方式获取。 让元素移动到200停止 setTimeout ( function () { ...
很多新手在写css的时候经常遇到的一个问题,当div没有固定的宽度或者高度的时候,如何才能让div水平或者垂直居中显示。如果div有固定宽度的话,用padding,margin都很容易实现。方法有很多种。不过经常遇到这种div...
CSS+DIV是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用css div的方式实现各种定位。...
//设置元素的样式,也可以用一个对象参数包含多个样式。 13.getColor Ext.fly('elId').getColor('color');//为指定的CSS属性返回CSS颜色 14.setOpacity Ext.fly('elId').setOpacity(.45, true);//设置元素的...
人们在标签使用中最常见到的错误之一就是随意将HTML5的等价于<div>——具体地说,就是直接用作替代品(用于样式)。在XHTML或者HTML4中,我们常看到这样的代码: <!-- HTML 4-style code --> <div id="wrapper"> ...
命名方式遵循“驼峰式大小写(标志符由多个单词组成 除首词首字母小写外 其余单词首字母均大写)” 2:避免滥用类 当类型的结构需要不一样的表现时 记得什么是层叠样式表 具体结构中的p a h1等可使用如下方式:div....
对于CSS样式中的各式各样的属性进行了系统的描述和总结,使一个不错的开发辅助手册。