CSS Menu Design书目录式的WEB页面
文章来源：365jz.com 点击数：191 更新时间：2009-10-26 09:26 参与评论
htmL code
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Demo: CSS Menu Design书目录式的WEB页面</title>
6<meta content="Geovin Du" name="Author">
7<meta name="description" content="涂聚文,缔友计算机信息技术有限公司,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
8<meta name="description" content="Study,Communicate。 ">
9<meta name="Robots" content="all index follow ">
10<meta name="Author" content="涂聚文" />
11<meta name="keywords" content="Chinea,Guangdong Province,Shenzhen city,Nanshan District,Hi-teach industry Park, geoVI studio,Geovin Du,Systems Solution.勝利は仕事部屋である貴方にご光来を賜ることを歓迎,the original affiliation, Jiangxi Province, the Ji'an city, YongFeng coutry, Ouyang's hometown. Discussion forum, friend reason person, English, Japanese language, Korean language
The music appreciation, Wan Nian calendar, the English salon, the trade market, the information, the telecommunication electron, the electric appliance, the currency foreign exchange, the news, the book, by talk, the fable, the fairy tale, the novel, the sketch philosophy, the philosophy, the national studies, the poem, the word, the prose, the tune, manages the creativity, the software technology, sound, the picture, the image data warehouse, C++, C.NET, WEB,JAVA, J2EE XML, the HTML, software engineering, the physiological, keeping in good health, the traveling, lives,geocVi のスタジオはgeovindu, 中国のGuangdong の地 域,Shenzhen のNanShan 地区すなわち高く新しい技術的な企業の 開発の地帯すなわち元の加入すなわちJiangxi の地域すなわち Ji'an 都市, 故郷coutry YongFeng Ouyang's のへ, あな たを歓迎する。議論のフォーラムすなわち友人の理由人, 英語す なわち日本語の言語すなわち韓国語の言語は 音楽感謝すなわ ちNian の弱々しいカレンダーすなわち英国の大広間すなわち貿易 市場すなわち情報すなわちテレコミュニケーションの電子すなわ ち電気電気器具すなわち通貨の外国為替すなわちニュースすなわ ち本, 話によって, fable のおとぎ話すなわち小説すなわちスケ ッチの哲学すなわち哲学は, 国民調査する, 詩すなわち単語すな わち散文すなわち調子, 管理する創造性すなわちソフトウェア技 術すなわち音すなわち映像すなわちイメージ?データの倉庫 , C++, C.NET の網, ジャワ, J2EE XML, html のよい健康すなわ ち移動, 生命で保つソフトウエア工学すなわち生理学を,®geoVI ? ? ™?? geocVi ????? geovindu, ?? ? Guangdong ??, Shenzhen ? NanShan ??, ?? ??? ?? ?? ?? ?? ??, ?? affiliation, Jiangxi ?? , Ji'an ??, coutry YongFeng, Ouyang's?, ?? ? ???. ?? ????, ?? ?? ??, ??, ?? ??, ? ? ??? ?? ??, Nian ??? ??, ?? ??, ?? ??, ??, ??? ?? ??, ????, ?? ?? ??, ? ?, ?, ??????,fable ? ???? ??, ??, ??? ??, ???, ?? ????, ?, ??, ??, ?, ???? ???, ????? ??, ??, ??,?? ?? ?? , C++, C.NET ? ??, ??, J2EE XML, HTML ? ??, ??, ???? ??? ????? ????, ???">
12 <link rel="stylesheet" href="css/style.css" type="text/css">
13 <link rel="stylesheet" href="css/shadow.css" type="text/css">
14<link rel="shortcut icon" href="http://www.dusystem.com/favicon.ico" type="image/x-icon" />
15<link rel="icon" href="http://www.dusystem.com/favicon.ico" type="image/ico" />
16<link rel="Bookmark" href="www.dusystem.com/favicon.ico">
17
18</head>
19
20<body>
21<h2>Rates</h2>
22<ul class="menu">
23 <li><strong>WordPress Coding</strong> <em>100<sup>95</sup></em></li>
24
25 <li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>
26 <li><strong>Support IE6 (extra)</strong> <em>500<sup>95</sup></em></li>
27</ul>
28
29<h2>Services</h2>
30<ul class="menu style2">
31
32 <li><strong>PhotoShop</strong> <em>50<sup>00</sup></em></li>
33 <li><strong>Illustrator</strong> <em>75<sup>00</sup></em></li>
34 <li><strong>Flash</strong> <em>60<sup>00</sup></em></li>
35
36</ul>
37
38<h2>Sushi</h2>
39<ul class="menu style3">
40 <li><strong>Spicy Hand Roll</strong> <em>29<sup>99</sup></em></li>
41 <li><strong>Salmon Roll</strong> <em>20<sup>95</sup></em></li>
42
43 <li><strong>Fire Dragon</strong> <em>69<sup>95</sup></em></li>
44</ul>
45
46<h2>Sashimi</h2>
47<ul class="menu style4">
48 <li><strong>Tuna</strong> <em>2<sup>00</sup></em></li>
49
50 <li><strong>Salmon</strong> <em>3<sup>50</sup></em></li>
51 <li><strong>White Fish</strong> <em>4<sup>60</sup></em></li>
52</ul>
53
54<p class="credits">Tutorial by: <a href="http://www.dupcti.com">Web
55Designer </a> (read the <a href="http://www.dupcit.com/design">
56CSS tutorial</a>)</p>
57
58</body>
59</html>
60
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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>Demo: CSS Menu Design书目录式的WEB页面</title>6
<meta content="Geovin Du" name="Author">7
<meta name="description" content="涂聚文,缔友计算机信息技术有限公司,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">8
<meta name="description" content="Study,Communicate。 ">9
<meta name="Robots" content="all index follow ">10
<meta name="Author" content="涂聚文" />11
<meta name="keywords" content="Chinea,Guangdong Province,Shenzhen city,Nanshan District,Hi-teach industry Park, geoVI studio,Geovin Du,Systems Solution.勝利は仕事部屋である貴方にご光来を賜ることを歓迎,the original affiliation, Jiangxi Province, the Ji'an city, YongFeng coutry, Ouyang's hometown. Discussion forum, friend reason person, English, Japanese language, Korean language The music appreciation, Wan Nian calendar, the English salon, the trade market, the information, the telecommunication electron, the electric appliance, the currency foreign exchange, the news, the book, by talk, the fable, the fairy tale, the novel, the sketch philosophy, the philosophy, the national studies, the poem, the word, the prose, the tune, manages the creativity, the software technology, sound, the picture, the image data warehouse, C++, C.NET, WEB,JAVA, J2EE XML, the HTML, software engineering, the physiological, keeping in good health, the traveling, lives,geocVi のスタジオはgeovindu, 中国のGuangdong の地 域,Shenzhen のNanShan 地区すなわち高く新しい技術的な企業の 開発の地帯すなわち元の加入すなわちJiangxi の地域すなわち Ji'an 都市, 故郷coutry YongFeng Ouyang's のへ, あな たを歓迎する。議論のフォーラムすなわち友人の理由人, 英語す なわち日本語の言語すなわち韓国語の言語は 音楽感謝すなわ ちNian の弱々しいカレンダーすなわち英国の大広間すなわち貿易 市場すなわち情報すなわちテレコミュニケーションの電子すなわ ち電気電気器具すなわち通貨の外国為替すなわちニュースすなわ ち本, 話によって, fable のおとぎ話すなわち小説すなわちスケ ッチの哲学すなわち哲学は, 国民調査する, 詩すなわち単語すな わち散文すなわち調子, 管理する創造性すなわちソフトウェア技 術すなわち音すなわち映像すなわちイメージ?データの倉庫 , C++, C.NET の網, ジャワ, J2EE XML, html のよい健康すなわ ち移動, 生命で保つソフトウエア工学すなわち生理学を,®geoVI ? ? ™?? geocVi ????? geovindu, ?? ? Guangdong ??, Shenzhen ? NanShan ??, ?? ??? ?? ?? ?? ?? ??, ?? affiliation, Jiangxi ?? , Ji'an ??, coutry YongFeng, Ouyang's?, ?? ? ???. ?? ????, ?? ?? ??, ??, ?? ??, ? ? ??? ?? ??, Nian ??? ??, ?? ??, ?? ??, ??, ??? ?? ??, ????, ?? ?? ??, ? ?, ?, ??????,fable ? ???? ??, ??, ??? ??, ???, ?? ????, ?, ??, ??, ?, ???? ???, ????? ??, ??, ??,?? ?? ?? , C++, C.NET ? ??, ??, J2EE XML, HTML ? ??, ??, ???? ??? ????? ????, ???">12
<link rel="stylesheet" href="css/style.css" type="text/css">13
<link rel="stylesheet" href="css/shadow.css" type="text/css">14
<link rel="shortcut icon" href="http://www.dusystem.com/favicon.ico" type="image/x-icon" />15
<link rel="icon" href="http://www.dusystem.com/favicon.ico" type="image/ico" />16
<link rel="Bookmark" href="www.dusystem.com/favicon.ico"> 17
18
</head>19
20
<body>21
<h2>Rates</h2>22
<ul class="menu">23
<li><strong>WordPress Coding</strong> <em>100<sup>95</sup></em></li>24
25
<li><strong>CSS Design</strong> <em>250<sup>95</sup></em></li>26
<li><strong>Support IE6 (extra)</strong> <em>500<sup>95</sup></em></li>27
</ul>28
29
<h2>Services</h2>30
<ul class="menu style2">31
32
<li><strong>PhotoShop</strong> <em>50<sup>00</sup></em></li>33
<li><strong>Illustrator</strong> <em>75<sup>00</sup></em></li>34
<li><strong>Flash</strong> <em>60<sup>00</sup></em></li>35
36
</ul>37
38
<h2>Sushi</h2>39
<ul class="menu style3">40
<li><strong>Spicy Hand Roll</strong> <em>29<sup>99</sup></em></li>41
<li><strong>Salmon Roll</strong> <em>20<sup>95</sup></em></li>42
43
<li><strong>Fire Dragon</strong> <em>69<sup>95</sup></em></li>44
</ul>45
46
<h2>Sashimi</h2>47
<ul class="menu style4">48
<li><strong>Tuna</strong> <em>2<sup>00</sup></em></li>49
50
<li><strong>Salmon</strong> <em>3<sup>50</sup></em></li>51
<li><strong>White Fish</strong> <em>4<sup>60</sup></em></li>52
</ul>53
54
<p class="credits">Tutorial by: <a href="http://www.dupcti.com">Web 55
Designer </a> (read the <a href="http://www.dupcit.com/design">56
CSS tutorial</a>)</p>57
58
</body>59
</html>60
css.css code:
1
/*塗聚文*/
2body {
3
background: #fff;
4 font: 80%/160% Arial, Helvetica, sans-serif;
5 padding: 0;
6 margin: 20px 40px;
7
}
8a {
9 color: #999;
10}
11h2 {
12 font: bold 320%/100% Georgia, "Times New Roman", Times, serif;
13 margin: 0;
14 padding: 0;
15}
16
17.menu {
18 width: 500px;
19 list-style: none;
20 margin: 0 0 2em;
21 padding: 0;
22 font: 150%/100% Arial, Helvetica, sans-serif;
23}
24.menu li {
25 clear: both;
26 margin: 0;
27 padding: 0 0 1.8em 0;
28 position: relative;
29 border-bottom: dotted 2px #999;
30}
31.menu strong {
32 background: #fff;
33 padding: 0 10px 0 0;
34 font-weight: normal;
35 position: absolute;
36 bottom: -.3em;
37 left: 0;
38}
39.menu em {
40 background: #fff;
41 padding: 0 0 0 5px;
42 font: 110%/100% Georgia, "Times New Roman", Times, serif;
43 position: absolute;
44 bottom: -.2em;
45 right: 0;
46}
47.menu sup {
48 font-size: 60%;
49 color: #666;
50 margin-left: 3px;
51}
52
53
54/* style 2 *************/
55.style2 li {
56 border-bottom: dashed 1px #000;
57}
58
59/* style 3 *************/
60.style3 li {
61 background: url('diagonal.gif') repeat-x left bottom;
62 border: medium none;
63}
64
65/* style 4 *************/
66.style4 li {
67 background: url('circle.gif') repeat-x left bottom;
68 border: medium none;; padding-left:0; padding-right:0; padding-top:0; padding-bottom:2.3em
69}
70
71
72.credits {
73 color: #999;
74 font: 100% Georgia, "Times New Roman", Times, serif;
75}
/*塗聚文*/
2
body {3
background: #fff;4
font: 80%/160% Arial, Helvetica, sans-serif;5
padding: 0;6
margin: 20px 40px;7
}8
a {9
color: #999;10
}11
h2 {12
font: bold 320%/100% Georgia, "Times New Roman", Times, serif;13
margin: 0;14
padding: 0;15
}16
17
.menu {18
width: 500px;19
list-style: none;20
margin: 0 0 2em;21
padding: 0;22
font: 150%/100% Arial, Helvetica, sans-serif;23
}24
.menu li {25
clear: both;26
margin: 0;27
padding: 0 0 1.8em 0;28
position: relative;29
border-bottom: dotted 2px #999;30
}31
.menu strong {32
background: #fff;33
padding: 0 10px 0 0;34
font-weight: normal;35
position: absolute;36
bottom: -.3em;37
left: 0;38
}39
.menu em {40
background: #fff;41
padding: 0 0 0 5px;42
font: 110%/100% Georgia, "Times New Roman", Times, serif;43
position: absolute;44
bottom: -.2em;45
right: 0;46
}47
.menu sup {48
font-size: 60%;49
color: #666;50
margin-left: 3px;51
}52
53
54
/* style 2 *************/55
.style2 li {56
border-bottom: dashed 1px #000;57
}58
59
/* style 3 *************/60
.style3 li {61
background: url('diagonal.gif') repeat-x left bottom;62
border: medium none;63
}64
65
/* style 4 *************/66
.style4 li {67
background: url('circle.gif') repeat-x left bottom;68
border: medium none;; padding-left:0; padding-right:0; padding-top:0; padding-bottom:2.3em69
}70
71
72
.credits {73
color: #999;74
font: 100% Georgia, "Times New Roman", Times, serif;75
}
Tag标签: css
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
您可能感兴趣的文章:
------分隔线----------------------------
