文章标签 ‘css’

Tab标签选项卡和滑动门菜单(CSS+JS)

兼容IE7、IE8、FF等主流浏览器的多标签选项卡和滑动门菜单，基于CSS+JS技术实现，简洁漂亮，千万不要错过，用到一张背景图片，您可以自行下载到本地，本选项卡是大网站扒下的，而且好多网站都有用过，绝对值得收藏的一款点触式滑动门。
预览：
tab_biaoqianxuanxiangka.html
huadongmen.html
阅读全文…

2010年3月28日15:47 | 评论关闭
分类: 程序代码

如何用css制作圆角WordPress tab导航栏？

用css制作圆角WordPress tab导航栏
圆角导航栏标签
这里我们需要用到四张图片，其中各有两张用于当前导航栏状态和激活之后的导航栏状态样式。我将其命名为navleft,navright和avleft_active,navright_active.其中navright和navright_active应该足够长，以适应那些长的分类目录或者是分
类页面。
阅读全文…

2010年2月21日14:28 | 评论关闭
分类: 程序代码
标签: ,

纯CSS的下拉菜单 支持IE6 IE7 Firefox

演示地址：css_drop_down_menu.html

查看代码 HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>
 
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:red;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#f2cdb0;color:#f00;border:1px solid red;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:13px;margin:0;border:0;border-bottom:1px solid red;}
.menu ul ul li a:hover{border:0;background:#f2cdb0;border-bottom:1px solid #fff;}
</style>
</head>
 
<body>
 
<div class="menu">
    <ul>
        <li><a href="">XHTML/CSS
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="">标准</a></li>
                <li><a href="">教程</a></li>
                <li><a href="">技术文章</a></li>
                <li><a href="">常见问题</a></li>
                <li><a href="">布局教程专题</a></li>
                <li><a href="">CSS菜单</a></li>
                <li><a href="">浏览器兼容</a></li>
                <li><a href="">滚动条相关</a></li>
                <li><a href="">圆角矩形专题</a></li>
                <li><a href="">CSS特效欣赏专题</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="">AJAX
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="">AJAX教程</a></li>
                <li><a href="">AJAX技术</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="">Javascript
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="">JSON</a></li>
                <li><a href="">技术文章</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="">DOM</a></li>
        <li><a href="">XML</a></li>
        <li><a href="">正则表达式
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="">正则表达式简介</a></li>
                <li><a href="">正则表达式之道</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
        <li><a href="">网站优化</a></li>
        <li><a href="">电脑网络</a></li>
        <li><a href="">建站技术
            <!--[if IE 7]><!--></a><!--<![endif]-->
            <!--[if lte IE 6]><table><tr><td><![endif]-->
            <ul>
                <li><a href="">PHP</a></li>
                <li><a href="">ASP</a></li>
                <li><a href="">ASP.NET</a></li>
                <li><a href="">JSP</a></li>
                <li><a href="">SQL</a></li>
                <li><a href="">Flash</a></li>
                <li><a href="">Dreamweaver</a></li>
            </ul>
            <!--[if lte IE 6]></td></tr></table></a><![endif]-->
        </li>
    </ul>
</div>
 
<br /><br />
css drop down menu
</body>
</html>

2007年12月28日17:00 | 评论关闭
分类: 程序代码
标签: , ,

CSS hack:区分IE6，IE7，firefox

区别不同浏览器，CSS hack写法：

区别IE6与FF：
       background:orange;*background:blue;

区别IE6与IE7：

       background:green !important;background:blue;

区别IE7与FF：

       background:orange; *background:green;

区别FF，IE7，IE6：

       background:orange;*background:green !important;*background:blue;

注：IE都能识别*;标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important;
FF不能识别*，但能识别!important;

IE6 IE7 FF
* √ √ ×
!important × √ √
另外再补充一个，下划线"_",
IE6支持下划线，IE7和firefox均不支持下划线。

于是大家还可以这样来区分IE6，IE7，firefox:
background:orange;*background:green;_background:blue;

注：不管是什么方法，书写的顺序都是firefox的写在前面，IE7的写在中间，IE6的写在最后面。

2007年12月28日16:38 | 评论关闭
分类: 程序代码
标签: , ,

悬停效果 静止不动 不随滚动条滚动 纯css实现

查看代码 CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14

<style>
.aa{height:2000px;width:40px;background:#eee;}
.bb{width:50px;height:80px;background:red;float:right;
	position:fixed !important; top/**/:0px;
	position:absolute; z-index:100; top:expression(offsetParent.scrollTop+20);right:20px;
</style>
 
<div class="aa">
	我是不动的。
	<script>for(var i=0;i<99;i++){document.write(i+"<br />");}</script>
 
	<div class="bb">move</div>
 
</div>

2007年6月14日16:49 | 评论关闭
分类: 程序代码
标签:

Div+CSS布局入门教程

页面布局与规划
在网页制作中，有许多的术语，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识，而在你学习这篇入门教程之前，请确定你已经具有了一定的HTML基础。下面我们就开始一步一步使用DIV+CSS进行网页布局设计吧。

所有的设计第一步就是构思，构思好了，一般来说还需要用PhotoShop或FireWorks(以下简称PS或FW)等图片处理软件将需要制作的界面布局简单的构画出来，以下是我构思好的界面布局图。

阅读全文…

2007年6月14日15:43 | 评论关闭
分类: 程序代码
标签: , ,

置顶