发布日期：2025-04-28 09:15浏览次数：
今天闲着没事，就想着捣鼓一下网页模板，以后做网站的时候直接套用，能省不少事。我这人就爱干这个，自己动手，丰衣足食嘛
得有个趁手的家伙事儿。我平时写代码用的是 VS Code，这玩意儿轻巧好用，插件也多，对我来说足够。
然后，新建一个文件夹，就叫它“templates”，专门用来放我的模板。在里面再建三个文件夹，分别是“css”，“js”和“images”，用来放样式、脚本和图片，这样结构清晰，看着舒服。
在“templates”文件夹里，新建一个 HTML 文件，名字就叫“*”。用 VS Code 打开，先敲一个基本的 HTML 结构：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的网页模板</title>
<link rel="stylesheet" href="css/*">
</head>
<body>
<!-- 页面内容 -->
<script src="js/*"></script>
</body>
</html>
这里面，<title> 标签里的内容可以根据需要改，<link> 标签引入样式文件，<script> 标签引入脚本文件。我这里用的文件名是“*”和“*”，你们也可以自己取名字。
在“css”文件夹里新建一个“*”文件，这里面就是写 CSS 样式的地方。我喜欢先把基本的样式重置一下，免得不同浏览器显示效果不一样：
margin: 0;
padding: 0;
box-sizing: border-box;
body {
font-family: sans-serif;
然后，就可以根据自己的喜设计页面的布局、颜色、字体等等。我这里就不详细写，每个人的审美不一样，自己发挥就
在“js”文件夹里新建一个“*”文件，这里面可以写一些 JavaScript 代码，比如实现一些交互效果，或者操作 DOM 元素。我这里暂时没啥要写的，就先空着。
回到“*”文件，在 <body> 标签里，就可以开始填充页面的内容。一般来说，一个网页会有头部、导航、主体内容、底部等等。我这里简单写一个：
<header>
<h1>我的网站</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
<main>
<!-- 主要内容 -->
</main>
<footer>
<p>版权所有 © 2023</p>
</footer>
这里面的 <a> 标签是超链接，我这里都写的是“#”，表示暂时不跳转。以后要用的时候，再改成具体的链接地址。
到这里，一个基本的网页模板就完成。这只是个架子，还需要不断地完善。比如，可以添加一些图标、图片，优化一下样式，增加一些交互效果等等。这些就看个人需求。
我今天就先弄到这里，以后有时间再继续折腾。自己动手，乐趣无穷！
微信便捷交流