CSS边框

CSS 边框


边框样式

边框样式属性指定要显示什么样的边界。

border-style属性用来定义边框的样式


border-style 值:

  • none: 默认无边框
  • dotted: 定义一个点线框
  • dashed: 定义一个虚线框
  • solid: 定义实线边界
  • double: 定义两个边界。 两个边界的宽度和border-width的值相同
  • groove: 定义3D沟槽边界。效果取决于边界的颜色值
  • ridge: 定义3D脊边界。效果取决于边界的颜色值
  • inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
  • outset: 定义一个3D突出边框。 效果取决于边界的颜色值

实例

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p.none {border-style:none;}
p.dotted {border-style:dotted;}
p.dashed {border-style:dashed;}
p.solid {border-style:solid;}
p.double {border-style:double;}
p.groove {border-style:groove;}
p.ridge {border-style:ridge;}
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden {border-style:hidden;}
</style>
</head>

<body>
<p class="none">无边框。</p>
<p class="dotted">虚线边框。</p>
<p class="dashed">虚线边框。</p>
<p class="solid">实线边框。</p>
<p class="double">双边框。</p>
<p class="groove"> 凹槽边框。</p>
<p class="ridge">垄状边框。</p>
<p class="inset">嵌入边框。</p>
<p class="outset">外凸边框。</p>
<p class="hidden">隐藏边框。</p>
</body>

</html>

边框宽度

您可以通过 border-width 属性为边框指定宽度。

为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。

注意:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p.one 
{
	border-style:solid;
	border-width:5px;
}
p.two 
{
	border-style:solid;
	border-width:medium;
}
p.three
{
	border-style:solid;
	border-width:1px;
}
</style>
</head>

<body>
<p class="one">一些文本。</p>
<p class="two">一些文本。</p>
<p class="three">一些文本。</p>
<p><b>注意:</b> "border-width" 属性 如果单独使用则不起作用。要先使用 "border-style" 属性来设置边框。</p>
</body>

</html>

边框颜色

border-color属性用于设置边框的颜色。可以设置的颜色:

  • name – 指定颜色的名称,如 “red”
  • RGB – 指定 RGB 值, 如 “rgb(255,0,0)”
  • Hex – 指定16进制值, 如 “#ff0000”

您还可以设置边框的颜色为”transparent”。

注意: border-color单独使用是不起作用的,必须得先使用border-style来设置边框样式。

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p.one
{
	border-style:solid;
	border-color:red;
}
p.two
{
	border-style:solid;
	border-color:#98bf21;
} 
</style>
</head>

<body>
<p class="one">实线红色边框</p>
<p class="two">实线绿色边框</p>
<p><b>注意:</b> "border-color" 属性 如果单独使用则不起作用. 要先使用 "border-style" 属性来设置边框。</p>
</body>
</html>

边框-单独设置各边

在CSS中,可以指定不同的侧面不同的边框:

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p
{
	border-top-style:dotted;
	border-right-style:solid;
	border-bottom-style:dotted;
	border-left-style:solid;
}
</style>
</head>

<body>
<p>两个不同的边界样式。</p>
</body>
</html>

也可以设置一个单一属性:

p
{
	border-style:dotted solid ;
}

border-style属性可以有1-4个值:

  • border-style:dotted solid double dashed;

    • 上边框是 dotted
    • 右边框是 solid
    • 底边框是 double
    • 左边框是 dashed
  • border-style:dotted solid double;

    • 上边框是 dotted
    • 左、右边框是 solid
    • 底边框是 double
  • border-style:dotted solid;

    • 上、底边框是 dotted
    • 右、左边框是 solid
  • border-style:dotted;

    • 四面边框是 dotted

上面的例子用了border-style。然而,它也可以和border-width 、 border-color一起使用。


边框-简写属性

上面的例子用了很多属性来设置边框。

你也可以在一个属性中设置边框。

你可以在”border”属性中设置:

  • border-width
  • border-style (required)
  • border-color
<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
p
{
	border:5px solid red;
}
</style>
</head>

<body>
<p>段落中的一些文本。</p>
</body>
</html>

CSS 边框属性

属性 描述
border 简写属性,用于把针对四个边的属性设置在一个声明。
border-style 用于设置元素所有边框的样式,或者单独地为各边设置边框样式。
border-width 简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。
border-color 简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。
border-bottom 简写属性,用于把下边框的所有属性设置到一个声明中。
border-bottom-color 设置元素的下边框的颜色。
border-bottom-style 设置元素的下边框的样式。
border-bottom-width 设置元素的下边框的宽度。
border-left 简写属性,用于把左边框的所有属性设置到一个声明中。
border-left-color 设置元素的左边框的颜色。
border-left-style 设置元素的左边框的样式。
border-left-width 设置元素的左边框的宽度。
border-right 简写属性,用于把右边框的所有属性设置到一个声明中。
border-right-color 设置元素的右边框的颜色。
border-right-style 设置元素的右边框的样式。
border-right-width 设置元素的右边框的宽度。
border-top 简写属性,用于把上边框的所有属性设置到一个声明中。
border-top-color 设置元素的上边框的颜色。
border-top-style 设置元素的上边框的样式。
border-top-width 设置元素的上边框的宽度。

       

 

 

Extjs.GridPanel显示多行工具栏(tbar)

js文件。。  

Ext.onReady(function() {

	//初始化数据
			var proData = {
				records : [{
							proName : "cocobra 居家内衣系列"
						}, {
							proName : "cocobra 休闲内衣系列"
						}]
			}
			
		
			var proCreate = new Ext.data.Record.create([{
						name : "proName",
						mapping : "proName",
						type : "string"
					}]);

			var fields = [{
						name : 'proName',
						mapping : 'proName'
					}];

			
			var proStore = new Ext.data.JsonStore({
						fields : fields,
						data : proData,
						root : 'records'
					});

			var rowNum = new Ext.grid.RowNumberer();  //添加行号
			var projectColumn = new Ext.grid.ColumnModel([rowNum, {
						header : "项目名称",
						width : 160,
						dataIndex : "proName",
						id : "proName",
						sortable : true  //设置排序
					}]);

			//第二個工具欄
			var tbar2 = new Ext.Toolbar({
						renderTo : Ext.grid.GridPanel.tbar,// 其中grid是上边创建的grid容器
						items : [{
									text : '添加',
									iconCls:'addBtn'
								}, {
									xtype : "tbseparator"
								}, {
									text : "删除",
									iconCls : "deleteBtn"   //图片样式, 需要自己寫css樣式,引入手寫的css,如果用自带会因为浏览器不兼容而不显示图片
								}, {
									xtype : "tbseparator"
								}, {
									text : "删除全部",
									iconCls:'deleteBtn'
								}, {
									xtype : "tbseparator"
								}, {
									text : '保存',
									iconCls:'saveBtn'
								}]

					});

	var tbar3 = new Ext.Toolbar({
				renderTo: Ext.grid.GridPanel.tbar,
				items:[new Ext.form.TextField({
					fieldLabel:"测试"
				//	width:100
					//height:30
				})]
			})



			var projectGrid = new Ext.grid.GridPanel({
						renderTo : "hello",
						title : "项目管理",
						widht : 180,
						height : 200,
						cm : projectColumn,
						store : proStore,
						autoScroll : true, // 内容溢出时产生滚动条
						tbar : [new Ext.form.ComboBox({
									store : ["喜羊羊与灰太狼", "cocobra"],    //給ComboBox添加數據
									emptyText : '请选择供应商',
									id : "provider",
									name : "provider",
									editable : false   //是否允許輸入

								})],
						listeners : {     //將第二個bar渲染到tbar裏面,通过listeners事件
							'render' : function() {
								tbar2.render(this.tbar);
          tbar3.render(this.tbar);
							}
						}
					});
		});

— 在按钮旁边添加图片的css样式

.deleteBtn {
   background-image: url(../images/default/dd/drop-no.gif) !important;
   margin-right:5px;
   background-repeat: no-repeat;
}

.addBtn {
   background-image: url(../images/default/dd/drop-add.gif) !important;
   margin-right:5px;
   background-repeat: no-repeat;
}

.saveBtn {
   background-image: url(../images/default/dd/drop-yes.gif) !important;
   margin-right:5px;
   background-repeat: no-repeat;
}

建站DIV+CSS之网页切图过程中div+css命名规则

欢迎访问: www.ptcms.cn

内容:content/container   导航:nav    侧栏:sidebar      
栏目:column   标志:logo   页面主体:main       
广告:banner    热点:hot    新闻:news              
下载:download    子导航:subnav    菜单:menu
搜索:search   页脚:footer    滚动:scroll     
版权:copyright   友情链接:friendlink    子菜单:submenu     
内容:content    标签页:tab   文章列表:list           
注册:regsiter   提示信息:msg   小技巧:tips                                      
加入:joinus   栏目标题:title   指南:guild                  
服务:service   状态:status    投票:vote                   
    尾:footer   合作伙伴:partner   登录条:loginbar
页面外围控制整体布局宽度:wrapper   左右中:left right center               

(二)注释的写法:
/* Footer */
内容区
/* End Footer */ 
 
(三)id的命名:

(1)页面结构
容器: container           页头:header                  内容:content/container            
页面主体:main          页尾:footer                    导航:nav                  
侧栏:sidebar             栏目:column              左右中:left right center
页面外围控制整体布局宽度:wrapper    

(2)导航
导航:nav
主导航:mainbav
子导航:subnav
顶导航:topnav
边导航:sidebar
左导航:leftsidebar
右导航:rightsidebar
菜单:menu         子菜单:submenu         标题: title       摘要: summary

(3)功能
标志:logo
广告:banner
登陆:login
登录条:loginbar
注册:regsiter
搜索:search
功能区:shop
标题:title
加入:joinus
状态:status
按钮:btn
滚动:scroll
标签页:tab
文章列表:list
提示信息:msg
当前的: current
小技巧:tips
图标: icon
注释:note
指南:guild
服务:service
热点:hot
新闻:news
下载:download
投票:vote
合作伙伴:partner
友情链接:link
版权:copyright

(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用”font+字体大小”作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用”类别+功能”的方式命名,如
.barnews { }
.barproduct { }

注意事项:
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写,除非一看就明白的单词.

主要的 master.css             模块 module.css            基本共用 base.css          
主题 themes.css               专栏 columns.css                  打印 print.css   
文字 font.css                     表单 forms.css                      补丁 mend.css                  
布局,版面 layout.css

apache2+resin3.1.5配置

安装apache2

1 . 优化连接数。进入apache安装目录,编辑/server/mpm/worker/worker.c文件,修改参数为#define DEFAULT_SERVER_LIMIT 2560和# define DEFAULT_THREAD_LIMIT 500

2. 编译

./configure --prefix=/home/apache2  --enable-mods-shared='all cache mem-cache disk-cache file-cache' --enable-deflate --enable-rewrite  --enable-headers  --enable-expires  --enable-modules="most" --enable-suexec --with-apr=/usr/local/apr --with-apr-util=/usr/local/apr --enable-rewrite --with-mpm=worker --with-perl --enable-maintainer-mode --enable-so --enable-proxy --enable-proxy-connect --enable-proxy-ftp --enable-proxy-http --enable-proxy-ajp --enable-proxy-balancer --with-z=/usr/lib
make
make install

3.  apache http.conf 加入

<IfModule mpm_worker_module>
ServerLimit 50
ThreadLimit 100
StartServers 3
MaxClients 5000
MinSpareThreads 75
MaxSpareThreads 250
ThreadsPerChild 100
MaxRequestsPerChild 80000
</IfModule>

启动apache测试。

编译resin3.1.5

./configure -with-apxs=/home/apache2/bin/apxs
make
make install

部署工程。

例子:xx工程 /home/user/workspace/xxeSystem

xxSystem子目录:xxProject(存放代码)、 bin(存放resin启动和关闭代码)、 conf(resin.conf)、 log 

静态代码 for apache(html、js、css、image);放到: /home/www/xxProject(工程名)

chown -R daemon:daemon xxProjectt/ (修改权限,apache能访问)

bin的启动代码 start.sh

#!/bin/sh
WORK_PATH=/home/user/workspace/xxSystem
#resin安装目录
RESIN_HOME=/home/user/software/resin-3.1.5
#jdk目录
JAVA_HOME=/home/user/software/jdk1.6.0_03

#如果resin需要工程下的jar包;下面的注释去掉
#CLASSPATH=.;
#libpath=$WORK_PATH/webapp/WEB-INF/lib/
#FILES=`ls $libpath`
#for txt in $FILES;
#do
#    CLASSPATH=$CLASSPATH:$libpath$txt
#done

#echo $CLASSPATH

export RESIN_HOME CLASSPATH JAVA_HOME

$RESIN_HOME/bin/httpd.sh -server xx -conf $WORK_PATH/conf/resin.conf start
#-server search -Xms256m -Xmx512m

stop.sh

#!/bin/sh

WORK_PATH=/home/user/workspace/xxSystem

RESIN_HOME=/home/user/software/resin-3.1.5
JAVA_HOME=/home/user/software/jdk1.6.0_03

export RESIN_HOME JAVA_HOME

$RESIN_HOME/bin/httpd.sh -server xx -conf $WORK_PATH/conf/resin.conf stop

配置apache

vi conf/http.conf

hosts Include conf/extra/httpd-vhosts.conf (注释去掉)

去掉deny from all

添加mod_expires可以减少10%左右的重复请求

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 1 days"
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 days"
ExpiresByType image/jpeg "access plus 1 days"
ExpiresByType image/jpg "access plus 1 days"
ExpiresByType image/png "access plus 1 days"
EXpiresByType application/x-shockwave-flash "access plus 1 days"
EXpiresByType application/x-javascript      "access plus 1 days"
ExpiresByType video/x-flv "access plus 1 days"
</IfModule

vi conf/extra/httpd-vhosts.conf

Listen 1111
NameVirtualHost *:1111
<VirtualHost *:1111>
    ServerAdmin webmaster@dummy-host.example.com
    DocumentRoot "/home/www/xxProject/webapp"
    ServerName url
   ResinConfigServer localhost 6803
</VirtualHost>
备注:6803为resin server端口   <server id="xx" address="127.0.0.1" port="6803"/>

30个为网页设计者和开发人员精选的Firefox扩展插件

原文:30 Best Firefox add-ons

翻译:帕兰

30个为网页设计者和开发人员精选的Firefox扩展插件

Dejan Cancarevic是一名优秀的网页设计者和开发人员,下面他精选了30个他经常使用的Firefox插件,这些插件都能很好的帮助网页设计者和开发人员,简化工作量,或是增加设计应用功能等等。

1. CSSMate – 在线的CSS编辑器扩展插件

2. ViewSourceWith – 让你查看页面资源的Firefox扩展应用

3. PicLens – 变换你的浏览器为一个三维的浏览环境来查看网页图片的Firefox扩展插件

4. FireShot -强大的网页截图/截屏插件

5. SeoQuake – 搜索引擎优化和网站推广插件

6. Font Finder -简单的高亮一个事件并且左键点击弹出菜单可以查看CSS样式

7. Live HTTP Headers – 在浏览网页的同时查看一个页面的HTTP头部信息

8. Modify Headers – 允许你添加、修改或过滤http头部请求信息的Firefox扩展插件

9. CSSViewer -一个简单实用的扩张,可以让你查看当前网页中任何部分的CSS代码

10. EditCSS – 只需要右键点击就可以在浏览器的侧边栏中查看和编辑样式表代码

11. Firebug – 查看,编辑和跟踪 网页上面的CSS, HTML和Javascript的Firefox插件

12. View Formatted Source -为网页上的每一个元素格式化并使用不同的颜色高亮显示

13. Professor X -让你不看源代码就能看到页面头部信息的Firefox插件

14. CSS validator – 一键检查当前网页是否符合W3C CSS 标准的验证器插件

15. Validaty -提供给你一个类似于validator.w3.org的校验器按钮

16. Html Validator – 添加HTML校验器

17. Copy as HTML Link -给选中的文本创建一个当前页面的HTML链接

18. TableTools – 过滤、排序 HTML表格等的Firefox扩展插件

19. CHM Reader – 让Firefox支持HTML编译文件的Firefox扩展插件

20. PageDiff – 帮助网页设计者和开发人员在不同的网页之前查看页面源代码

21. Clipmarks – 让你保存当前页面中的任何元素的Firefox插件

22. SourceEditor – 查看和编辑HTML元素代码的Firefox扩展插件

23. Total Validator -使用官方DTDs提供一个真正的HTML检查器的Firefox扩展插件

24. LinkChecker – 检查任何网页上面的有效链接的Firefox扩展插件

25. Web Developer – 添加一个菜单和工具栏,包含各种网页开发工具的Firefox扩展插件

26. Style Sheet Chooser II – 让你选择网站作者为网站提供的候补风格的Firefox扩展插件

27. View Dependencies -显示网页上面所有被装载的元素信息的Firefox扩展插件

28. Accessibar – 可以轻松地操纵网页显示和文本语音输出的Firefox扩展插件

29. Aardvark – 用来清楚网页的冗余信息和打印网页等功能的Firefox扩展插件

30. JSview – 添加能够查看外部档案源代码的功能

css样式兼容不同浏览器问题

在网站设计的时候,应该注意css样式兼容不同浏览器问题,特别是对完全使用DIV CSS设计的网,就应该更注意IE6 IE7 FF对CSS样式的兼容,不然,你的网乱可能出去不想出现的效果!
所有浏览器 通用 height: 100px;
IE6 专用 _height: 100px;
IE6 专用 *height: 100px;
IE7 专用 *+height: 100px;
IE7、FF 共用 height: 100px !important;
一、CSS 兼容
以下两种方法几乎能解决现今所有兼容.
1, !important (不是很推荐,用下面的一种感觉最安全)
随着IE7对!important的支持, !important 方法现在只针对IE6的兼容.(注意写法.记得该声明位置需要提前.)
代码:
<style>
#wrapper {
width: 100px!important; /* IE7+FF */
width: 80px; /* IE6 */
}
</style>
2, IE6/IE77对FireFox <from 针对firefox ie6 ie7的css样式>
*+html 与 *html 是IE特有的标签, firefox 暂不支持.而*+html 又为 IE7特有标签.
代码:
<style>
#wrapper { width: 120px; } /* FireFox */
*html #wrapper { width: 80px;} /* ie6 fixed */
*+html #wrapper { width: 60px;} /* ie7 fixed, 注意顺序 */
</style>
注意:
*+html 对IE7的兼容 必须保证HTML顶部有如下声明:
代码:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ”http://www.w3.org/TR/html4/loose.dtd”>

二、万能 float 闭合(非常重要!) 可以用这个解决多个div对齐时的间距不对,
关于 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 相同的高度, 再通过 vetical-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.贴上代码:
兼容代码:兼容最推荐的模式。
/* FF */
.submitbutton {
float:left;
width: 40px;
height: 57px;
margin-top: 24px;
margin-right: 12px;
}
/* IE6 */
*html .submitbutton {
margin-top: 21px;
}
/* IE7 */
*+html .submitbutton {
margin-top: 21px;
}
什么是浏览器兼容:当我们使用不同的浏览器(Firefox IE7 IE6)访问同一个网站,或者页面的时候,会出现一些不兼容的问题,有的显示出来正常,有的显示出来不正常,我们在编写CSS的时候会很恼火,刚修复了这个浏览器的问题,结果另外一个浏览器却出了新问题。而兼容就是一种办法,能让你在一个CSS里面独立的写支持不同浏览器的样式。这下就和谐了。呵呵!
最近微软发布的IE7浏览器的兼容性确实给一些网页制作人员添加了一个沉重的负担,虽然IE7已经走向标准化,但还是有许多和FF不同的地方,所以需要用到IE7的兼容,有许多朋友问过IE7的兼容是什么,其实我也不知道。暂时还没找到IE7专用的兼容。除了前面那片文章,《针对firefox ie6 ie7的css样式》中的兼容方式也是很好用的。
有一点逻辑思想的人都会知道可以用IE和FF的兼容结合起来使用,下面介绍三个兼容,例如:(适合新手,呵呵,高手就在这里路过吧。)
程序代码
第一个兼容,IE FF 所有浏览器 公用(其实也不算是兼容)
height:100px;
第二个兼容 IE6专用
_height:100px;
第三个兼容 IE6 IE7公用
*height:100px;
介绍完了这三个兼容了,下面我们再来看看如何在一个样式里分别给一个属性定义IE6 IE7 FF专用的兼容,看下面的代码,顺序不能错哦:
程序代码
height:100px;
*height:120px;
_height:150px;
下面我简单解释一下各浏览器怎样理解这三个属性:
在FF下,第2、3个属性FF不认识,所以它读的是 height:100px;
在IE7下,第三个属性IE7不认识,所以它读第1、2个属性,又因为第二个属性覆盖了第一个属性,所以IE7最终读出的是第2个属性 *height:120px;
在IE6下,三个属性IE6都认识,所以三个属性都可以读取,又因为第三个属性覆盖掉前2个属性,所以IE6最终读取的是第三个属性。
1 针对firefox ie6 ie7的css样式
现在大部分都是用!important来兼容,对于ie6和firefox测试可以正常显示,但是ie7对!important可以正确解释,会导致页面没按要求显示!找到一个针对IE7不错的兼容方式就是使用“*+html”,现在用IE7浏览一下,应该没有问题了现在写一个CSS可以这样:
#1 { color: #333; } /* Moz */
* html #1 { color: #666; } /* IE6 */
*+html #1 { color: #999; } /* IE*/

那么在firefox下字体颜色显示为#333IE6下字体颜色显示为#666,IE7下字体颜色显示为#999。
2 css布局中的居中问题
主要的样式定义如下:
body {TEXT-ALIGN: center;}
#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }
说明:
首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中;对于IE这样设定就已经可以了。
但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”
需要说明的是,如果你想用这个方法使整个页面要居中,建议不要套在一个DIV里,你可以依次拆出多个div,只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。
3 盒模型不同解释.
#box{
width:600px;
//for ie6.0- w\idth:500px;
//for ff+ie6.0
}
#box{
width:600px!important
//for ff
width:600px;
//for ff+ie6.0
width /**/:500px;
//for ie6.0-
}
4 浮动ie产生的双倍距离
#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会产生200px的距离 display:inline; //使浮动忽略}
这里细说一下block,inline两个元素,Block元素的特点是:总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是:和其他元素在同一行上,…不可控制(内嵌元素);
#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的的效果

iplay:table;

5 IE与宽度和高度的问题
IE不认得min-这个定义,但实际上它把正常的width和height当作有min的情况来使。这样问题就大了,如果只用宽度和高度,正常的浏览器里这两个值就不会变,如果只用min-width和min-height的话,IE下面根本等于没有设置宽度和高度。比如要设置背景图片,这个宽度是比较重要的。要解决这个问题,可以这样:

#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}

6 页面的最小宽度
min-width是个非常方便的CSS命令,它可以指定元素最小也不能小于某个宽度,这样就能保证排版一直正确。但IE不认得这个,而它实际上把 width当做最小宽度来使。为了让这一命令在IE上也能用,可以把一个<div> 放到 <body> 标签下,然后为div指定一个类:
然后CSS这样设计:
#container{
min-width: 600px;
width:e-xpression(document.body.clientWidth < 600  “600px”: “auto” );
}
第一个min-width是正常的;但第2行的width使用了Javascript,这只有IE才认得,这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

7 清除浮动
.兼容box{
display:table;
//将对象作为块元素级的表格显示
}
或者
.兼容box{
clear:both;
}
或者加入:after(伪对象),设置在对象后发生的内容,通常和content配合使用,IE不支持此伪对象,非Ie 浏览器支持,所以并不影响到IE/WIN浏览器。这种的最麻烦的
……#box:after{
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}
8 DIV浮动IE文本产生3象素的bug
左边对象浮动,右边采用外补丁的左边距来定位,右边对象内的文本会离左边有3px的间距.
#box{
float:left;
width:800px;}
#left{
float:left;
width:50%;}
#right{
width:50%;
}
*html #left{
margin-right:-3px;
//这句是关键
}
HTML代码
<DIV id=box>
<DIV id=left></DIV>
<DIV id=right></DIV>
</DIV>

9 属性选择器(这个不能算是兼容,是隐藏css的一个bug)
p[id]{}div[id]{}
p[id]{}div[id]{}

这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用
属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
10 IE捉迷藏的问题
当div应用复杂的时候每个栏中又有一些链接,DIV等这个时候容易发生捉迷藏的问题。
有些内容显示不出来,当鼠标选择这个区域是发现内容确实在页面。
解决办法:对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。
11 高度不适应
高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节,特别是当内层对象使用
margin 或paddign 时。例:
<div id=”box”>
<p>p对象中的内容</p>
</div>
CSS:
#box {background-color:#eee; }
#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }
解决方法:在P对象上下各加2个空的div对象CSS代码:.1{height:0px;overflow:hidden;}或者为DIV加上border属性。
屏蔽IE浏览器(也就是IE下不显示)
*:lang(zh) select {font:12px !important;} /*FF,OP可见*/
select:empty {font:12px !important;} /*safari可见*/
这里select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。
仅IE7识别
*+html {…}
当面临需要只针对IE7做样式的时候就可以采用这个兼容。
IE6及IE6以下识别
* html {…}
这个地方要特别注意很多地主都写了是IE6的兼容其实IE5.x同样可以识别这个兼容。其它浏览器不识别。
html/**/ >body select {……}
这句与上一句的作用相同。
仅IE6不识别
select { display /*IE6不识别*/:none;}
这里主要是通过CSS注释分开一个属性与值,流释在冒号前。
仅IE6与IE5不识别
select/**/ { display /*IE6,IE5不识别*/:none;}
这里与上面一句不同的是在选择符与花括号之间多了一个CSS注释。
仅IE5不识别
select/*IE5不识别*/ { display:none;}
这一句是在上一句中去掉了属性区的注释。只有IE5不识别

盒模型解决方法
selct {width:IE5.x宽度; voice-family :””}””; voice-family:inherit; width:正确宽度;}
盒模型的清除方法不是通过!important来处理的。这点要明确。

清除浮动
select:after {content:”.”; display:block; height:0; clear:both; visibility:hidden;}
在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除浮动的兼容来对父级做一次定义,那么就可以解决这个问题 。

截字省略号
select { -o-text-overflow:ellipsis; text-overflow:ellipsis; white-space:nowrapoverflow:hidden; }
这个是在越出长度后会自行的截掉多出部分的文字,并以省略号结尾,很好的一个技术。只是目前Firefox并不支持。

只有Opera识别
@media all and (min-width: 0px){ select {……} }
针对Opera浏览器做单独的设定。

以上都是写CSS中的一些兼容,建议遵循正确的标签嵌套(div ul li 嵌套结构关系),这样可以减少你使用兼容的频率,不要进入理解误区,并不是一个页面就需要很多的兼容来保持多浏览器兼容),很多情况下也许一个兼容都不用也可以让浏览器工作得非常好,这些都是用来解决局部的兼容性问题,如果希望把兼容性的内容也分离出来,不妨试一下下面的几种过滤器。这些过滤器有的是写在CSS中通过过滤器导入特别的样式,也有的是写在HTML中的通过条件来链接或是导入需要的补丁样式。

IE5.x的过滤器,只有IE5.x可见
@media tty {
i{content:””;/*” “*/}} @import ’ie5win.css’; /*”;}
}/* */

IE5/MAC的过滤器,一般用不着
/**//*/
@import “ie5mac.css”;
/**/

下面是IE的条件注释,个人觉得用条件注释调用相应 兼容是比较完美的多浏览器兼容的解决办法。把需要兼容的地方单独放到一个文件里面,当浏览器版本符合的时候就可以调用那个被兼容的样式,这样不仅使用起来非常方便,而且对于制作这个CSS本身来讲,可以更严格的观察到是否有必要使用兼容,很多情况下,当我本人写CSS如果把全部代码包括兼容都写到一个CSS文件的时候的时候会很随意,想怎么兼容就怎么兼容,而你独立出来写的时候,你就会不自觉的考虑是否有必要兼容,是先兼容 CSS?还是先把主CSS里面的东西调整到尽可能的不需要兼容?当你仅用很少的兼容就让很多浏览器很乖很听话的时候,你是不是很有成就感呢?你知道怎么选择了吧~~呵呵

IE的if条件兼容 自己可以灵活使用参看这篇IE条件注释
Only IE
所有的IE可识别

只有IE5.0可以识别
Only IE 5.0+
IE5.0包换IE5.5都可以识别

仅IE6可识别
Only IE 7/-
IE6以及IE6以下的IE5.x都可识别
Only IE 7/-
仅IE7可识别

Css 当中有许多的东西不不按照某些规律来的话,会让你很心烦,虽然你可以通过很多的兼容,很多的!important 来控制它,但是你会发现长此以往你会很不甘心,看看许多优秀的网站,他们的CSS让IE6,Ie7,Firefox,甚至Safari,Opera运行起来完美无缺是不是很羡慕?而他们看似复杂的模版下面使用的兼容 少得可怜。其实你要知道IE 和 Firefox 并不不是那么的不和谐,我们找到一定的方法,是完全可以让他们和谐共处的。不要你认为发现了兼容的办法,你就掌握了一切,我们并不是兼容的奴隶。

div ul li 的嵌套顺序

今天只讲一个规则。就是<div><ul><li>的三角关系。我的经验就是<div>在最外面,里面是<ul>,然后再是<li>,当然<li>里面又可以嵌套<div>什么的,但是并不建议你嵌套很多东西。当你符合这样的规则的时候,那些倒霉的,不听话的间隙就不会在里面出现了,当你仅仅是<div>里面放<li>,而不用<ul>的时候,你会发现你的间隙十分难控制,一般情况下,IE6和IE7会凭空多一些间距。但很多情况你来到下一行,间隙就没了,但是前面的内容又空了很大一块,出现这种情况虽然你可以改变IE的Margin,然后调整Firefox下面的Padding,以便使得两者显示起来得效果很相似,但是你得CSS将变得臭长无比,你不得不多考虑更多可能出现这种问题补救措施,虽然你知道千篇一律来兼容它们,但是你会烦得要命。

具体嵌套写法

遵循上面得嵌套方式,<div><ul><li></li></ul></div> 然后在CSS 里面告诉 ul {Margin:0px;Padding:0px;list-style:none;},其中list-style:none是不让<li>标记的最前方显示圆点或者数字等目录类型的标记,因为IE和Firefox显示出来默认效果有些不一样。因此这样不需要做任何手脚,你的IE6、和IE7、Firefox显示出来的东西(外距,间距,高度,宽度)就几乎没什么区别了,也许细心的你会在某一个时刻发现一、两个象素的差别,但那已经很完美了,不需要你通过调整大片的CSS来控制它们的显示了,你愿意,你可以仅仅兼容一两个地方,而且通常这种兼容可以适应各种地方,不需要你重复在不同的地方调试不同的兼容方式–减轻你的烦。你可以ul.class1, ul.class2, ul.class3 {xxx:xxxx}的方式方便的整理出你要兼容的地方,而统一兼容。尝试一下吧,再也不要乱嵌套了,虽然在Div+CSS的方式下你几乎可以想怎么嵌套就怎么嵌套,但是按照上面的规律你将轻松很多,从而事半功倍!

发布一个基于Prototype和Canvas实现的仿Google导航条

前几天在一个叫做友财网的地方发现这个好玩的导航,比较喜欢,看了看原始的html代码结构,发现比较臃肿,而且不符合web标准,用了表格来布局,最要命的是在a标签下嵌套了div,大家都知道,inline元素下面是不能包含block元素的:(

对于我这个极端主义分子,还有什么好说的呢,既然喜欢俺就自己做一个得了!因为讨厌无意义的标记,所以考虑用canvas来实现提示框的绘制,因此页面上需要引入google的excanvas库,增大了下载量,比较遗憾,如果你觉得无法忍受,那么可以暂时等等,或许接下来我会改成css圆角实现的,等不及的话自己改改源码得了 ,不是很难^_^

原理主要是按某个时间间隔动态修改元素背景图的backgroundPosition值,产生动画错觉,至于提示信息的边框圆角和箭头,都可以用canvas画,减少了图片。

如果大家感兴趣,接下来可以写一篇教程,详细介绍其实现过程关键点技术

附件是效果图以及源码。欢迎交流:)

使用方法:

首先,依次引入prototype.js,effects.js,excanvas.js(这个需要用到IE的条件注释),navigation.js,以及navigation.css样式表,然后在需要生成导航的位置放上以下HTML结构:

    
<div id='example' class='navigation'>
    <ul>
        <li>
            <a href='#' title='这里的内容将被放到提示框'>文字</a>
        </li>
        ……重复上述<li>元素即可构造多个连接
    </ul>
</div>
    

然后,在页面载入完毕之后,初始化导航对象,参数为一对象字面量构造”{wrap:’上述HTML代码里面最外层div的id,这里为”example”‘,duration:’每帧间隔时间(秒)’}”,如下:


new Navigation({wrap:'example',duration:0.1});

这样一来就生成了你自己漂亮的导航条了,呵呵。综合说来,这个实现HTML标签结构简洁清晰,而且圆角不需要任何额外的图片,灵活度高。

  • 描述: 静态效果图,推荐大家下载源码观看最好:)
  • 大小: 10.6 KB

[转贴]DWMX设计360度全景滚动效果图

网页上欣赏到360度的全景照片是一件很有趣的事,不要担心制作过程会很复杂,我们在这里介绍一种最简单的方法,同样可以达到效果,学起来很容易,只要会一点点html和css的基本语法就足够了。
 
注意:这个效果只有用IE浏览器才能看到。下面我们来看看整个的制作过程:

第一步:准备一张全景图片。

您可以自己拍也可以从网上下载。当然如果您摄影技术足够高的话我还是建议你自己拍一张(题材如家庭居室的全景等),这样显得更加生动一些;如果你和我一样是个摄影菜鸟,那么还是在网上找一幅吧,如果也不是那么好找,我这里提供给你两幅照片:

国忌日将网站变灰的方法

1、首页

    首页建议不要加滤镜,这样会影响网站的访问速度,建议重新创建一个css文件将文字图片全部变成灰色。

2、非首页

    使用css的滤镜效果

<style>html{filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);}</style>

这段话单独使用,不要将其中的内容嵌入其他style中,同时将网页的头改成

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

或者

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html>

就可以实现了,但是该方法只支持IE以及使用IE核心的浏览器,不支持firefox。