一次博客设计稿的记录
最近在做网页设计作业，顺手给未来的博客画了一套设计稿。不知道最终会不会真的用上，先存个档。
设计稿长什么样
主题名暂定“北极光 NORTHERN LIGHTS”。代码里实现了三个页面：主页、文章页、推荐页。
- 头部：Logo（自己手绘的）+ 导航（主页、文章、推荐、登录/注册）
- 主页主体：一个居中的登录卡片（注册功能还没写后端，只有表单）
- 文章页：展示5篇示例文章，配图、作者、发布日期都是临时填的。内容比较随意，比如“食堂还不够丰富”“穷”“鬼天气”“你咋还在往下划”“你已经划到底部了”。
- 推荐页：只有两篇占位文章，标题“已经不知道写什么了”和“End”。
- 页脚：写了关于我们、特别鸣谢、旗下产品、联系我们四块。特别鸣谢里列了“泡菜肥牛汉堡”“冰激凌水果巴菲”……旗下产品有“沃森AI”“深海探索者号”等（纯属虚构）。联系方式地址写了“Earth's North Pole”，座机“114 514 000”，邮箱“
Error@SystemDeBug.com”。
技术方面：用纯HTML/CSS，引了Font Awesome图标，CSS分成了header.css、main.css、footer.css，JS只有一个空壳scripts.js。没有做响应式，也没有连接后端。
目前的状态
这套页面只在本地打开过，没有部署到服务器。代码里还有很多作业的痕迹，比如页脚那堆虚构的产品和感谢列表，明显是为了凑页面内容丰富度。
我知道离一个真正的博客还差很远：没有文章发布系统，没有用户登录，没有数据库……但至少先把前端架子搭起来了。希望以后有机会慢慢补上后端，或者换个更省事的方案。
运行截图
部分代码
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/font-awesome-all.css">
<link rel="stylesheet" href="./css/header.css">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/footer.css">
<title>主页 | 北极光-NORTHERN LIGHTS</title>
</head>
<body>
<header>
<div class="container">
<div class="logo">
<a href="./index.html" class="logo-link">
<img src="./img/logo.png" alt="Logo">
</a>
</div>
<nav>
<a href="./index.html" class="nav-link-now"><i class="fa-solid fa-house"></i> 主页</a>
<a href="./html/article.html" class="nav-link"><i class="fa-solid fa-newspaper"></i> 文章</a>
<a href="./html/recommended.html" class="nav-link"><i class="fa-solid fa-paper-plane"></i> 推荐</a>
<a href="#" id="loginRegisterLink">登录 / 注册 <i class="fa-solid fa-right-to-bracket"></i></a>
</nav>
</div>
</header>
<main>
<div class="login-card main-login-card">
<div class="login-card">
<h2>登录</h2>
<form action="#" method="POST">
<div class="form-group">
<label for="username"><i class="fa-solid fa-user"></i> 用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="form-group">
<label for="password"><i class="fa-solid fa-lock"></i> 密码</label>
<input type="password" id="password" name="password" required>
</div>
<button type="submit">登录 </button>
</form>
<p>还没有账号？<a href="#register" id="register">注册 </a></p>
</div>
</div>
</main>
<footer>
<div id='ftcon'>
<div class='wrap'>
<ul>
<li>
<h3>关于我们 <i class="fa-solid fa-tag"></i></h3>
<i>About Us</i>
<span>NORTHERN LIGHTS是个在线博客分享平台.<br>
平台鼓励思想交流,创意展示与知识传播. <i class="fa-solid fa-thumbs-up"></i><br>
用户能在这里发表见解、探索兴趣、相互启发.<br>
如同自然界的北极光,汇聚独特光彩,启迪人心. </span>
</li>
<li>
<h3>特别鸣谢 <i class="fa-solid fa-hand-holding-heart"></i></h3>
<i>Thank List</i>
<h5><i class="fa-solid fa-burger"></i> 泡菜肥牛汉堡</h5>
<h5><i class="fa-solid fa-ice-cream"></i> 冰激凌水果巴菲</h5>
<h5><i class="fa-solid fa-jar"></i> 丰蹄能量饮料</h5>
<h5><i class="fa-solid fa-pizza-slice"></i> 汐斯塔水果披萨</h5>
</li>
<li>
<h3>旗下产品 <i class="fa-solid fa-robot"></i></h3>
<i>Products Us</i>
<h5>沃森AI认知计算 - Watson</h5>
<h5>深海探索者号 - Abyss Explorer</h5>
<h5>星辉智链 - Starlight Intelligent Chain</h5>
<h5>神经织网系统 - Neural Weave System</h5>
</li>
<li>
<h3>联系我们 <i class="fa-solid fa-handshake"></i></h3>
<i>Contact Us</i>
<h5><i class="fa-solid fa-map-location-dot"></i> 地址: Earth's North Pole</h5>
<h5><i class="fa-solid fa-phone"></i> 座机: 114 514 000</h5>
<h5><i class="fa-solid fa-fax"></i> 传真: 735 560 800</h5>
<h5><i class="fa-solid fa-envelope"></i> 邮箱: Error@SystemDeBug.com</h5>
<h5><i class="fa-solid fa-clock"></i> 工作时间: 9:00-12:00,14:00-18:00(周末及法定假日除外)</h5>
</li>
</ul>
</div>
</div>
<div id='copyright'>
<div class='wrap'>
<p>xxxxxxx © xxx</p>
</div>
</div>
</footer>
<script src="./js/scripts.js"></script>
</body>
</html>