DIV+CSS布局常用的属性

html-css016

DIV+CSS布局常用的属性,第1张

用过DIV+CSS的人都知道,虽然这种布局没有用传统的table直观,但用习惯了就会感觉出DIV+CSS的优越。对于seo优化,div+css也有了明显的优势,实际应用中我搜索了DIV+CSS的常用定义项,并对其参数作了归纳和说明,与喜欢DIV+CSS的朋友共享。通用类

overflow:hidden自动隐藏超出的内容,防止撑开层和表格的范围

!important

指定样式规则的应用优先权:

文字类

color: #FF0000文字颜色

font-family: "Arial", "Helvetica", "sans-serif"字体

font-size: 9px字号

text-align:center居中(left为居左,right为居右)

line-height:28px;行高(可用150%值)

font-style: italic斜体(oblique偏斜体)

font-weight: bold服务粗体(bolder特粗,400粗值)

font-variant: small-caps小型大写字母

text-transform: capitalize首字母大写

text-decoration: underline overline line-through blink下划线,上划线,删除线,闪烁

text-indent: 2em文字缩进2个字体高(或15px,即15象素)

背景类

background-attachment: fixed固定位置(scroll滚动)

background: #0066CC背景色(transparent透明)

background: url(/image/more2.gif)背景图片

background-repeat: repeat重复(repeat-x横向重复,repeat-y纵向重复)

background-position: center top水平居中 垂直顶部(left center水平居左 垂直居中)

background:url(/image/dtbg.gif) #FEFEFE no-repeat right bottom(2px 5px)背景图片、背景颜色、图片不重复、背景图片从右下角开始(图片距左2px距上5px)

框架位置类

clear: both两边拒排浮动对象(left左边拒排浮动对象,right右边拒排浮动对象)

float: left浮动对象位置居左(right, 最新列车时刻表位置居右)

position:relative相对位置,一般在上级框架中设定 极品时刻表

position:absolute绝对位置,配合上级框架的设定对本级框架设定,设置top、left值

top:5px页面绝对或相对于框架顶端绝对位置

left:10px页面绝对或相对于框架左边绝对位置

width: 100px宽100px

height: 200px高200px(可用auto和100%值)

margin 上海火车时刻表:10px 20px 10px 20px;

上右下左页边距(值相同可省写margin:10px)

单独指定用margin-top:10px(margin-right、margin-bottom、margin-left)

padding:20px 10px 10px 20p;

上右下左内容离边框的距离(值相同可省写padding:10px)

单独指定用padding-top:10px(padding-right、padding-bottompadding-left)

border:#ccc 1px solid 成都列车时刻表;

四边框颜色、线宽、实线(dotted虚线,dashed点画线,double双线,ridge脊线)

单独指定用border-top:#ccc 1px solid;border-right:#ccc 1px solid

等等

项目列表类 list-style-position: outside位置为外(inside内) list-style-image: url(/yh/image/more04.gif)项目符号图像 临客时刻表 list-style-type: disc项目符号为圆点(circle圆圈,square方块)

扩展类 cursor: e-resize鼠标样式 filter: Blur(Add=4, Direction=8, Strength=4)滤镜 filter: FlipH横向翻转(FlipV gprs流量费纵向翻转)

单独设置链接

#bottool a:link{color:#fff}未访问的颜色

#bottool a:visited{color:#fff}已访问的颜色 流量软件

#bottool a:hover{color:#ff0}鼠标在链接上

这么多定义项, 其实常用也就下面几类:指定宽高值width,height指定背景:background指定位置:float,特殊的用position结合 top、left来定位;设定框架边距:margin;设定容器内框距:padding几项。其中在我的样式定义中取消了overflow、 clear、!important程序的定义项。

1、取消overflow:hidden是因为经反复实验,该定义项只能隐藏超出容器高度的内容而不能隐藏超出宽度的内容。而我需要的就是要能自动隐藏超出容器宽度的内容,有时反而需要容器高度能随内容的多少而撑开容器高度。

2、取消clear定义项是因为在实际应用中很真正达到理解的容器与容器的排列关系,框架或容器的位置还是用float、position、top、left等精确定位。

3、!important

指定样式规则的应用优先权。这个主要用于在IE和其它的浏览器要区别显示出的效果,我的网站就是想固定显示效果,所以不存在什么优先权。

我对DIV+CSS也还在研究之中,有不当之处请大家跟贴指正,有完善的地方也请跟贴完善。我认为用DIV+CSS来布局网站,最重要的是布局思路问题,不同的设计方案,设计的繁简大不一样。我着重框架或容器的通用性,设计出几种容器的样式,就象FS4中的标签样式,然后在需要的地方调用这个样式就行了,以达到通用性而不是专用性。、 希望 可以帮到你

需要准备的材料分别有:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html,编写问题基础代码。

2、在index.html中的<script>标签,输入js代码:$('div').click(function () {$(this).css('color', 'blue')})。

3、浏览器运行index.html页面,此时点击123所在的div,div会变为蓝色文本。

div是块,与photoshop的层大意差不多,它只是一个容器,而容器里的内容就是CSS构建的……

而调用CSS样式表有几种形式。你可以看看CSS中文站的说明,一般表现为:div id=×××{1}或者.p{1}(1就是具体的CSS代码)……一般网页中是利用指向形式来指定CSS样式,所以你只会在后面看见{DIV ID="×××"}{/div}这样的指向代码而看不见它的CSS样式,因为它的样式表是放在另一个地方……

推荐你去看看《精通CSS.DIV网页样式与布局》,电驴上有视频教程,自己认真照着做一遍就基本入门了……认真学大概一星期就可以学完……