2010-06-28 CSS命名规则

头：header

　　内容：content/containe

　　尾：footer

　　导航：nav

　　侧栏：sidebar

　　栏目：column

　　页面外围控制整体布局宽度：wrapper

阅读全文>　

Tags: CSS,命名规则,

分类:技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 132

2009-05-12 页面变黑白CSS代码-为了悼念

基本CSS代码：html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

需要条件：页面需符合W3C标准，<!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">

适用浏览器范围：IE

阅读全文>　

Tags: 悼念,黑白,CSS,

分类:技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 893

2008-12-26 纯CSS代码实现图片切换翻页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />

<style>

dl {
 position:absolute;
 width:389px;
 height:154px;
 border:10px solid #eee;
 }
dd {
 margin:0;
 width:389px;
 height:154px;
 overflow:hidden;
 }
img {
 border:1px solid black;
 width:389px;height:354px;
 }
dt {
 position:absolute;
 right:3px;
 top:50px;
 }
a {
 display:block;
 margin:1px;
 width:20px;
 height:20px;
 text-align:center;
 font:700 12px/20px "宋体",sans-serif;
 color:#fff;
 text-decoration:none;
 background:#666;
 border:1px solid #fff;
 filter:alpha(opacity=40);
 opacity:.4;
 }
a:hover {
 background:#000
 }
</style>
</head>
<body>
<dl>
<dt><a href="#a" title="">1</a><a href="#b" title="">2</a><a href="#c" title="">3</a></dt>
<dd>
<img src="/attachments/month_0812/j200812905223.gif" alt="" title="" id="a" />
<img src="/attachments/month_0709/5200791020322.jpg" alt="" title="" id="b" />
<img src="/attachments/month_0712/52007124183143.jpg" alt="" title="" id="c" />
</dd>
</dl>
</body>
</html>

Tags: CSS,切换,

分类:技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 1249

2007-12-28 CSS实现水平/垂直自适应浏览器居中

关键样式：

.bgbox {position:absolute;top:50%;left:50%;}

.bgbox .ndiv{height:100px;width:200px;position: relative; margin:-50px auto auto -100px;}

阅读全文>　

Tags: CSS,居中,自适应,

分类:技术 | 固定链接 | 评论: 0 | 引用: 0 | 查看次数: 3320

2007-12-10 css实现图片横向排列，溢出隐藏\滚动条横向拖动

关键样式：

white-space:nowrap;/*内容横向排列不换行*/

overflow-x:auto;　　overflow-y:hidden;/*隐藏溢出部分。横向滚动条自动出现，纵向滚动条隐藏*/

预览代码:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css实现图片横向排列，溢出隐藏横向滚动</title>
<style type="text/css">

</style>
</head>
<body>
<div class="inimg">
<img src="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" _fcksavedurl="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" width="670" height="375" alt="img" />
<img src="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" _fcksavedurl="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" width="670" height="375" alt="img" />
<img src="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" _fcksavedurl="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" width="670" height="375" alt="img" />
<img src="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" _fcksavedurl="http://www.fwl.name/attachments/month_0710/j20071023154335.jpg" width="670" height="375" alt="img" />
</div>
</body>
</html>

Tags: CSS,横向,溢出隐藏,滚动条,

分类:技术 | 固定链接 | 评论: 2 | 引用: 0 | 查看次数: 3095