HTML Web模板 - HTML，CSS和JS准备开始编码（1KB 960px mod，Yahoo Reset，jQuery，XHTML strict）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML Web模板 - HTML，CSS和JS准备开始编码（1KB 960px mod，Yahoo Reset，jQuery，XHTML strict）相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?=TITLE?></title>
<style type="text/css">
/* 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 */
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%;}
/* 1KB grid - 12 columns, 60 pixels each, with 20 pixel gutter (960px) */
.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;}
/* Common styling */
.center {text-align:center}
.right {text-align:right}
.left {text-align:left}
.fright {float:right}
.fleft {float:left}
strong,.strong {font-weight:900}
em,.em {background:#FF9}
small,.small {font-size:.7em}
/* Style sheet - */
body {}
#navtop {}
#navtop div ul li {display:inline}
#header {}
#header div h1 {}
#nav {}
#nav div ul li {display:inline}
#content {}
#sidebar-one {}
#sidebar-two {}
#main {}
#footer {}
#footer div {}
div {outline:1px solid #069 /* this is for debugging */}
</style>
</head>
<body>
<div id="navtop" class="row">
<div class="g12">
<ul class="right">
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</div>
<div id="header" class="row">
<div class="g12">
<h1>Heading</h1>
</div>
</div>
<div id="nav" class="row">
<div class="g12">
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
</ul>
</div>
</div>
<div id="content" class="row">
<div id="sidebar-one" class="g3">
<h4>Heading4</h4>
</div>
<div id="main" class="g6">
<h2>Heading2</h2>
<p>Paragraph</p>
<h3>Heading3</h3>
</div>
<div id="sidebar-two" class="g3">
<h4>Heading4</h4>
</div>
</div>
<div id="footer" class="row">
<div class="g12">
<p>Paragraph</p>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
/* jQuery magic here */
});
</script>
</body>
</html>
我把html格式模板改成tpl格式模板怎么加载不了css和js文件，需要怎么去执行加载啊
tpl只是模板文件，需要编译成js文件，然后append就可以了
参考技术A
先看下引用的路径是不是对的。追问是对的啊，就是没有css js的效果
追答你看浏览器的bug调试，看看有没有js报错。
追问html格式就是正常的 只要改成tpl格式就加载不出来
以上是关于HTML Web模板 - HTML，CSS和JS准备开始编码（1KB 960px mod，Yahoo Reset，jQuery，XHTML strict）的主要内容，如果未能解决你的问题，请参考以下文章
web前端-响应式室内家具网页设计（HTML+CSS+JS）
[笔记][Web]利用JS生成博文目录及CSS定制博客
Django Web开发之模板
是否可以将 Vue.js 模板编译为静态 HTML 和 CSS 文件？
bootstrap前端框架的模板文件怎么使用？应用到Web项目中？
Web前端：HTML+CSS+JS实现美女照片3D立方体旋转