├── README.md ├── amusement.html ├── css.css ├── images ├── bg.gif ├── footer-bottom.gif ├── header.jpg ├── left-tab.gif ├── nav.gif ├── qsearch.gif ├── right-tab.gif ├── search_nav.gif ├── search_nav_a.gif └── wrap.gif ├── index.html ├── learn.html ├── setupwebsite.html ├── shop.html └── use.html /README.md: -------------------------------------------------------------------------------- 1 | # navigation 2 | 自用书签导航页，纯HTML+CSS静态网页 3 | -------------------------------------------------------------------------------- /amusement.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SyenFarm:我娱我乐 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

Syen Farm

17 |

I know H.T.M.L(How To Meet Ladies)

18 | 19 |
20 | 21 |
22 | 30 | 31 |
32 | 33 |
34 |
35 |

视频网站

36 | 43 |
44 |
45 |

云盘网站

46 | 53 |
54 |
55 |

直播网站

56 | 62 |
63 |
64 |

游戏论坛

65 | 70 |
71 | 72 |
73 |
74 | 75 |
76 | 77 | -------------------------------------------------------------------------------- /css.css: -------------------------------------------------------------------------------- 1 | 2 | /*--- reset start ---*/ 3 | body, div, h1, p, ul, li { 4 | margin: 0; 5 | padding: 0; 6 | outline: 0; 7 | } 8 | ul, li { 9 | list-style: none; 10 | } 11 | img { 12 | border: none; 13 | display: block; 14 | } 15 | a, a:visited { 16 | color: #79A325; 17 | background: inherit; 18 | text-decoration: none; 19 | } 20 | a:hover { 21 | color: #73471B; 22 | background: inherit; 23 | } 24 | .clearfloat { 25 | zoom: 1; 26 | } 27 | .clearfloat:after { 28 | display: block; 29 | clear: both; 30 | content: ""; 31 | visibility: hidden; 32 | height: 0; 33 | } 34 | /*--- reset end ---*/ 35 | 36 | body { 37 | background: #CCC; 38 | font: 12px/170% 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; 39 | color: #6B6B6B; 40 | text-align: center; 41 | } 42 | 43 | /*--- headers ---*/ 44 | h1, h3 { 45 | font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif; 46 | font-weight: Bold; 47 | padding: 10px; 48 | color: #444; 49 | } 50 | h1 { 51 | font-size: 2.9em; 52 | } 53 | h3 { 54 | font-size: 1.6em; 55 | font-weight: normal; 56 | padding: 16px 10px 4px 10px; 57 | } 58 | 59 | /*--- Paragraph ---*/ 60 | p { padding: 12px 10px; } 61 | 62 | /*--- Lists ---*/ 63 | ul { 64 | margin: 10px 20px; 65 | padding: 0 20px; 66 | } 67 | 68 | /*---LAYOUT---*/ 69 | .wrap { 70 | position: relative; 71 | width: 952px; 72 | background: #FFF url(images/wrap.gif) repeat-y center top; 73 | margin: 40px auto 30px auto; 74 | text-align: left; 75 | } 76 | .header { 77 | position: relative; 78 | width: 952px; 79 | height: 245px; 80 | background: #8AB84B url(images/header.jpg) no-repeat; 81 | color: #fff; 82 | padding: 0; 83 | margin: 0; 84 | } 85 | .header .logo-text a { 86 | position: absolute; 87 | margin: 0; 88 | padding: 0; 89 | font: bold 66px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif; 90 | letter-spacing: -5px; 91 | color: #332616; 92 | top: 75px; 93 | left: 55px; 94 | } 95 | .header .slogan { 96 | position: absolute; 97 | margin: 0; 98 | padding: 0; 99 | font: bold 15px 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif; 100 | color: #322815; 101 | letter-spacing: -0.5px; 102 | top: 148px; 103 | left: 150px; 104 | } 105 | 106 | /*--- Navigation ---*/ 107 | .nav { 108 | width: 952px; 109 | height: 50px; 110 | background: #988060 url(images/nav.gif) no-repeat; 111 | } 112 | .nav ul { 113 | float: left; 114 | margin: 5px 0 0 0; 115 | height: 45px; 116 | padding: 0 0 0 40px; 117 | } 118 | .nav ul li { 119 | float: left; 120 | padding: 0 0 0 10px; 121 | } 122 | .nav ul li a { 123 | float: left; 124 | padding: 0 15px 0 5px; 125 | color: #FFF; 126 | font: bold 15px/45px 'Trebuchet MS', 'Helvetica Neue', Arial, sans-serif; 127 | } 128 | .nav ul li a:hover, .nav ul li a:active { 129 | color: #E7FAA9; 130 | } 131 | .nav .current { 132 | background: transparent url(images/left-tab.gif) no-repeat; 133 | } 134 | .nav .current a { 135 | color: #4B3D2C; 136 | background: transparent url(images/right-tab.gif) no-repeat right top; 137 | } 138 | 139 | /*--- search navigation ---*/ 140 | .search_nav{ 141 | width: 263px; 142 | height: 296px; 143 | padding: 20px 0 0 50px; 144 | } 145 | .search_nav ul{ 146 | margin: auto; 147 | display: block; 148 | } 149 | .search_nav ul li{ 150 | display: block; 151 | width: auto; 152 | height: 29px; 153 | line-height: 29px; 154 | } 155 | .search_nav ul li a{ 156 | height: 29px; 157 | display: block; 158 | width: 263px; 159 | padding: 0 0 0 35px; 160 | margin: 7px 0; 161 | color: #d4f0ba; 162 | background: url(images/search_nav.gif) no-repeat center; 163 | background-position: 0px 0px; 164 | } 165 | .search_nav a:hover{ 166 | height:29px; 167 | display:block; 168 | width:263px; 169 | color: #d4f0ba; 170 | padding:0 0 0 35px; 171 | margin:7px 0; 172 | background:url(images/search_nav_a.gif) no-repeat center; 173 | background-position:0px 0px; 174 | } 175 | .search_nav .current{ 176 | height:29px; 177 | display:block; 178 | width:263px; 179 | color: #d4f0ba; 180 | padding:0 0 0 35px; 181 | margin:7px 0; 182 | background:url(images/search_nav_a.gif) no-repeat center; 183 | background-position:0px 0px; 184 | } 185 | 186 | /*--- listbar menu ---*/ 187 | .listbar { 188 | position: relative; 189 | margin: 0 auto; 190 | width: 900px; 191 | } 192 | .listbar h3 { 193 | color: #51432F; 194 | font: bold 1.9em 'Trebuchet MS', 'Helvetica Neue', Arial, Sans-serif; 195 | letter-spacing: 2px; 196 | text-align: center; 197 | } 198 | .listbar .listmenu { 199 | 200 | } 201 | .listbar .listmenu li { 202 | padding: 10px; 203 | text-align: center; 204 | border-bottom: 1px solid #E8E8E8; 205 | } 206 | .listbar .listmenu li a { 207 | color: #739A23; 208 | font-size: 1.2em; 209 | } 210 | .listbar .listmenu li a:hover { 211 | color: #000; 212 | background:none; 213 | } 214 | .listbar .box { 215 | float:left; 216 | width: 225px; 217 | } 218 | 219 | /* footer */ 220 | .footer { 221 | width: 952px; 222 | padding: 30px 0; 223 | background: #CCC url(images/footer-bottom.gif) no-repeat; 224 | } -------------------------------------------------------------------------------- /images/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/bg.gif -------------------------------------------------------------------------------- /images/footer-bottom.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/footer-bottom.gif -------------------------------------------------------------------------------- /images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/header.jpg -------------------------------------------------------------------------------- /images/left-tab.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/left-tab.gif -------------------------------------------------------------------------------- /images/nav.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/nav.gif -------------------------------------------------------------------------------- /images/qsearch.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/qsearch.gif -------------------------------------------------------------------------------- /images/right-tab.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/right-tab.gif -------------------------------------------------------------------------------- /images/search_nav.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/search_nav.gif -------------------------------------------------------------------------------- /images/search_nav_a.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/search_nav_a.gif -------------------------------------------------------------------------------- /images/wrap.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/SyenHan/navigation/4ff791d965f3ed8b2b6e2fce1960f87268d4367a/images/wrap.gif -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SyenFarm 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

Syen Farm

17 |

I know H.T.M.L(How To Meet Ladies)

18 | 19 |
20 | 21 |
22 | 30 | 31 |
32 | 33 |
34 | 41 |
42 |
43 | 44 |
45 | 46 | 47 | -------------------------------------------------------------------------------- /learn.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SyenFarm:学了个习 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

Syen Farm

17 |

I know H.T.M.L(How To Meet Ladies)

18 | 19 |
20 | 21 |
22 | 30 | 31 |
32 | 33 |
34 |
35 |

前端网站

36 | 43 |
44 | 45 |
46 |

开源网站

47 | 54 |
55 | 56 |
57 |

资料网站

58 | 65 |
66 | 67 |
68 |

稀奇古怪

69 | 73 |
74 | 75 |
76 | 77 |
78 | 79 |
80 | 81 | -------------------------------------------------------------------------------- /setupwebsite.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SyenFarm:网址维护 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

Syen Farm

17 |

I know H.T.M.L(How To Meet Ladies)

18 | 19 |
20 | 21 |
22 | 30 | 31 |
32 | 33 |
34 |
35 |

公司网站

36 | 43 |
44 |
45 |

运营维护

46 | 56 |
57 | 58 |
59 |
60 | 61 |
62 | 63 | 64 | -------------------------------------------------------------------------------- /shop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SyenFarm:购物败家 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

Syen Farm

17 |

I know H.T.M.L(How To Meet Ladies)

18 | 19 |
20 | 21 |
22 | 30 | 31 |
32 | 33 |
34 | 39 | 40 |
41 |
42 | 43 |
44 | 45 | -------------------------------------------------------------------------------- /use.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | SyenFarm:常用网站 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 |
16 |

Syen Farm

17 |

I know H.T.M.L(How To Meet Ladies)

18 | 19 |
20 | 21 |
22 | 30 | 31 |
32 | 33 |
34 | 42 | 43 |
44 |
45 | 46 |
47 | 48 | 49 | --------------------------------------------------------------------------------