简单大气的页面
闲来没事弄弄界面，界面玩玩，呵呵，当时一篇新随笔了
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 3 <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 4 <head> 5 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 6 <title></title> 7 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 8 <link href="Styles/font-awesome.css" rel="stylesheet" type="text/css" /> 9 <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> 10 <script src="http://cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script> 11 <style type="text/css"> 12 @import url("http://cdn.datatables.net/1.10.0/css/jquery.dataTables.css"); 13 14 html 15 { 16 font-size: 62.5%; 17 font-family: 'helvetica neue' ,tahoma,arial, 'hiragino sans gb' , 'Simsun' ,sans-serif; 18 background: #dedede; 19 } 20 body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr 21 { 22 margin: 0; 23 padding: 0; 24 } 25 body 26 { 27 line-height: 1.333; 28 font-size: 12px; 29 } 30 h1, h2, h3, h4, h5, h6 31 { 32 font-size: 100%; 33 font-family: arial, 'hiragino sans gb' , 'microsoft yahei' , 'Simsun' ,sans-serif; 34 } 35 li 36 { 37 list-style: none; 38 } 39 a:link, a:visited 40 { 41 text-decoration: none; 42 } 43 44 b 45 { 46 font-size: 110%; 47 } 48 em 49 { 50 color: red; 51 } 52 53 54 #topsection 55 { 56 background: #EAEAEA; /*height: 90px; /*Height of top section*/ 57 } 58 59 #topsection h1 60 { 61 margin: 0; 62 padding-top: 15px; 63 } 64 65 #contentwrapper 66 { 67 float: left; 68 width: 100%; 69 } 70 71 #contentcolumn 72 { 73 margin-left: 200px; /*Set left margin to LeftColumnWidth*/ 74 } 75 76 #leftcolumn 77 { 78 float: left; 79 width: 200px; /*Width of left column*/ 80 margin-left: -100%; 81 background: #C8FC98; 82 } 83 84 #footer 85 { 86 clear: left; 87 width: 100%; 88 background: black; 89 color: #FFF; 90 text-align: center; 91 padding: 4px 0; 92 } 93 94 #footer a 95 { 96 color: #FFFF80; 97 } 98 99 .innertube 100 { 101 margin: 0px; /*Margins for inner DIV inside each column (to provide padding)*/ 102 margin-top: 0; 103 } 104 105 .vertical-nav 106 { 107 width: 200px; 108 margin: 0; 109 padding: 0; 110 float: left; 111 font-family: Segoe UI, Arial; 112 position: relative; 113 list-style: none; 114 box-shadow: 0 1px 2px rgba(0,0,0,0.5); 115 background: #fff; 116 } 117 118 .vertical-nav li 119 { 120 display: block; 121 width: 100%; 122 padding: 0; 123 float: left; 124 font-size: 14px; 125 position: relative; 126 box-sizing: border-box; 127 -moz-box-sizing: border-box; 128 -webkit-box-sizing: border-box; 129 } 130 .vertical-nav li a 131 { 132 width: 100%; 133 display: block; 134 padding: 15px 20px 15px 19px; /*IE 浏览器 */ 135 padding-bottom: 0px\9; 136 color: #888; 137 text-decoration: none; 138 box-sizing: border-box; 139 -moz-box-sizing: border-box; 140 -webkit-box-sizing: border-box; 141 -o-transition: all .3s ease-in-out; 142 -webkit-transition: all .3s ease-in-out; 143 -moz-transition: all .3s ease-in-out; 144 transition: all .3s ease-in-out; 145 } 146 147 .vertical-nav li:hover > a > i, .vertical-nav > li.active a > i 148 { 149 background: #95a5a6; 150 color: #fff; 151 } 152 .vertical-nav ul, .vertical-nav ul li ul 153 { 154 list-style: none; 155 margin: 0; 156 padding: 0; 157 display: none; 158 position: absolute; 159 z-index: 999; 160 width: 100%; 161 background: #fff; 162 box-shadow: 0 1px 3px rgba(0,0,0,0.3); 163 } 164 .vertical-nav ul 165 { 166 top: 0; 167 left: 100%; 168 } 169 .vertical-nav ul li ul 170 { 171 top: 1px; 172 } 173 .vertical-nav ul li 174 { 175 clear: both; 176 width: 100%; 177 } 178 .vertical-nav ul li a 179 { 180 padding: 15px 20px; 181 text-decoration: none; 182 display: inline-block; 183 border: 0 none; 184 float: left; 185 clear: both; 186 } 187 188 .vertical-nav .submenu-icon 189 { 190 font-family: 'FontAwesome'; 191 font-size: 10px; 192 float: right; 193 margin-right: -10px; 194 line-height: 24px; 195 } 196 .vertical-nav > li > a > .submenu-icon:before 197 { 198 content: "\f0c9"; 199 } 200 .vertical-nav > li ul a .submenu-icon:before 201 { 202 content: "\f0c9"; 203 float: right; 204 line-height: 23px; 205 } 206 .vertical-nav > li i 207 { 208 line-height: 24px !important; 209 margin: -16px 14px 0 -20px; 210 font-size: 25px; 211 float: left; /*border-right: solid 1px #dedede;*/ 212 padding-right: 10px; 213 padding: 14px 15px 12px 15px; 214 width: 28px; 215 text-align: center; 216 -o-transition: background .3s ease-in-out; 217 -webkit-transition: background .3s ease-in-out; 218 -moz-transition: background .3s ease-in-out; 219 transition: background .3s ease-in-out; 220 } 221 222 .vertical-nav > li.showhide 223 { 224 display: none; 225 width: 100%; 226 height: 50px; 227 cursor: pointer; 228 color: #888; 229 border-bottom: solid 1px rgba(0, 0, 0, 0.1); 230 background: #fff; 231 } 232 .vertical-nav > li.showhide span.title 233 { 234 margin: 16px 0 0 25px; 235 float: left; 236 } 237 .vertical-nav > li.showhide span.icon 238 { 239 margin: 17px 20px; 240 float: right; 241 } 242 .vertical-nav > li.showhide .icon em 243 { 244 margin-bottom: 3px; 245 display: block; 246 width: 20px; 247 height: 2px; 248 background: #ccc; 249 } 250 .vertical-nav.dark, .vertical-nav.dark ul, .vertical-nav.dark ul li ul 251 { 252 background: #fff !important; 253 } 254 .vertical-nav.dark > li.showhide 255 { 256 background: #222; 257 color: #fff !important; 258 } 259 .vertical-nav.dark > li.showhide .icon em 260 { 261 background: #fff; 262 } 263 .red li:hover > a > i, .red li.active > a > i 264 { 265 background: #e74c3c; 266 color: #fff !important; 267 } 268 .red li:hover > a 269 { 270 color: #e74c3c; 271 } 272 @media (max-width: 768px) 273 { 274 .vertical-nav, .vertical-nav li 275 { 276 width: 100%; 277 } 278 .vertical-nav > li > a 279 { 280 padding-top: 15px; 281 padding-bottom: 15px; 282 padding-left: 25px; 283 } 284 .vertical-nav a 285 { 286 width: 100%; 287 } 288 .vertical-nav ul, .vertical-nav ul li ul 289 { 290 width: 100%; 291 left: 0; 292 border-left: none; 293 position: static; 294 } 295 .vertical-nav ul li 296 { 297 background: #e9e9e9; 298 } 299 .vertical-nav.dark ul li 300 { 301 background: #333; 302 } 303 .vertical-nav ul li a 304 { 305 padding-top: 10px; 306 padding-bottom: 10px; 307 } 308 .vertical-nav > li i 309 { 310 margin: -16px 14px 0 -25px; 311 } 312 .vertical-nav > li > ul > li > a 313 { 314 padding-left: 40px !important; 315 } 316 .vertical-nav > li > ul > li > ul > li > a 317 { 318 padding-left: 60px !important; 319 } 320 .vertical-nav > li > ul > li > ul > li > ul > li > a 321 { 322 padding-left: 80px !important; 323 } 324 .vertical-nav .submenu-icon 325 { 326 margin-right: 5px; 327 } 328 .vertical-nav ul .submenu-icon 329 { 330 display: none; 331 } 332 } 333 .content 334 { 335 /*margin: 10px 50px 0 50px;*/ 336 } 337 .vertical-nav 338 { 339 margin: 0px 0 0 0; 340 min-height: 600px; 341 height: 100%; 342 } 343 .vertical-nav .active a 344 { 345 color: #e74c3c; 346 } 347 348 .head-v3 349 { 350 position: relative; 351 z-index: 100; 352 min-width: 1000px; 353 } 354 .head-v3 .navigation-inner 355 { 356 margin: 0 auto; 357 min-width: 980px; 358 position: relative; 359 } 360 .navigation-up 361 { 362 height: 60px; 363 background: #252525; 364 } 365 .navigation-up .navigation-v3 366 { 367 margin-left: 155px; 368 float: left; 369 _margin-left: 10px; 370 } 371 .navigation-up .navigation-v3 ul 372 { 373 float: left; 374 } 375 .navigation-up .navigation-v3 li 376 { 377 float: left; 378 font: normal 16px/59px "microsoft yahei"; 379 color: #fff; 380 } 381 .navigation-up .navigation-v3 .nav-up-selected 382 { 383 background: #0f0f0f; 384 } 385 .navigation-up .navigation-v3 .nav-up-selected-inpage 386 { 387 background: #0f0f0f; 388 } 389 .navigation-up .navigation-v3 li h2 390 { 391 font-weight: normal; 392 padding: 0; 393 margin: 0; 394 } 395 .navigation-up .navigation-v3 li h2 a 396 { 397 padding: 0 25px; 398 color: #fff; 399 display: inline-block; 400 height: 60px; 401 font-family: "microsoft yahei"; 402 } 403 404 .navigation-down 405 { 406 position: absolute; 407 top: 60px; 408 left: 0px; 409 width: 100%; 410 } 411 .navigation-down .nav-down-menu 412 { 413 width: 100%; 414 margin: 0; 415 background: #0f0f0f; 416 position: absolute; 417 top: 0px; 418 } 419 .navigation-down .nav-down-menu .navigation-down-inner 420 { 421 margin: auto; 422 width: 1200px; 423 position: relative; 424 } 425 .navigation-down .nav-down-menu dl 426 { 427 float: left; 428 margin: 18px 80px 18px 0; 429 } 430 .navigation-down .menu-1 dl 431 { 432 margin: 20px 80px 25px 0; 433 } 434 .navigation-down .menu-1 dt 435 { 436 font: normal 16px "microsoft yahei"; 437 color: #61789e; 438 padding-bottom: 10px; 439 border-bottom: 1px solid #61789e; 440 margin-bottom: 10px; 441 } 442 .navigation-down .menu-1 dd a 443 { 444 color: #fff; 445 font: normal 14px/30px "microsoft yahei"; 446 } 447 .navigation-down .menu-1 dd a:hover 448 { 449 color: #60aff6; 450 } 451 .navigation-down .menu-2 dd a, .navigation-down .menu-3 dd a 452 { 453 color: #fff; 454 font: normal 16px "microsoft yahei"; 455 } 456 </style> 457 <script type="text/javascript"> 458 jQuery(document).ready(function () 459 { 460 var qcloud = {}; 461 $('[_t_nav]').hover(function () 462 { 463 var _nav = $(this).attr('_t_nav'); 464 clearTimeout(qcloud[_nav + '_timer']); 465 qcloud[_nav + '_timer'] = setTimeout(function () 466 { 467 $('[_t_nav]').each(function () 468 { 469 $(this)[_nav == $(this).attr('_t_nav') ? 'addClass' : 'removeClass']('nav-up-selected'); 470 }); 471 $('#' + _nav).stop(true, true).slideDown(200); 472 }, 150); 473 }, function () 474 { 475 var _nav = $(this).attr('_t_nav'); 476 clearTimeout(qcloud[_nav + '_timer']); 477 qcloud[_nav + '_timer'] = setTimeout(function () 478 { 479 $('[_t_nav]').removeClass('nav-up-selected'); 480 $('#' + _nav).stop(true, true).slideUp(200); 481 }, 150); 482 }); 483 }); 484 </script> 485 </head> 486 <body> 487 <div id="maincontainer"> 488 <div id="topsection"> 489 <div class="innertube"> 490 <div class="head-v3"> 491 <div class="navigation-up"> 492 <div class="navigation-inner"> 493 <div class="navigation-v3"> 494 <ul> 495 <li class="nav-up-selected-inpage" _t_nav="home"> 496 <h2> 497 <a href="#">主页</a> 498 </h2> 499 </li> 500 <li class="" _t_nav="product"> 501 <h2> 502 <a href="#">云产品</a> 503 </h2> 504 </li> 505 <li class="" _t_nav="cooperate"> 506 <h2> 507 <a href="#">合作伙伴</a> 508 </h2> 509 </li> 510 <li _t_nav="about"> 511 <h2> 512 <a href="#">关于</a> 513 </h2> 514 </li> 515 </ul> 516 </div> 517 </div> 518 </div> 519 <div class="navigation-down"> 520 <div id="about" class="nav-down-menu menu-1" style="display: none;" _t_nav="about"> 521 <div class="navigation-down-inner"> 522 <dl style="margin-left: 400px;"> 523 <dd> 524 <a hotrep="hp.header.partner.1" href="#">营销支持</a> 525 </dd> 526 </dl> 527 <dl> 528 <dd> 529 <a hotrep="hp.header.partner.2" href="#">伙伴支持</a> 530 </dd> 531 </dl> 532 <dl> 533 <dd> 534 <a hotrep="hp.header.partner.3" href="#">成长之路</a> 535 </dd> 536 </dl> 537 </div> 538 </div> 539 </div> 540 </div> 541 </div> 542 </div> 543 <div id="contentwrapper"> 544 <div id="contentcolumn"> 545 <div class="innertube"> 546 <b>Content Column: <em>Fluid</em></b> 547 <div> 548 <table id="example" class="display dataTable"> 549 <thead> 550 <th> 551 姓名 552 </th> 553 <th> 554 位置 555 </th> 556 <th> 557 年龄 558 </th> 559 <th> 560 薪水 561 </th> 562 </thead> 563 <tbody> 564 <tr> 565 <td> 566 张三 567 </td> 568 <td> 569 北京 570 </td> 571 <th> 572 23 573 </th> 574 <th> 575 ￥5000 576 </th> 577 </tr> 578 <tr> 579 <td> 580 李四 581 </td> 582 <td> 583 上海 584 </td> 585 <th> 586 25 587 </th> 588 <th> 589 ￥4000 590 </th> 591 </tr> 592 <tr> 593 <td> 594 王五 595 </td> 596 <td> 597 广州 598 </td> 599 <th> 600 20 601 </th> 602 <th> 603 ￥7000 604 </th> 605 </tr> 606 <tr> 607 <td> 608 赵六 609 </td> 610 <td> 611 深圳 612 </td> 613 <th> 614 19 615 </th> 616 <th> 617 ￥10000 618 </th> 619 </tr> 620 </tbody> 621 <tfoot> 622 <th> 623 姓名 624 </th> 625 <th> 626 位置 627 </th> 628 <th> 629 年龄 630 </th> 631 <th> 632 薪水 633 </th> 634 </tfoot> 635 </table> 636 </div> 637 </div> 638 </div> 639 </div> 640 <div id="leftcolumn"> 641 <div class="innertube"> 642 <div class="content"> 643 <ul class="vertical-nav dark red"> 644 <li class="active"><a href="#"><i class="icon-home"></i>Home</a></li> 645 <li><a href="#"><i class="icon-cogs"></i>Services </a></li> 646 <li><a href="#"><i class="icon-briefcase"></i>Projects </a></li> 647 <li><a href="#"><i class="icon-user"></i>About</a></li> 648 <li><a href="#"><i class="icon-comments-alt"></i>Blog</a></li> 649 <li><a href="#"><i class="icon-picture"></i>Gallery</a></li> 650 <li><a href="#"><i class="icon-info"></i>Info</a></li> 651 <li><a href="#"><i class="icon-group"></i>Team</a></li> 652 <li><a href="#"><i class="icon-question"></i>Questions</a></li> 653 <li><a href="#"><i class="icon-bar-chart"></i>Charts</a></li> 654 <li><a href="#"><i class="icon-envelope"></i>Contact</a></li> 655 </ul> 656 </div> 657 </div> 658 </div> 659 <div id="footer"> 660 <a href=""></a> 661 </div> 662 </div> 663 <script type="text/javascript"> 664 $(document).ready(function () 665 { 666 $('#example').DataTable(); 667 }); 668 </script> 669 </body> 670 </html>
浙公网安备 33010602011771号