PaulLeder--程序部落 - CSS

CSS实现DIV内容垂直及水平居中

paulleder@msn.com(PaulLeder) — Thu,02 Jul 2009 23:22:17 +0800

引用内容

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

CSS实现DIV内容垂直及水平居中

xhtml代码：

CSS实现DIV内容垂直及水平居中CSS实现DIV内容垂直及水平居中CSS实现DIV内容垂直及水平居中
http://i3.6.cn/cvbnm/fd/79/ff/e64ebebb5d5c547073ff673e060a202f.jpg" alt="" />

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank" rel="external">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank" rel="external">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS实现DIV内容垂直及水平居中</title>
<style type="text/css"> 
#container {width:750px; height:600px; background:#f8f8f8; border:5px solid #777; text-align:center; display:table-cell; vertical-align:middle;}
</style> 

</head>
<body>
xhtml代码：
<div id="container"> 
<span id="fixie"></span>  
<span id="fixiecontainer">CSS实现DIV内容垂直及水平居中CSS实现DIV内容垂直及水平居中CSS实现DIV内容垂直及水平居中<br />http://i3.6.cn/cvbnm/fd/79/ff/e64ebebb5d5c547073ff673e060a202f.jpg</a>" alt="" /></span> 
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

纯css完美地解决图片在div内垂直水平居中

引用内容

HTML代码

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.img_v {
display:table-cell !important;
display:block;
position:static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vertical-align:middle;
text-align:center;
}
.img_v p {
display:table-cell !important;
display:block;
margin:0;
position:static !important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_v img {
position:static !important;
position:relative;
top:auto !important;
top:-50%;
left:auto !important;
left:-50%;
}
</style>
</head>
<body>
<div class="img_v">
  <p>http://code.dlstu.cn/skins/simple_yellow/title.jpg</a>"></p>
</div>
</body>
</html></div></div>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
.img_v {
display:table-cell !important;
display:block;
position:static !important;
position:relative;
overflow:hidden;
width:400px;
height:400px;
border:1px solid #000;
vertical-align:middle;
text-align:center;
}
.img_v p {
display:table-cell !important;
display:block;
margin:0;
position:static !important;
position:absolute;
top:50%;
left:50%;
width:400px;
margin-left:auto;
margin-right:auto;
}
.img_v img {
position:static !important;
position:relative;
top:auto !important;
top:-50%;
left:auto !important;
left:-50%;
}
</style>
</head>
<body>
<div class="img_v">
  <p>http://code.dlstu.cn/skins/simple_yellow/title.jpg</a>"></p>
</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

Visual CSS下载

paulleder@msn.com(PaulLeder) — Wed,01 Jul 2009 14:20:05 +0800

Visual CSS下载还算不错了，偶个人看了一下，除了W3C验证提供了快捷方式外基本上和VS里面的CSS编辑器差不多，也许适合一些用户使用。就做了一个记录
下载地址：http://css.webchat.com.cn/VisualCSS/download.aspx

tab样式组合排版

paulleder@msn.com(PaulLeder) — Wed,24 Jun 2009 16:37:17 +0800

最近公司商城后台排版的，是我“设计”加排版。参考了163 blog和alibaba 支付宝.
效果预览：

代码如下：

引用内容

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

    无标题页

                    http://www.ppneed.com/user/20/default/thumb_633803094523281250.jpg" width="60" height="60" border="0"/>paulleder!
                    积分:1024
                    上次登录:06-22 17:55

管理导航

我的订单

我的地址薄

我的评论

所有订单

待支付订单

等待发货订单

确认收货订单

交易完成订单

这里是主体部分

在线浏览

HTML代码

/*global*/
		.clear{display:block;clear:both;height:10px;}

/*comment part*/
		.detail_tab_part{background-color:white;margin-top:10px;height:25px;}
		.detail_tab_part li{border:1px #B8B8B8 solid;border-width:1px 1px 0px;float:left;height:25px;line-height:24px;width:100px;margin-right:3px;cursor:pointer;font-size:12px;position:relative;_top:1px;height:25px;}
		.detail_tab_part li.curr{background-color:#F7F7F7;cursor:pointer;font-weight:800;position:relative;_top:1px;font-size:14px;margin-bottom:1px;height:25px;}

.mainbody{overflow:hidden;height:1%;background:url(<a href="http://www.ppneed.com/shopping/user/images/main_bg.gif" target="_blank" rel="external">http://www.ppneed.com/shopping/user/images/main_bg.gif</a>);}
		.main_left{float:right;width:222px;overflow:hidden;height:1%;text-align:left;}
		.main_right{float:left;width:775px;overflow:hidden;height:1%;}

.userInfo{border-bottom:1px #999 dashed;}
		.userInfo strong{display:block;text-align:left;padding-left:10px;line-height:160%;}
		.userInfo strong i{font-style:normal;font-weight:normal;font-size:12px;}
		.userInfo strong img{float:left;margin-right:7px;margin-top:8px;border:1px #ccc solid;padding:1px;}
		.userInfo strong.last{margin-bottom:10px;}

.nav_hd{height:30px;line-height:30px;display:block;padding-left:40px;border-bottom:1px #BFBFBF solid;color:#A10C04;}
		.user_nav{list-style-type:none;margin-top:10px;}
		.user_nav li{height:30px;line-height:30px;display:block;padding-left:50px;background:url(/shopping/images/reddot.jpg) 40px 12px no-repeat;}
		.user_nav li a{color:Black;text-decoration:none;display:block;}
		.user_nav li a:focus{outline:none;}
		.user_nav li.liline{font-size:1px;height:1px;line-height:1px;border-bottom:1px solid #ccc;margin:5px 0px 5px 10px;width:140px;background:none;}
		.user_nav li.current{border-color:#B8B8B8 #B8B8B8 #B8B8B8 #FFFFFF;border-width:1px;border-style:solid;background-color:White;width:150px;}
		.user_nav li.current a{font-weight:700;}

.comment{border:#B8B8B8 1px solid;line-height:200%;text-align:left;background-color:#F7F7F7;}
    </style>
</head>
<body>
    <div id="contenter">
        <div class="mainbody">
	        <div class="main_left">
	            <div class="userInfo">
	              <strong>
	                http://www.ppneed.com/user/20/default/thumb_633803094523281250.jpg</a>" width="60" height="60" border="0"/>paulleder!</strong>
	                <strong>积分:<i>1024</i></strong>
	                <strong class="last">上次登录:<i>06-22 17:55</i></strong>
	            </div>
	            <div class="nav_hd"><strong>管理导航</strong></div>
	            <ul class="user_nav">
	                <li class="current"><a href="javascript:void(0)" hidefocus="true">我的订单</a></li>
	                <li class=""><a href="javascript:void(0)" hidefocus="true">我的地址薄</a></li>
	                <li class=""><a href="javascript:void(0)" hidefocus="true">我的评论</a></li>
	            </ul>
	        </div>
	        <div class="main_right">
			    <ul class="detail_tab_part">
			        <li class="curr">所有订单</li>
			        <li class="">待支付订单</li>
			        <li class="">等待发货订单</li>
			        <li class="">确认收货订单</li>
			        <li class="">交易完成订单</li>
			    </ul>
				<div class="comment">
	                 这里是主体部分
	           </div>
	    </div>
	</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

包含的图片/attachments/month_0906/w2009624163523.gif

完整DEMO包：
点击下载此文件

对横向TAB部分剖析
HTML代码：

引用内容

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">

    demo

新帖

周热门帖

热门帖

内容部分

CSS代码：

引用内容

body{font-size:12px;}
ul,li{margin:0;padding:0;border:0}

.tab{list-style-type:none;margin-left:20px;margin-top:10px;height:25px;}
.tab li{float:left;width:80px;height:24px;margin-right:1px;background-color:#A4A4A4;border:1px #C4C4C4 solid;border-bottom-width:0px;line-height:220%;text-align:center;position:relative;top:1px;cursor:pointer;color:white;}
.tab li.current{background-color:white;color:black;font-weight:bold;}

.tabContent{border-top:1px #C4C4C4 solid;}

解析：

引用内容

1、HTML代码结构就不解析了，就两部分，一部分是tab部分用ul/li完成，另一部分是tab内容，用div完成，这里需给div加一个border-top样式，以和tab的边框结合。
2、样式部分：
a）、ul,li{margin:0;padding:0;border:0} 是为了做浏览器兼容处理
b）、.tab{list-style-type:none;margin-left:20px;margin-top:10px;height:25px;}这里是删除ul的默认list-style-type样式，设置边距，这里需要设置height属性，注意：这里不能设置overflow:hidden这样的样式。否则在current样式下FF下仍然会出现tab底线。
c）、.tab li{float:left;width:80px;height:24px;margin-right:1px;background-color:#A4A4A4;border:1px #C4C4C4 solid;border-bottom-width:0px;line-height:220%;text-align:center;position:relative;top:1px;cursor:pointer;color:white;}，这里主要的几个属性是height:需要比ul上定义的height小1px。position:relative;top:1px;是为了兼容IE6所做的处理。

全部完成。

如何去掉点击链接时周围的虚线框outline属性

paulleder@msn.com(PaulLeder) — Wed,17 Jun 2009 18:06:03 +0800

以下是解决方案：

方法一：
在IE下是使用html属性：hideFoucs，在HTML标签中加上hidefocus=”true” 属性即可，但这个属性是IE私有的，Firefox是不认的。

<a href="#" hidefocus="true" title="加了hidefocus" >欢迎来到博客园（加了hidefocus属性）a>
Firefox的处理方法比较符合标准，只需要在样式里设置a:focus{outline:none}皆可：

.xzw_test a.setFocus:focus{outline:none}

方法二：

通过javascript方法让其点击后失去焦点从而达到没有虚线框，也不失为一种曲线救国的方案：

//通过判断可以指定某个必要的链接失去焦点
if(j(this).attr("id")=="jsControl") j(this).blur();

可以导入font-face?

paulleder@msn.com(PaulLeder) — Tue,07 Apr 2009 16:18:40 +0800

Summary

@font-face provides an @rule to specify a web font that needs to be downloaded to render the web page as expected by the page author.

Syntax

@font-face {
  font-family: ;
  src: ;
}

Values

: specify a font name that will be used as font face value for font properties.
: URL for the remote font file location.

Notes

Fonts use HTTP access controls to determine whether or not they may be loaded from other hosts.

Firefox supports TrueType and OpenType fonts.

Note: Because there are no defined MIME types for TrueType and OpenType fonts, the MIME type of the file specified is not considered.

When rendering a page using downloaded fonts, Firefox first renders using available fonts, then updates the display as downloadable fonts are retrieved. This allows the content to render quickly and refresh to match the intended look over time.

Examples

View live sample



  Web Font Sample
  


  This is Bitstream Vera Serif Bold.

Specifications

Browser compatibility

Browser	Lowest Version
Internet Explorer	?
Firefox	3.5
Opera	10 alpha
Safari	3

超链接样式的正确顺序（link-visited-hover-active）

paulleder@msn.com(PaulLeder) — Fri,20 Feb 2009 15:51:14 +0800

超链接A的4个CSS属性是有顺序的。
错误的顺序会导致一些问题，例如：超链接访问过后 hover 样式就不出现。

正确的顺序应该为，link-visited-hover-active。

a:link {
color: #676777;
text-decoration: none;
}

a:visited {
color: #676777;
text-decoration: none;
}

a:hover {
color: #90909F;
text-decoration: underline;
}

a:active {
color: #676777;
text-decoration: none;
}

温故而知新：

a:link 设置 a 对象在未被访问前的样式。 a:visited 设置 a 对象在其链接地址已被访问过时的样式。 a:hover 设置 a 对象在其鼠标悬停时的样式。 a:acitve 设置 a 对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样

一个便于记忆的LOVE原则（爱恨原则）

LoVe/HAte

即四种伪类的首字母:LVHA

IE6 FIxed

paulleder@msn.com(PaulLeder) — Tue,04 Nov 2008 21:11:04 +0800

点击下载此文件
这个German的作者真的很有意思，也很细心，我真的没能跟他比了～佩服佩服～！

rel--在群里看到的就转载一下

paulleder@msn.com(PaulLeder) — Thu,23 Oct 2008 17:06:38 +0800

rel 属性 -- rel属性,描述了当前页面与href所指定文档的关系.

    * rel属性通常出现在a,link标签中
    * 属性值
          o alternate -- 定义交替出现的链接
          o appendix -- 定义文档的附加信息
          o bookmark -- 书签
          o chapter -- 当前文档的章节
          o contents
          o copyright -- 当前文档的版权
          o glossary -- 词汇
          o help -- 链接帮助信息
          o index -- 当前文档的索引
          o next -- 记录文档的下一页.(浏览器可以提前加载此页)
          o nofollow -- 不被用于计算PageRank
          o prev -- 记录文档的上一页.(定义浏览器的后退键)
          o section -- 作为文档的一部分
          o start -- 通知搜索引擎,文档的开始
          o stylesheet -- 定义一个外部加载的样式表
          o subsection -- 作为文档的一小部分
    * rel是relationship的英文缩写.

父层自适应子层高度

paulleder@msn.com(PaulLeder) — Thu,24 Jul 2008 19:04:59 +0800

1、在父层增加float:left;或float:right;属性；
2、在父层增加
overflow:auto;（兼容IE7/FF）
zoom:100%或zoom:1（兼容IE6）[IE6]
IE浏览器还可以:height:1%;[只要是百分比就可以]

例子：

引用内容

这里是用户资是用户是用户料信息

这里是主题内容

解决1CSS：

引用内容

#bodyer{border:1px red solid;float:left;}
#bodyer .siderbar{float:left;background-color:#fffbf4;width:200px;height:100%;}
#bodyer .mainbody{float:right;background-color:#fffbf4;width:200px;}

解决2CSS：

引用内容

#bodyer{border:1px red solid;zoom:100%;height:1%;overflow:auto;}
#bodyer .siderbar{float:left;background-color:#fffbf4;width:200px;height:100%;}
#bodyer .mainbody{float:right;background-color:#fffbf4;width:200px;}

层定位原理

paulleder@msn.com(PaulLeder) — Wed,23 Jul 2008 22:08:01 +0800

“为何我的层不会老老实实地显示在它该在的位置上？”，这个问题算是在学习“用DIV+CSS制作网页”的过程中问得最多的问题之一了，这次我们将学习如何驾驭它。
作者：COOANT
最后更新日期：2007年12月24日

一、概述

本文以标签“

”为例进行讲解，部分内容同样适用于部分其它块(block)标签元素。
本文中的范例通过测试的浏览器为IE6、IE7、Firefox2。

我们在平时的网页制作中，已经或多或少的接触过CSS样式表中的“position(位置)”属性，其实这基本算是定位根源所在了。当然了，这并不是全部，如果再加上“float”、“z-index”等属性，我们的层定位将会更加完美。下面我们将一一讲解：

二、position属性

position属性有五个取值，分别为：static, relative, absolute, fixed, inherit, 其中“static”为默认值。

·static

该值为position的默认值，可以省略不写，当position取值为static或者没有设置position属性的时候，div的显示方式为按文本流的顺序从上至下，或者从左到右顺序显示。
例如：

层一

层二

源代码如下：

层一

层二

.style {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    margin-bottom:5px;
}

·relative

相对定位，相对于什么位置呢？官方手册中是这样说的：“Relative position that is offset from the initial normal position in the flow.”可以简单的如此解释：偏移文本流中最初的位置。最初位置也就是当position取值为static时的位置，也就是说这里的相对定位是相对于它在正常情况下的默认位置的。下图列出了偏移产生前后的位置关系：

完整的代码如下：
偏移前：

层一

层二

偏移后：

层一

层二

结合以上图示和CSS样式表可以得出以下两个结论：

设置了position:relative而不设置left,top等属性的时候，层显示的位置和不设置position属性或者position值取static时一样。
当一个层设置了position:relative，而且使得层位置产生相对偏移时，并不影响文本流中接下来的其他层的位置。

另外我们还可以做如下尝试，当层二对应的css样式表“style2”不设置position:relative时，会发现层一偏移后重叠时，层一覆盖了层二。而不是我们图示上层二覆盖了层一。
原因时这样的，当设置了position:relative，层的层叠级别高于默认的文本流级别。当然了，如果都设置了position:relative，同等级别下将会按照文本流的顺序层叠显示。

·absolute

    绝对定位，回忆一下，当我们设置position的值为static或者relative时，层依然存在于文本流中，也就是不管位置是否偏移，文本流中依然为它保留了该有的位置。但当层设置了position:relative并产生偏移（设置了top,left等值）时，该层将完全从文本流中脱离，进而以该层所在的父容器的坐标原点为参考点进行偏移，可以这理解，该层已经和同级容器中的其它元素脱离了关系，也不会对其它元素产生人和影响（当它不存在！）。
    注意：如果父容器没有设置position属性或position值为static时，将以body的坐标原点为参考。

    下面我们以三个图示来分别说明。

上面三个页面效果的css样式表如下：

页面一：

页面二：

页面三：

    通过以上的范例和理论说明，我们应该从原理上理解了absolute定位。这里补上官方对于absolute的解释：
    “Taken out of the flow and offset according to the containing block. ”

    截至这里，希望各位可以稍作休息，尝试修改上面范例中的css属性，做到举一反三，充分理解。

·fixed

固定定位，它的效果类似常见的浮动广告，无论如何拖动浏览器的滚动条，层始终悬浮在浏览器的某个位置。由于该属性只能被Firefox很好的支持，虽然可以在通过其它设置在IE6.0中得到同样的效果，但由于本文篇幅原因，不继续对本属性继续作解释。下面的经典案例中将会有相关解释。

·inherit

继承，和其它属性的继承一样。在这里为继承父元素中的position值。

三、top,right,bottom,left属性

这四个属性中的top和left属性之前有使用过（right和bottom用法也一样），大致功能我们基本已经清楚了，这里再简单介绍一下。

这四个属性在设置了position属性，并且值不为static时生效。当position取值relative时，偏离文本流初始位置；当position取值absolute时，以父容器对应的初始点为原点偏移，如果父容器没有设置positon或者position取值static时，以body对应的坐标点为参考点偏移。 top,right,bottom,left属性的取值除了具体的数值外，还可以是百分比、继承、或者auto（默认值）。

四、float属性

取值包括inherit，left，right以及默认值none，该属性用于控制文本流的显示方向。需要注意的是如果设置了该属性并取值为left或right后，会影响到该流后面的其它盒子模型。可以通过设置“clear:both;”清除该属性设置。例如：

层一

层二

层三

源代码如下：

层一

层二

层三

.style1 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    float:left;
    margin-bottom:5px;
}
.style2 {
    border:1px solid #999900;
    background-color:#CCFF99;
    width:80px;
    height:80px;
    clear:both;
    margin-bottom:5px;
}

需要注意的是由于float控制的是文本流方向，当为层设置了“position:absolute;”后，float将不再有效，应为此时层已经脱离该文本流。

五、z-index属性

该属性在设置了position并取值为“absolute”或“relative”时有效，用于控制层在Z- 轴上的排列顺序，值为整数（由于不同浏览器的兼容性的区别，最好是正整数），取值越大层越在最上面。

PaulLeder--程序部落 - CSS

CSS实现DIV内容垂直及水平居中

Visual CSS下载

tab样式组合排版

如何去掉点击链接时周围的虚线框outline属性

可以导入font-face?

Summary

Syntax

Values

Notes

Examples

Specifications

Browser compatibility

See also

超链接样式的正确顺序（link-visited-hover-active）

IE6 FIxed

rel--在群里看到的就转载一下

父层自适应子层高度

层定位原理

一、概述

二、position属性

·static

·relative

·absolute

·fixed

·inherit

三、top,right,bottom,left属性

四、float属性

五、z-index属性