jimmy liang 2009-02-02 13:12 發表評論
]]>jimmy liang 2009-01-22 17:11 發表評論
]]>'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>
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>
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>
jimmy liang 2009-01-22 14:47 發表評論
]]>
代碼如下：
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>
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>
jimmy liang 2009-01-21 18:24 發表評論
]]>-_-||)。這種手法主要是利用左右浮動的白點把父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>
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>
jimmy liang 2009-01-20 18:15 發表評論
]]>在不知道圖片具體高度的情況下，使其垂直和水平都居中
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的高度和圖片試試...
jimmy liang 2009-01-20 13:54 發表評論
]]>