`

DIV+CSS经常用到的属性、参数及说明

阅读更多
用过DIV+CSS seo教程布局网站的人都会喜欢上这种方式,虽然开始没有用传统的table直观,但用习惯了就会感觉出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和其它的浏览器要区别显示出的效果,我的网站就是想固定显示效果,所以不存在什么优先权。
分享到:
评论

相关推荐

    jQuery+CSS3星云密布旋转背景动画特效.zip

    可能用到的CSS3属性有`transform`(用于改变元素的位置、大小、形状等),特别是`rotate`函数来实现旋转效果;`animation`则可以定义动画的时长、延迟、速度曲线等参数。 具体实现过程中,开发者可能创建了一个包含...

    JS+CSS放大镜效果r

    这里可能需要用到`canvas`元素或者CSS的`background-position`属性来实现。 6. **动画效果**:为了使用户体验更流畅,可以添加平滑过渡的动画效果,例如使用`requestAnimationFrame`来实现帧动画,使得放大镜的移动...

    jQuery+CSS3提示框按钮过渡效果.zip

    在这个项目中,CSS3的过渡属性(transition)是关键,它允许我们在更改元素的特定属性时添加平滑的过渡效果。例如,可以设置按钮在被鼠标悬停或点击时改变颜色、大小或透明度。 HTML5作为现代网页开发的标准,提供...

    jQuery+CSS3竖排手风琴tab代码

    我们将用到CSS3的`:hover`伪类来创建鼠标悬停时的气泡效果,以及`transition`属性来实现平滑的切换动画。 1. **HTML结构**: 创建基本的HTML结构,包括一个包含所有tab标题的容器和一个用于显示内容的容器。每个...

    HTML5+CSS3 transform变形处理.docx

    但有时候,我们可能希望改变这个基准点,这就需要用到`transform-origin`属性。`transform-origin`接受一个或两个坐标值,可以是百分比或具体的像素值,来定义元素变换前的位置。例如,`transform-origin: left ...

    基于HTML5+CSS3实现鼠标悬停3D立体式图片效果源码.zip

    在实现这个效果时,主要用到了`<img>`标签来插入图片,并通过CSS3的属性来控制图片的显示和交互。HTML5还允许我们添加自定义数据属性(data- attributes),这些属性可以用来存储额外的信息,如图片的3D变换参数。 ...

    航海王_html_css3_旋转效果demo

    开发者可能会使用`<div>`元素作为旋转效果的容器,以便通过CSS3来定位和应用样式。 接着,CSS3(Cascading Style Sheets Level 3)是CSS的最新版本,它引入了许多新的特性和功能,其中就包括丰富的动画效果。在这个...

    利用css的clear属性实现广告文字环绕效果

    加载完毕后回调函数----回调参数说明:url-传回图片地址值,picDiv-传回所加载图片DIV的ID,w-传回的图片原始宽度,h-传回的图片原始高度;  加载图片事件参数说明:  url-图片路径,picDiv-装载图片的DIV的ID,用法...

    div背景定位background设置元素的背景参数

    我都是会把工作中接触到的新知识放在我的微博里面,但是由于微博总是限制我的字数,有很多内容我都是分散成几个部分,现在我...DIV背景定义参数:background 设置元素的背景参数,其中属性依在写博客之前 我都是会把

    jQuery+css3下着雪花的圣诞老人滑动面板

    特别是以下CSS3特性将被用到: 1. `keyframes` - 定义动画的各个阶段,使得雪花能够从屏幕顶部飘落到底部。 2. `transform` - 改变元素的位置、大小和形状,实现雪花的随机旋转。 3. `animation` - 应用关键帧动画...

    div的图层切换函数

    实现`div`图层切换,我们通常会用到JavaScript,可能还会涉及到CSS样式控制。下面是一份简单的示例代码,展示如何实现这个功能: 1. **HTML结构**: 创建多个`div`,并为每个`div`设置唯一的ID,例如:`id="layer1...

    一款jQuery+DIV居中淡入淡出信息提示框示例

    总的来说,"一款jQuery+DIV居中淡入淡出信息提示框示例"结合了前端开发的多个核心知识点,包括jQuery的使用、CSS布局、事件处理和动画效果,展示了如何通过JavaScript和CSS实现一个优雅的交互效果。通过学习和理解这...

    纯CSS3实现的圆点发光网页Loading加载动画特效源码.zip

    首先,CSS3是 Cascading Style Sheets 的第三版,它引入了许多新的功能和属性,极大地增强了网页设计的灵活性和表现力。在实现圆点发光动画中,以下几个CSS3的关键特性尤为重要: 1. **选择器**:CSS3引入了更强大...

    DIV圆角的js实现

    4. 使用CSS的`overflow:hidden`属性,确保原始DIV的内容不会被这些小元素遮挡。 5. 针对不同的圆角半径,调整小元素的宽度、高度和剪裁规则。可以使用`clip`属性或者CSS3的`clip-path`属性来实现剪裁,剪裁形状可以...

    CSS3彩色矩阵方块波浪动画特效

    `animation`是CSS3中的一个复合属性,它包括了多个相关的子属性,如`animation-name`、`animation-duration`、`animation-timing-function`、`animation-delay`等,用于定义一个完整的动画序列。在这个特效中,我们...

    CSS3树叶子飘落背景特效.rar

    《CSS3实现树叶子飘落背景特效详解》 在网页设计中,动态效果往往能为用户体验增添一抹生动的色彩。CSS3作为现代网页设计的重要工具,提供了丰富的动画和过渡功能,使得无需JavaScript即可创建出令人惊叹的视觉效果...

    CSS3打造百度贴吧的3D翻牌效果完整实例源码

    在3D翻牌效果中,我们主要会用到以下CSS3变换属性: 1. `transform-style: preserve-3d;` - 这个属性使得子元素在3D空间内保持它们自身的3D位置,而不是扁平化处理。 2. `transform: rotateX()` 或 `rotateY()` - ...

    简单但很实用的5个css属性

    以上就是文档中所提到的五个简单但实用的CSS属性,它们虽非CSS3中新增的特性,但均为CSS2规范中的一部分,具有广泛的浏览器兼容性,并且在实际开发中经常被用到。掌握这些基础的CSS属性,可以帮助开发者更有效地布局...

Global site tag (gtag.js) - Google Analytics