网页模板-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. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title><?=TITLE?></title>
  6. <style type="text/css">
  7. /* 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 */
  8. 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%;}
  9.  
  10. /* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter (960px) */
  11. .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;}
  12.  
  13. /* Common styling */
  14. .center {text-align:center}
  15. .right {text-align:right}
  16. .left {text-align:left}
  17. .fright {float:right}
  18. .fleft {float:left}
  19. strong,.strong {font-weight:900}
  20. em,.em {background:#FF9}
  21. small,.small {font-size:.7em}
  22.  
  23. /* Style sheet -  */
  24. body {}
  25.  #navtop {}
  26.   #navtop div ul li {display:inline}
  27.  #header {}
  28.   #header div h1 {}
  29.  #nav {}
  30.   #nav div ul li {display:inline}
  31.  #content {}
  32.   #sidebar-one {}
  33.   #sidebar-two {}
  34.   #main {}
  35.  #footer {}
  36.   #footer div {}
  37.  
  38. div {outline:1px solid #069 /* this is for debugging */}
  39. </style>
  40. </head>
  41.  
  42. <body>
  43.  
  44. 	<div id="navtop" class="row">
  45. 		<div class="g12">
  46.         	<ul class="right">
  47.             	<li><a href="#">Item1</a></li>
  48.             	<li><a href="#">Item2</a></li>
  49.             	<li><a href="#">Item3</a></li>
  50.             	<li><a href="#">Item4</a></li>
  51.             </ul>
  52.     	</div>
  53.     </div>
  54.  
  55. 	<div id="header" class="row">
  56. 		<div class="g12">
  57.         	<h1>Heading</h1>
  58.     	</div>
  59.     </div>
  60.  
  61. 	<div id="nav" class="row">
  62. 		<div class="g12">
  63.         	<ul>
  64.             	<li><a href="#">Item1</a></li>
  65.             	<li><a href="#">Item2</a></li>
  66.             	<li><a href="#">Item3</a></li>
  67.             	<li><a href="#">Item4</a></li>
  68.             </ul>
  69.     	</div>
  70.     </div>
  71.  
  72. 	<div id="content" class="row">
  73. 		<div id="sidebar-one" class="g3">
  74.         	<h4>Heading4</h4>
  75.     	</div>
  76.  
  77.         <div id="main" class="g6">
  78.         	<h2>Heading2</h2>
  79.             <p>Paragraph</p>
  80.         	<h3>Heading3</h3>
  81.     	</div>
  82.  
  83. 		<div id="sidebar-two" class="g3">
  84.         	<h4>Heading4</h4>
  85.     	</div>
  86.     </div>
  87.  
  88. 	<div id="footer" class="row">
  89. 		<div class="g12">
  90.         	<p>Paragraph</p>
  91.     	</div>
  92.     </div>
  93.  
  94. 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
  95. 	<script type="text/javascript">
  96. 		$(document).ready(function() {
  97. 			/* jQuery magic here */
  98. 		});
  99. 	</script>
  100.  
  101. </body>
  102. </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 - 网页版