标签：
bootstrap实现一个网页，还有待改善（初版）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>Ghost</title> 6 <style> 7 html,body{ 8 color:#505050; 9 line-height:1.75; 10 background:#ebebeb; 11 } 12 .main-header{ 13 text-align:center; 14 padding:42px 0; 15 background:#ffffff; 16 } 17 .main-header .branding{ 18 font-size:1.5em; 19 color:#303030; 20 21 } 22 a{ 23 color:#e67e22; 24 outline:none; 25 text-decoration:none; 26 } 27 .main-header .branding img{ 28 max-width:100%; 29 } 30 a:active,a:focus,a img{ 31 outline:none; 32 } 33 .main-navigation{ 34 text-align:center; 35 background:#ffffff; 36 border-top:1px; <!-- 设置上边框的样式： --> 37 border-bottom:3px solid #e1e1e1; <!-- solid：线类型： 实线,,,,3px：线宽：3像素 ,,,,#e1e1e1线颜色--> 38 margin-bottom:35px; 39 } 40 .main-navigation .menu{ 41 padding:0; 42 margin:0; 43 } 44 .main-navigation .menu li.nav-current{ 45 border-bottom:3px solid #e67e22; 46 margin-bottom:-2px; 47 } 48 .main-navigation .menu li{ 49 list-style:none; <!--去掉列表前面的点--> 50 display:inline-block; 51 position:relative; 52 } 53 .main-navigation .menu li a{ 54 color:#505050; 55 line-height:4em; 56 display:block; 57 padding:0 21px; 58 59 } 60 61 62 .post{ 63 padding:35px; 64 background:#ffffff; 65 margin-bottom:35px; 66 position:relative; 67 overflow:hidden; 68 } 69 .post .post-head{ 70 text-align:center; 71 } 72 .post .post-head .post-title{ 73 margin:0; 74 font-size:1.5em; 75 line-height:1em; 76 } 77 .post .post-head .post-title a{ 78 color:#303030; 79 } 80 .post .post-head .post-meta{ 81 color:#959595; 82 margin:14px 0 0px; 83 } 84 .post-content{ 85 font:400 18px/1.62 "Glyphicons Halflings"; 86 color:#444443; 87 88 } 89 .post-content p{ 90 margin-top:0; 91 margin-bottom:1.16em; 92 } 93 .btn-default{ 94 border:1px solid #e67e22; 95 background:#e67e22; 96 color:#ffffff; 97 transition:all 0.2s ease-in-out;<!--过渡效果--> 98 -webkit-transition:all 0.2s ease-in-out; 99 } 100 .btn{ 101 padding:7px 14px; 102 border-radius:6px; 103 } 104 .post .post-footer{ 105 margin-top:30px; 106 border-top:1px solid #ebebeb; 107 padding:21px 0 0; 108 } 109 .post .post-footer .tag-list{ 110 color:#959595; 111 line-height:28px; 112 } 113 .side-bar .widget{ 114 background:#ffffff; 115 padding:21px 30px; 116 } 117 .widget{ 118 margin-bottom:35px; 119 } 120 .widget .title{ 121 margin-top:0; 122 padding-bottom:7px; 123 border-bottom:1px solid #ebebeb; 124 margin-bottom:21px; 125 position:relative; 126 127 } 128 .widget .tag-cloud a{ 129 border:1px solid #ebebeb; 130 padding:2px 7px; 131 color:#959595; 132 line-height:1.5em; 133 display:inline-block; 134 } 135 .main-footer{ 136 background:#202020; 137 padding:35px 0 0; 138 color:#959595; 139 } 140 .main-footer .widget{ 141 padding:0px 30px; 142 } 143 .widget{ 144 margin-bottom:35px; 145 } 146 .main-footer .widget .title{ 147 color:#ffffff; 148 border-bottom:1px #303030; 149 150 } 151 .widget .title{ 152 margin-top:0; 153 padding-bottom:7px; 154 border-bottom:1px solid #ebebeb; 155 margin-bottom:21px; 156 position:relative; 157 } 158 .main-footer .widget .recent-post .recent-single-post{ 159 border-bottom:1px dashed #303030; 160 } 161 .main-footer .recent-post .recent-single-post{ 162 border-bottom:1px dashed #303030; 163 padding-bottom:14px; 164 margin-bottom:14px; 165 } 166 167 </style> 168 </head> 169 <body class="home-template"> 170 <header class="main-header"> 171 <div class="container"> 172 <div class="row"> 173 <div class="col-md-12"> 174 <a class="branding" href="http://www.baidu.com"> 175 <img src="http://static.ghostchina.com/image/b/46/4f5566c1f7bc28b3f7ac1fada8abe.png"> 176 <h2 class="text-hide"> 177 bootstrap实例 178 </h2> 179 </a> 180 </div> 181 </div> 182 </div> 183 </header> 184 <nav class="main-navigation"> 185 <div class="container"> 186 <div class="row"> 187 <div class="col-md-12"> 188 <div class="navbar-header"> 189 <span class="nav-toggle-button collapse" data-target="#main-menu"> 190 <span class="sr-only">Toggle Navigation</span> 191 <i class="fa fa-bars"></i> 192 </span> 193 </div> 194 <div class="collapse navbar-collapse" id="main-menu"> 195 <ul class="menu"> 196 <li class="nav-current" role="presentation"> 197 <a href="#">首页</a> 198 </li> 199 <li role="presentation"> 200 <a href="#">论坛</a> 201 </li> 202 <li role="presentation"> 203 <a href="#">快捷手册</a> 204 </li> 205 <li role="presentation"> 206 <a href="#">中文文档</a> 207 </li> 208 <li role="presentation"> 209 <a href="#">下载</a> 210 </li> 211 <li role="presentation"> 212 <a href="#">关于</a> 213 </li> 214 </ul> 215 </div> 216 </div> 217 </div> 218 </div> 219 </nav> 220 <section class="content-wrap"> 221 <div class="container"> 222 <div class="row"> 223 <main class="col-md-8 main-content" > 224 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu"> 225 <div class="post-head"> 226 <h1 class="post-title"> 227 <a href="#">禁止 ‘ghost-foot’ 助手输出</a> 228 </h1> 229 <div class="post-meta"> 230 <span class="author">作者<a href="#">王赛</a></span> 231 <time class="date" datetime="2015-10-10">2015年10月10日</time> 232 </div> 233 </div> 234 <div class="post-content"> 235 <p> 236 ghostahjshjshjshhshjhsjshjshjhjszbnbnsbnajbjsssssssssbjjjjjjjjjjjjjjjjj 237 </p> 238 </div> 239 <div class="post-permalink"> 240 <a href="#" class="btn btn-default">阅读全文</a> 241 </div> 242 <div class="footer clearfix"> 243 <hr> 244 <div class="pull-left tag-list"> 245 <i class="fa fa-folder-open-o"></i> 246 <a href="#" >Ghost</a> 247 <a href="#">深度玩转Ghost</a> 248 <a href="#">助手函数</a> 249 250 </div> 251 </div> 252 </article> 253 254 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu"> 255 <div class="post-head"> 256 <h1 class="post-title"> 257 <a href="#">禁止 ‘ghost-foot’ 助手输出</a> 258 </h1> 259 <div class="post-meta"> 260 <span class="author">作者<a href="#">王赛</a></span> 261 <time class="date" datetime="2015-10-10">2015年10月10日</time> 262 </div> 263 </div> 264 <div class="post-content"> 265 <p> 266 ghostahjshjshjshhshjhsjshjshjhjszbnbnsbnajbjsssssssssbjjjjjjjjjjjjjjjjj 267 </p> 268 </div> 269 <div class="post-permalink"> 270 <a href="#" class="btn btn-default">阅读全文</a> 271 </div> 272 <div class="footer clearfix"> 273 <hr> 274 <div class="pull-left tag-list"> 275 <i class="fa fa-folder-open-o"></i> 276 <a href="#" >Ghost</a> 277 <a href="#">深度玩转Ghost</a> 278 <a href="#">助手函数</a> 279 280 </div> 281 </div> 282 </article> 283 284 <article class="post tag-abuot-ghost tag-ghost-in-depth tag-zhu-shou-han-shu"> 285 <div class="post-head"> 286 <h1 class="post-title"> 287 <a href="#">禁止 ‘ghost-foot’ 助手输出</a> 288 </h1> 289 <div class="post-meta"> 290 <span class="author">作者<a href="#">王赛</a></span> 291 <time class="date" datetime="2015-10-10">2015年10月10日</time> 292 </div> 293 </div> 294 <div class="post-content"> 295 <p> 296 ghostahjshjshjshhshjhsjshjshjhjszbnbnsbnajbjsssssssssbjjjjjjjjjjjjjjjjj 297 </p> 298 </div> 299 <div class="post-permalink"> 300 <a href="#" class="btn btn-default">阅读全文</a> 301 </div> 302 <div class="footer clearfix"> 303 <hr> 304 <div class="pull-left tag-list"> 305 <i class="fa fa-folder-open-o"></i> 306 <a href="#" >Ghost</a> 307 <a href="#">深度玩转Ghost</a> 308 <a href="#">助手函数</a> 309 310 </div> 311 </div> 312 </article> 313 </main> 314 <aside class="col-md-4 side-bar"> 315 <div class="widget"> 316 <h4 class="title">社区</h4> 317 <div class="content community"> 318 <p>QQ群：123456</p> 319 <p> 320 <a href="#">问答社区</a> 321 </p> 322 <p> 323 <a href="#">官网微博</a> 324 </p> 325 </div> 326 </div> 327 <div class="widget"> 328 <h4>下载 Ghost</h4> 329 <div class="content download"> 330 <a href="#" class="btn btn-default btn-block">Ghost 中文版（5.0.9）</a> 331 </div> 332 </div> 333 <div class="widget"> 334 <h4 class="title">标签云</h4> 335 <div class="content tag-cloud"> 336 <a href="#">Ghost</a> 337 <a href="#">新版本发布</a> 338 <a href="#">主题</a> 339 <a href="#">Ghost</a> 340 <a href="#">Ghost</a> 341 <a href="#">Ghost</a> 342 <a href="#">Ghost</a> 343 <a href="#">Ghost</a> 344 <a href="#">新版本发布</a> 345 <a href="#">主题</a> 346 <a href="#">Ghost</a> 347 <a href="#">Ghost</a> 348 <a href="#">Ghost</a> 349 <a href="#">Ghost</a> 350 </div> 351 </div> 352 </aside> 353 </div> 354 </div> 355 </section> 356 357 <footer class="main-footer"> 358 <div class="container"> 359 <div class="row"> 360 <div class="col-md-4"> 361 <div class="widget"> 362 <h4>最新文章</h4> 363 <div class="content recent-post"> 364 <div class="recent-single-post"> 365 <a href="#" class="post-title">禁止ghost_foot</a> 366 <div class="date">March 4 2015</div> 367 </div> 368 <div class="recent-single-post"> 369 <a href="#" class="post-title">禁止ghost_foot</a> 370 <div class="date">March 4 2015</div> 371 </div> 372 <div class="recent-single-post"> 373 <a href="#" class="post-title">禁止ghost_foot</a> 374 <div class="date">March 4 2015</div> 375 </div> 376 </div> 377 </div> 378 </div> 379 <div class="col-md-4"> 380 <div class="widget"> 381 <h4 class="title">标签云</h4> 382 <div class="content tag-cloud"> 383 <a href="#">Ghost</a> 384 <a href="">新版本发布</a> 385 <a href="">主题</a> 386 <a href="">Ghost</a> 387 <a href="">Ghost</a> 388 <a href="">Ghost</a> 389 <a href="">Ghost</a> 390 <a href="">Ghost</a> 391 <a href="">新版本发布</a> 392 <a href="">主题</a> 393 <a href="">Ghost</a> 394 <a href="">Ghost</a> 395 <a href="">Ghost</a> 396 <a href="">Ghost</a> 397 </div> 398 </div> 399 </div> 400 <div class="col-md-4"> 401 <div class="widget"> 402 <h4 class="title">合作伙伴</h4> 403 <div class="content tag-cloud frend-links"> 404 <a href="#">bootstrap中文网</a> 405 <a href="#">bootstrap中文网</a> 406 <a href="#">bootstrap中文网</a> 407 <a href="#">bootstrap中文网</a> 408 <a href="#">bootstrap中文网</a> 409 <a href="#">bootstrap中文网</a> 410 </div> 411 </div> 412 </div> 413 </div> 414 </div> 415 </footer> 416 </body> 417 </html>
标签：
原文地址：http://www.cnblogs.com/UniqueColor/p/5847159.html
