网页模板-HTML,CSS和JS准备开始编码(1KB 960px mod,Yahoo Reset,jQuery,XHTML str)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了网页模板-HTML,CSS和JS准备开始编码(1KB 960px mod,Yahoo Reset,jQuery,XHTML str)相关的知识,希望对你有一定的参考价值。

  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. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  4. <title><?=TITLE?></title>
  5. <style type="text/css">
  6. /* Yahoo CSS Reset - Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.8.1 */
  7. html{color:#000;background:#FFF;}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{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;}
  8.  
  9. /* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter (960px) */
  10. .g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.row{width:960px;overflow:hidden;margin:0 auto;}.row .row{width:auto;display:inline-block;margin:0 -10px;}
  11.  
  12. /* Common styling */
  13. .center {text-align:center}
  14. .right {text-align:right}
  15. .left {text-align:left}
  16. .fright {float:right}
  17. .fleft {float:left}
  18. strong,.strong {font-weight:900}
  19. em,.em {background:#FF9}
  20. small,.small {font-size:.7em}
  21.  
  22. /* Style sheet - */
  23. body {}
  24. #navtop {}
  25. #navtop div ul li {display:inline}
  26. #header {}
  27. #header div h1 {}
  28. #nav {}
  29. #nav div ul li {display:inline}
  30. #content {}
  31. #sidebar-one {}
  32. #sidebar-two {}
  33. #main {}
  34. #footer {}
  35. #footer div {}
  36.  
  37. div {outline:1px solid #069 /* this is for debugging */}
  38. </head>
  39.  
  40.  
  41. <div id="navtop" class="row">
  42. <div class="g12">
  43. <ul class="right">
  44. <li><a href="#">Item1</a></li>
  45. <li><a href="#">Item2</a></li>
  46. <li><a href="#">Item3</a></li>
  47. <li><a href="#">Item4</a></li>
  48. </ul>
  49. </div>
  50. </div>
  51.  
  52. <div id="header" class="row">
  53. <div class="g12">
  54. <h1>Heading</h1>
  55. </div>
  56. </div>
  57.  
  58. <div id="nav" class="row">
  59. <div class="g12">
  60. <ul>
  61. <li><a href="#">Item1</a></li>
  62. <li><a href="#">Item2</a></li>
  63. <li><a href="#">Item3</a></li>
  64. <li><a href="#">Item4</a></li>
  65. </ul>
  66. </div>
  67. </div>
  68.  
  69. <div id="content" class="row">
  70. <div id="sidebar-one" class="g3">
  71. <h4>Heading4</h4>
  72. </div>
  73.  
  74. <div id="main" class="g6">
  75. <h2>Heading2</h2>
  76. <p>Paragraph</p>
  77. <h3>Heading3</h3>
  78. </div>
  79.  
  80. <div id="sidebar-two" class="g3">
  81. <h4>Heading4</h4>
  82. </div>
  83. </div>
  84.  
  85. <div id="footer" class="row">
  86. <div class="g12">
  87. <p>Paragraph</p>
  88. </div>
  89. </div>
  90.  
  91. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  92. <script type="text/javascript">
  93. $(document).ready(function() {
  94. /* jQuery magic here */
  95. });
  96. </script>
  97.  
  98. </body>
  99. </html>

以上是关于网页模板-HTML,CSS和JS准备开始编码(1KB 960px mod,Yahoo Reset,jQuery,XHTML str)的主要内容,如果未能解决你的问题,请参考以下文章

PHP分帧后台模板页面css样式,js引入方法

前端(HTML/CSS/JS)-JavaScript编码规范

字符集和编码区别以及HTML/JS/CSS实体字符的表示

零基础html5+div+css+js网页开发教程第005期 hbuilder网站开发环境搭建

服务器网页版上位机设计 - 02 - 网页版

服务器网页版上位机设计 - 02 - 网页版