BlogJava-Jimmy1985-随笔分类-CSS/XHTMLhttp://www.blogjava.net/jimmy1985/category/37348.htmlCSS/XHTMLzh-cnWed, 04 Feb 2009 03:26:02 GMTWed, 04 Feb 2009 03:26:02 GMT60纯CSS实现多级菜单http://www.blogjava.net/jimmy1985/archive/2009/02/02/252941.html吉米吉米Mon, 02 Feb 2009 05:12:00 GMThttp://www.blogjava.net/jimmy1985/archive/2009/02/02/252941.htmlhttp://www.blogjava.net/jimmy1985/comments/252941.htmlhttp://www.blogjava.net/jimmy1985/archive/2009/02/02/252941.html#Feedback0http://www.blogjava.net/jimmy1985/comments/commentRss/252941.htmlhttp://www.blogjava.net/jimmy1985/services/trackbacks/252941.html<!DOCTYPE html PUBLIC "-...  阅读全文

吉米 2009-02-02 13:12 发表评论
]]>水平菜单居中二--Center Menu No Floathttp://www.blogjava.net/jimmy1985/archive/2009/01/22/252372.html吉米吉米Thu, 22 Jan 2009 09:11:00 GMThttp://www.blogjava.net/jimmy1985/archive/2009/01/22/252372.htmlhttp://www.blogjava.net/jimmy1985/comments/252372.htmlhttp://www.blogjava.net/jimmy1985/archive/2009/01/22/252372.html#Feedback0http://www.blogjava.net/jimmy1985/comments/commentRss/252372.htmlhttp://www.blogjava.net/jimmy1985/services/trackbacks/252372.html阅读全文

吉米 2009-01-22 17:11 发表评论
]]>水平菜单居中http://www.blogjava.net/jimmy1985/archive/2009/01/22/center_float_menu.html吉米吉米Thu, 22 Jan 2009 06:47:00 GMThttp://www.blogjava.net/jimmy1985/archive/2009/01/22/center_float_menu.htmlhttp://www.blogjava.net/jimmy1985/comments/252340.htmlhttp://www.blogjava.net/jimmy1985/archive/2009/01/22/center_float_menu.html#Feedback0http://www.blogjava.net/jimmy1985/comments/commentRss/252340.htmlhttp://www.blogjava.net/jimmy1985/services/trackbacks/252340.html
'text-decoration:none;'去除<del>划线，再设置<del>的display属性为’display:inline-block;‘，最后是最外层的DIV文字居中'text-align:center;'。其实这里的<del>主要是针对IE这个家伙的。FireFox和Opera就简单了，不使用float，<ul>和<li>分别设为'table'和'table-cell'，<ul>使用'margin:0 auto;'就可以了。

FF3.0/Opera9.6/IE6通过，其他没测试。

HTML代码：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>Center float Menu</title>
 6 
 7 </head>
 8 <body>
 9 <div id="outer"> 
10     <del id="inner">
11       <ul id="menu">
12         <li><a href="#">home</a></li>
13         <li><a href="#">blog</a></li>
14         <li><a href="#">contact us</a></li>
15         <li><a href="#">about</a></li>
16         <li><a href="#">help</a></li>
17       </ul>
18       </del> 
19 </div>
20 </body>
21 </html>

CSS代码：
 1 <style type="text/css">
 2 * {
 3     margin:0;
 4     padding:0;
 5 }
 6 body {
 7     font:13px/150% Verdana, Arial, Helvetica, sans-serif;
 8 }
 9 #outer {
10     text-align:center;
11 }
12 #inner {
13     text-decoration:none;
14      +display:inline-block;
15 }
16 #menu {
17     list-style:none;
18     margin:0 auto;
19     text-align:left;
20     display:table;
21 }
22 #menu:after {
23     content:"";
24     height:0;
25     display:block;
26     visibility:hidden;
27     clear:both;
28 }
29 #menu li {
30     display:table-cell;
31      +float:left;
32 }
33 #menu li a:link, #menu li a:visited {
34     display:block;
35     text-decoration:none;
36     text-transform:uppercase;
37     color:#fff;
38     padding:4px 16px;
39     background:#CC9966;
40     border-left:1px solid #fff;
41      +float:left;
42 }
43 #menu li a:hover {
44     background:#3399FF;
45 }
46 </style>

吉米 2009-01-22 14:47 发表评论
]]>CSS六边形菜单http://www.blogjava.net/jimmy1985/archive/2009/01/21/252341.html吉米吉米Wed, 21 Jan 2009 10:24:00 GMThttp://www.blogjava.net/jimmy1985/archive/2009/01/21/252341.htmlhttp://www.blogjava.net/jimmy1985/comments/252341.htmlhttp://www.blogjava.net/jimmy1985/archive/2009/01/21/252341.html#Feedback0http://www.blogjava.net/jimmy1985/comments/commentRss/252341.htmlhttp://www.blogjava.net/jimmy1985/services/trackbacks/252341.html六边形的菜单挺有意思，不过计算要准确，效果如下图：

代码如下：
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>六边形菜单</title>
 6 <style type="text/css">
 7 * {
 8     margin:0;
 9     padding:0;
10 }
11 body {
12     font:13px/150% Georgia, "Times New Roman", Times, serif;
13 }
14 #hex {
15     width:313px;
16     margin:10px auto;
17     list-style:none;
18 }
19 #hex:after {
20     content:"";
21     height:0;
22     clear:both;
23     display:block;
24     visibility:hidden;
25 }
26 #hex li {
27     float:left;
28     margin-right:4px;
29     width:100px;
30     height:110px;
31     display:block;
32     text-align:center;
33 }
34 #hex li.p1 {
35     padding-left:52px;
36 }
37 #hex li.p2 {
38     margin-top:-27px;
39 }
40 #hex li a:link, #hex li a:visited {
41     text-decoration:none;
42     text-transform:uppercase;
43     color:#fff;
44     outline:none;
45 }
46 #hex li a b {
47     display:block;
48     height:0;
49     width:0;
50     overflow:hidden;
51     border-bottom:30px solid #000;
52     border-left:50px dotted transparent;
53     border-right:50px dotted transparent;
54     cursor:pointer;
55 }
56 #hex li a span {
57     display:block;
58     height:50px;
59     background:#000;
60     line-height:50px;
61     cursor:pointer;
62 }
63 #hex li a em {
64     display:block;
65     height:0;
66     width:0;
67     overflow:hidden;
68     border-top:30px solid #000;
69     border-left:50px dotted transparent;
70     border-right:50px dotted transparent;
71     cursor:pointer;
72 }
73 #hex li a:hover {
74     border:0;
75     color:#000;
76 }
77 #hex li a:hover b {
78     border-bottom-color:#ff0;
79 }
80 #hex li a:hover span {
81     background-color:#ff0;
82 }
83 #hex li a:hover em {
84     border-top-color:#ff0;
85 }
86 </style>
87 </head>
88 <body>
89 <ul id="hex">
90   <li class="p1"><a href="#"><b></b><span>home</span><em></em></a></li>
91   <li><a href="#"><b></b><span>blog</span><em></em></a></li>
92   <li class="p2"><a href="#"><b></b><span>about</span><em></em></a></li>
93   <li class="p2"><a href="#"><b></b><span>help</span><em></em></a></li>
94   <li class="p2"><a href="#"><b></b><span>faq</span><em></em></a></li>
95   <li class="p1 p2"><a href="#"><b></b><span>shop</span><em></em></a></li>
96   <li class="p2"><a href="#"><b></b><span>photo</span><em></em></a></li>
97 </ul>
98 </body>
99 </html>






吉米 2009-01-21 18:24 发表评论
]]>CSS实现圆角--CSDN技术导航中的圆角列表http://www.blogjava.net/jimmy1985/archive/2009/01/20/252342.html吉米吉米Tue, 20 Jan 2009 10:15:00 GMThttp://www.blogjava.net/jimmy1985/archive/2009/01/20/252342.htmlhttp://www.blogjava.net/jimmy1985/comments/252342.htmlhttp://www.blogjava.net/jimmy1985/archive/2009/01/20/252342.html#Feedback0http://www.blogjava.net/jimmy1985/comments/commentRss/252342.htmlhttp://www.blogjava.net/jimmy1985/services/trackbacks/252342.html今天看到CSDN技术导航页中的圆角列表，发现他的实现手法很有趣，我还是第一次看到这种技术（落伍了
-_-||)。这种手法主要是利用左右浮动的白点把父DIV的背景颜色遮住以实现圆角。其实和利用线条实现圆角的思想一样。
效果如下图：

废话少说，我们直接看代码：

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5 <title>浮动点实现圆角</title>
  6 <style type="text/css">
  7 * {
  8     margin:0;
  9     padding:0;
 10 }
 11 body {
 12     font:12px/150% Georgia, "Times New Roman", Times, serif;
 13 }
 14 #box {
 15     width:400px;
 16     margin:10px auto;
 17     background:#fbf;
 18     overflow:hidden;
 19 }
 20 #box h3 {
 21     color:#fff;
 22     padding:5px 10px;
 23 }
 24 #box p {
 25     background: #fff;
 26     margin:0 1px;
 27     padding:10px;
 28     text-indent:2em;
 29     line-height:160%;
 30 }
 31 #box .pl_1 {
 32     float:left;
 33     height:2px;
 34     width:1px;
 35 }
 36 #box .pl_2 {
 37     float:left;
 38     height:1px;
 39     width:2px;
 40 }
 41 #box .pl_3 {
 42     float:left;
 43     height:1px;
 44     width:4px;
 45 }
 46 #box .pr_1 {
 47     float:right;
 48     height:2px;
 49     width:1px;
 50 }
 51 #box .pr_2 {
 52     float:right;
 53     height:1px;
 54     width:2px;
 55 }
 56 #box .pr_3 {
 57     float:right;
 58     height:1px;
 59     width:4px;
 60 }
 61 #box .pc {
 62     background:#fff;
 63  +overflow:hidden;
 64 }
 65 .clear_float {
 66     +zoom:1;
 67 }
 68 .clear_float:after {
 69     content:"";
 70     height:0;
 71     clear:both;
 72     visibility:hidden;
 73     display:block;
 74 }
 75 </style>
 76 </head>
 77 <body>
 78 <div id="box">
 79   <div class="clear_float">
 80     <div class="pr_3 pc"></div>
 81     <div class="pl_3 pc"></div>
 82   </div>
 83   <div class="clear_float">
 84     <div class="pr_2 pc"></div>
 85     <div class="pl_2 pc"></div>
 86   </div>
 87   <div class="clear_float">
 88     <div class="pr_1 pc"></div>
 89     <div class="pl_1 pc"></div>
 90   </div>
 91   <h3>round corner</h3>
 92   <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis. Nam blandit quam ut lacus. </p>
 93   <div class="clear_float">
 94     <div class="pr_1 pc"></div>
 95     <div class="pl_1 pc"></div>
 96   </div>
 97   <div class="clear_float">
 98     <div class="pr_2 pc"></div>
 99     <div class="pl_2 pc"></div>
100   </div>
101   <div class="clear_float">
102     <div class="pr_3 pc"></div>
103     <div class="pl_3 pc"></div>
104   </div>
105 </div>
106 </body>
107 </html>





吉米 2009-01-20 18:15 发表评论
]]>图片居中CSS实现http://www.blogjava.net/jimmy1985/archive/2009/01/20/252343.html吉米吉米Tue, 20 Jan 2009 05:54:00 GMThttp://www.blogjava.net/jimmy1985/archive/2009/01/20/252343.htmlhttp://www.blogjava.net/jimmy1985/comments/252343.htmlhttp://www.blogjava.net/jimmy1985/archive/2009/01/20/252343.html#Feedback0http://www.blogjava.net/jimmy1985/comments/commentRss/252343.htmlhttp://www.blogjava.net/jimmy1985/services/trackbacks/252343.html

在不知道图片具体高度的情况下，使其垂直和水平都居中

HTML代码：

<div id="photo">

<img src="../images/img01.jpg" alt="something" />

</div>

CSS代码：

<style type="css/text">

*{ margin:0; padding:0; }

body{ font:12px/150% Verdana, Arial, Helvetica, sans-serif; }

#photo{

           display:table-cell;/* for not IE browsers*/

         text-align:center;

         vertical-align:middle;
         height:300px;
         width:400px;
        +display:block;
        +font-size:270px;/* 这里是height*0.9,估计在0.9左右比较接近FF和Opera*/
        +font-family:"Times New Roman", Times, serif;/* Don't miss here!*/
}

img{ vertical-align:middle; }

</style>

有兴趣的朋友可以更改div的高度和图片试试...





吉米 2009-01-20 13:54 发表评论
]]>