jimmy liang 2009-02-02 13:12 發(fā)表評(píng)論
]]>jimmy liang 2009-01-22 17:11 發(fā)表評(píng)論
]]>'text-decoration:none;'去除<del>劃線(xiàn)，再設(shè)置<del>的display屬性為’display:inline-block;‘，最后是最外層的DIV文字居中'text-align:center;'。其實(shí)這里的<del>主要是針對(duì)IE這個(gè)家伙的。FireFox和Opera就簡(jiǎn)單了，不使用float，<ul>和<li>分別設(shè)為'table'和'table-cell'，<ul>使用'margin:0 auto;'就可以了。
FF3.0/Opera9.6/IE6通過(guò)，其他沒(méi)測(cè)試。
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 發(fā)表評(píng)論
]]>
代碼如下：
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 發(fā)表評(píng)論
]]>-_-||)。這種手法主要是利用左右浮動(dòng)的白點(diǎn)把父DIV的背景顏色遮住以實(shí)現(xiàn)圓角。其實(shí)和利用線(xiàn)條實(shí)現(xiàn)圓角的思想一樣。
效果如下圖：
廢話(huà)少說(shuō)，我們直接看代碼：
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>浮動(dòng)點(diǎn)實(shí)現(xiàn)圓角</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>浮動(dòng)點(diǎn)實(shí)現(xiàn)圓角</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 發(fā)表評(píng)論
]]>在不知道圖片具體高度的情況下，使其垂直和水平都居中
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,估計(jì)在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 發(fā)表評(píng)論
]]>