- 浏览: 283406 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
u011563440:
u011563440 写道用反射A.class.toGener ...
Java接口中的内部接口和接口中的内部类 -
u011563440:
用反射A.class.toGenericString()--- ...
Java接口中的内部接口和接口中的内部类 -
narutolby:
因为接口本身不能实例化,所以在new 一个 接口的内部类时默认 ...
Java接口中的内部接口和接口中的内部类 -
hekuilove:
请问楼主,第四部如何做?在eclipse哪个位置?
eclipse中使用maven插件的问题:Updating index central|http://repo1.maven.org/maven2 -
小小生:
请问下,如果修改了数据库里面的订单任务的时间,那么不是要重启? ...
利用Spring动态对Quartz定时任务管理
介绍CSS属性border-width边框宽度属性的用法
|
border-width属性简介: border-width边框宽度属性用来设定边框的宽度。边框区域的定义,可参见 CSS 盒子模式 (Box Model) 。 值:<border-width>{1,4} | inherit 可用值 值的说明 medium 缺省值。中等宽度。 thin 比 medium 细。 thick 比 medium 粗。 width 浮点数后跟绝对长度单位 (cm, mm, in, pt, or pc) 或相对长度单位 (em, ex, or px)。 border-width 是 border-top-width, border-right-width, border-bottom-width,border-left-width 的一种快捷的综合写法,最多允许四个值,依次的顺序是:上,右,下,左。 如果只有一个值,表示四个边框都用同样的宽度。如果有两个值,第一个值表示上下边框宽度,第二个值表示左右边框宽度。如果有三个值,第一个值表示上边框宽度,第二个值表示左右边框宽度,第三个值表示下边框宽度。 示例代码 .d2 {border-width:thin;border-style:solid;} .d3 {border-width:thick;border-style:solid;} .d4 {border-width:10px;border-style:solid;} .d5 {border-width:5mm;border-style:solid;}
|
CSS属性background-position用法
语法:
background-position : length || length
background-position : position || position
参数:
length : 百分数 | 由浮点数字和单位标识符组成的长度值。请参阅长度单位
position : top | center | bottom | left | center | right
说明:
设置或检索对象的背景图像位置。必须先指定background-image属性。默认值为:(0% 0%)。
如果只指定了一个值,该值将用于横坐标。纵坐标将默认为50%。第二个值将用于纵坐标。
该属性定位不受对象的补丁属性(padding)设置影响。
对应的脚本特性为backgroundPosition。请参阅我编写的其他书目。
示例:
div { background: url("images/aardvark.gif"); background-position: 35% 80%; }
menu { background: url("images/aardvark.gif"); background-position: 35% 2.5cm; }
a { background: url("images/aardvark.gif"); background-position: 3.25in; }
body { background: url("images/aardvark.gif"); background-position: top right; }
CSS属性position用法
|
语法: position : static | absolute | fixed | relative 参数: static : 无特殊定位,对象遵循HTML定位规则 absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对定位。而其层叠通过z-index属性定义。此时对象不具有边距,但仍有补白和边框 relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置 fixed : IE5.5及NS6尚不支持此属性 说明: 检索对象的定位方式。 对应的脚本特性为position。请参阅我编写的其他书目。 示例: div { position: absolute; bottom: 1in; left: 1in; right: 1in; top: 1in; } div { position:relative; top:-3px; left:6px; }
|
如何隐藏网页中的层DIV
div的visibility可以控制div的显示和隐藏,但是隐藏后页面显示空白:
style="visibility: none;"
document.getElementById("typediv1").style.visibility="hidden";//隐藏
document.getElementById("typediv1").style.visibility="visible";//显示
通过设置display属性可以使div隐藏后释放占用的页面空间,如下
style="display: none;"
document.getElementById("typediv1").style.display="none";//隐藏
document.getElementById("typediv1").style.display="";//显示
CSS兼容IE6/IE7/FF的通用方法
|
||
来源:网络 | 2007-7-14 | (有1230人读过)
一、CSS HACK 以下两种方法几乎能解决现今所有HACK. 1, !important 随着IE7对!important的支持, !important 方法现在只针对IE6的HACK. (注意写法.记得该声明位置需要提前.) <style> #wrapper { width: 100px!important; /* IE7+FF */ width: 80px; /* IE6 */ } </style>2, IE6/IE77对FireFox *+html 与 *html 是IE特有的标签, firefox 暂不支持. 而*+html 又为 IE7特有标签. <style> #wrapper { #wrapper { width: 120px; } /* FireFox */ *html #wrapper { width: 80px;} /* ie6 fixed */ *+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */ } </style> 注意: *+html 对IE7的HACK 必须保证HTML顶部有如下声明, <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 二、万能 float 闭合(非常重要!) 关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup] 将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽. <style> /* Clear Fix */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } .clearfix { display:inline-block; } /* Hide from IE Mac \*/ .clearfix {display:block;} /* End hide from IE Mac */ /* end of clearfix */ </style> 三、其他兼容技巧(再次啰嗦) 1, FF下给 div 设置 padding 后会导致 width 和 height 增加, 但IE不会.(可用!important解决) 2, 居中问题. 1).垂直居中.将 line-height 设置为 当前 div 相同的高度, 再通过 vertical-align: middle.( 注意内容不要换行.) 2).水平居中. margin: 0 auto;(当然不是万能) 3, 若需给 a 标签内内容加上 样式, 需要设置 display: block;(常见于导航标签) 4, FF 和 IE 对 BOX 理解的差异导致相差 2px 的还有设为 float的div在ie下 margin加倍等问题. 5, ul 标签在 FF 下面默认有 list-style 和 padding . 最好事先声明, 以避免不必要的麻烦. (常见于导航标签和内容列表) 6, 作为外部 wrapper 的 div 不要定死高度, 最好还加上 overflow: hidden.以达到高度自适应. 7, 关于手形光标. cursor: pointer. 而hand 只适用于 IE. P.S 至于IE5以及其他浏览器就没有必要兼顾了. 在这上面花时间不值得.
CSS实用小技巧14则 [摘 要] 用好CSS能使你的网页更加简炼,为什么同样内容的网页,有的人做出来有几十KB,而高手做出来只有十几KB,CSS在其中的作用是不言而喻的。我把我在使用CSS中的一些小经验以及一些网友来信提问的问题整理出来,供诸位参考。 CSS是Cascading Style Sheets的简称,中文译作“层叠样式表单”,我把它叫作“层叠样式表”,我感到这样顺口一 1、CSS在网页制作中一般有三种方式的用法,那么具体在使用时该采用哪种用法? 2、CSS的三种用法在一个网页中要以混用吗? 3、在Dreamweaver3中如何使外部文件式CSS? 4、如何用Dreamweaver3快速创建CSS外连式文件? 5、在Dreamweaver3中采用行内插入式CSS要手动写代码吗? 6、在方档头部方式和外连文件方式的CSS中都有“<!--”和“-->”,好象没什么用,不要可以吗? 7、如何给一部分文字加背景色? 8、如何给部分文字加背景图像? 9、如何使页面的背景在文字“滚动”时背景图案静止不动? 10、如何定义字间距? 11、如何给文字加上划线、下划线、删除线和闪烁? 12、如何使网页具有“首行缩进”功能? 13、在用表格进行排版时,能使某一方向上的内容离开表格线一点吗? 14、能给某部分内容加边框吗?
背景位置属性(background-position) body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}
背景属性(background) body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px} |
css中link和@import区别 |
css在页面里面一般有三种引入方式 1.在页面里面直接写 <style type="text/css"> body{ margin: 0; padding: 0; } </style>
2.用link进行引用 <link rel="stylesheet" type="text/css" href="my.css"> 3.用import进行引用 <style type="text/css"> @import url(my.css); </style> 第一种是直接在html页面上进行css书写,而第二种和第三种是采用外部引用样式单独提取文件。 问题1.到底link和@import有什么区别? 我们先来看看他们的定义 Quote link元素 HTML和XHTML都有一个结构,它使网页作者可以增加于HTML文档相关的额外信息。这些额外资源可以是样式化信息(CSS)、导航助手、属于另 外形式的信息(RSS)、联系信息等等。 Quote @import 指定导入的外部样式表及目标设备类型。 其实link和@import的最根本区别就是,link是一个html的一个标签,而@import是css的一个标签, link除了调用css外还可以有其他作用譬如声明页面链接属性,声明目录,rss等等,而@import就只能 调用css。如果单独从外部引用css来说,他们的作用是基本一样,只不过上面的老大不一样而已。:) 问题2.link合import到底那个更好? 上面说了因为上面的老大不一样,所以在使用上就会有一些细节的区别,不能说总体谁好谁坏, 只能说具体情况具体分析。 1)我要用javascript进行样式选择; 这个时候就要用link,因为link是html元素,可用javascript去控制dom元素最后达到改变样式的效果。 看下列代码 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" title="orange" /> <link rel="alternate stylesheet" href="/css/blue.css" type="text/css" media="screen" title="blue" /> <link rel="alternate stylesheet" href="/css/pink.css" type="text/css" media="screen" title="pink" /> <link rel="alternate stylesheet" href="/css/slate.css" type="text/css" media="screen" title="slate" /> 这是一段很经典的改变页面风格的代码,因为我们今天主要讲的是link和import,所以我这里只列出了引用css部分。 我们先来看看link里面个个属性都是表达了什么意思: [1]rel:用来声明链接对象的作用或者类型。 譬如上面的的代码:"stylesheet"表示链接一个默认的css,而"alternate stylesheet"折表示备选的css [2]href:这个就不用我说了吧,引用css的文件路径。 [3]tyle:文件类型 [4]media:应用的设备,"screen"是说明应用在屏幕上。 [5]title:是css的名称。 这段代码中一共有5个css,第一个是基本样式,而其他四个是风格样式,利用javascript去控制默认显示的样式title就ok了。 2)我要在应用打印样式; 打印样式顾名思义就是打印页面时候的样式。 这个样式在普通浏览下是没有效果的,只有在打印的时候生效。 如果要为页面单独引用打印样式的话,link和@import都可以的。 link代码 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="print" /> @import代码 <style type="text/css"> @import url(foo.css) print; </style> 另外对于css来说还有一种方式@media: @media print { @import "print.css" } 用@media先制定设备为 print,然后再用@impor链接 3)我要引用多个样式; 如果要在一个页面上引用多个样式组合产生效果的话,永link和@import也是都可以的。 link代码 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> <link rel="stylesheet" href="/css/orange.css" type="text/css" media="screen" /> @import代码 <style type="text/css"> @import url(../css/base/my.layout.css); @import url(../css/base/my.typo.css); </style> 不过个人觉得,用@import引用多文件的时候更加清晰一些 另外对于多样式还有一种link于@import的组合用法。 先用link引用一个css文件 <link rel="stylesheet" href="/css/styles.css" type="text/css" media="screen" /> 然后在这个css文件里面再引用。 <style type="text/css"> @import url(../css/base/my.layout.css); @import url(../css/base/my.typo.css); </style> 这样做的好处是,如果你一个站点所有页面引用的样式都是一样的, 而有又多个css,如果你每个页面都加4,5个一样的css样式,却是浪费代码和精力, 所以莫不如这样做,所有一个页面都引用一个css,然后一个css在引用多个css,方便。 |
发表评论
-
HTTP状态码:400\500 错误代码
2012-12-17 20:04 3102一些常见的状态码为: 200 - 服务器成功返回网 ... -
调试诊治CSS布局的10个有效方法
2010-05-20 14:27 10381. 检查HTML元素是否有拼 ... -
CSS奇特技巧:控制文字竖排
2010-05-20 14:26 2047样式表的文字处理属性中有两个重要的属性:writing-mod ... -
CSS入门:关于css样式表
2010-05-20 14:25 1060关于CSS样式表 一.在学习css之前你应该掌握哪些基础知识 ... -
CSS入门:语法基础
2010-05-20 14:24 9791. 基本语法 CSS的定义 ... -
如何在网页中插入CSS
2010-05-20 14:23 13301. 链入外部样式表 链入外部样式表是把样式表保存为一个样式 ... -
CSS中的padding、margin属性
2010-05-20 14:22 1496本文将讲述HTML和CSS的关键—盒子模型(Box model ...
相关推荐
在前端开发领域,CSS(Cascading Style Sheets)是用于控制网页元素样式和布局的关键技术。这个名为"css-border-effects.zip"的压缩包文件显然...同时,也可以将这些技巧应用到自己的项目中,提升网页的视觉吸引力。
"css-diner-develop"是一个专为CSS初学者设计的经典练习项目,旨在帮助学习者通过实践来掌握CSS选择器的使用技巧。 这个项目包含一个名为"css-diner-develop"的压缩包,解压后,你可以找到一个名为"index.html"的...
【标题】"前端项目-css-element-queries.zip" ...总的来说,"前端项目-css-element-queries.zip"是一个实践性很强的学习资源,可以帮助开发者提升对前端响应式设计的理解,以及掌握使用JavaScript扩展CSS功能的技巧。
《精通CSS:高级Web标准解决方案》(第三版)是一本深度探讨CSS的权威书籍,旨在帮助读者掌握CSS的精髓和高级技巧。这个压缩包“css-mastery-16.zip”包含了书中所有章节的源代码实例,是学习和实践CSS设计模式的...
在CSS(层叠样式表)领域,掌握一系列实用技巧能够帮助开发者更高效地设计和维护网页样式。以下是一些关键的CSS技巧,这些技巧在实际工作中非常常见且实用。 1. **选择器优化**:使用类选择器(.class)和ID选择器 ...
在Vue 3.0框架中,使用`postcss-pxtorem`是一个有效的方法,可以帮助开发者将CSS中的像素单位(px...希望这篇文章对你在学习和工作中使用Vue 3.0进行响应式布局有所帮助,同时也鼓励你继续探索和实践更多前端开发技巧。
8. **优化技巧**:为了提高网站性能,开发者可能使用CSS Sprites合并小图标,减少HTTP请求;通过设置正确的内容编码和压缩,减小文件大小;并利用浏览器缓存策略,提升页面加载速度。 综上所述,【CSS-DIV鲜花网站...
**CSS-Zeal官方文档详解** ...通过这个“CSS-Zeal官方文档”,开发者可以全面了解和掌握CSS的核心概念、布局技巧和新特性,同时利用Zeal高效地查询和学习。对于提升CSS技能和提高开发效率有着极大的帮助。
在CSS中实现Windows 8风格的按钮,主要涉及到以下几个关键技术和技巧: 1. **扁平化设计**:使用纯色背景,去除多余的阴影和渐变效果,保持界面简洁。可以利用CSS3的`background-color`属性设置按钮的背景颜色。 2...
解决这些问题需要对每个技术有深入的理解,并具备一定的调试技巧。此外,了解MVC(模型-视图-控制器)模式在JSP开发中的应用也很重要,这有助于组织代码,提高可维护性。 总的来说,"个人作业之JSP---CSS---HTML"...
这本书的中文翻译版本为中国的开发者提供了方便,使得理解复杂的CSS语法和技巧变得更加容易。开源的特性使得这个资源更加易于获取和分享,鼓励了学习和交流。 在CSS的世界里,了解和掌握选择器、盒模型、布局、定位...
《CSS大师:创造视觉盛宴的魔法》 在网页设计领域,CSS...理解并掌握这些技巧,对于提升网页设计的品质和用户体验有着极大的帮助。在实际项目中,我们可以根据需求灵活运用,创造出独一无二的网页视觉效果。
7. **CSS优化技巧**:如何减少CSS文件大小,提高页面加载速度,包括选择器性能、避免冗余代码、使用CSS Sprites和CSS Tree Shaking等。 8. **浏览器兼容性处理**:理解不同浏览器对CSS特性的支持情况,学习如何使用...
在CSS(层叠样式表)领域,理解和应用各种CSS技巧对于网页设计至关重要。"CSS-书中素材下载"这个资源提供了一些实例,旨在帮助学习者更好地掌握CSS的核心概念和实际运用。下面,我们将深入探讨这些案例可能涉及的CSS...
本章节主要介绍了网页布局和设计技巧,涵盖了网页布局的定义、网页大小的设计、网页栏目划分、表格布局和CSS布局等方面的知识点。 网页布局的定义 网页布局是指网页整体的布局,包括网页的大小、栏目划分、内容...
《深入理解mini-css-extract-plugin...通过深入理解插件原理,熟悉配置和使用方法,结合问题定位技巧,我们能够有效解决这些问题,确保项目的顺利进行。在实际开发中,不断学习和实践,才能更好地应对各种技术难题。
在实践中,掌握CSS布局与定位技巧能帮助我们创建响应式、灵活且易于维护的网页。不断学习和实践这些知识,将使你成为一名出色的前端开发者。在“css-layout-and-positioning-master”这个压缩包中,可能包含了一系列...
通过查看并理解这些类的定义,开发者能够更好地掌握CSS实现圆角边框的技巧,并将其应用于自己的项目中,提升网页的视觉质量和用户体验。 总之,CSS的`border-radius`属性是现代网页设计中不可或缺的一部分,它简化...
这个练习旨在帮助学习者掌握基础的网页布局、文本处理、图像展示以及CSS样式设计技巧。 【HTML】是HyperText Markup Language的缩写,是用于创建网页的标准标记语言。在这个小练习中,`电影公告.html`文件很可能是...
【CSS--层叠样式表(DOC版)】深入解析 CSS,全称为层叠样式表(Cascading...通过不断学习和实践,可以掌握更多高级技巧,如媒体查询(Media Queries)用于响应式设计,以及CSS预处理器(如Sass和Less)来提高开发效率。