前言
目前我们已经学习了很多的前端案例，是时候来学习一些网页开发实战了。
这节课我们来学习怎么开发一个前端相册网站。
开发首页
先来看看首页的效果。
在这里插入图片描述
看上去是不是比较帅？
不要羡慕，你跟着老师学习，马上就能够学会自己开发这样的一个相册网站的首页。
第一步：引入django33的依赖
<link rel="stylesheet" href="../django33.css">
第二步：开发头部导航
- navbar-blue：表示要使用科技蓝主题的头部导航
- logo：表示这是网站的logo，也就是网站的名称
- nav-links：表示这是一些顶部导航链接
- search-box：表示这是一个搜索框
<body class="container-dark">
<div class="navbar-blue">
<a href="#" class="logo">Python私教</a>
<div class="nav-links">
<a href="#">首页</a>
<a href="#">课程</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<div class="search-box">
<input type="text" placeholder="搜索课程..."/>
<button>🔍</button>
</div>
</div>
</body>
第三步：展示相册
- gallery-blue：表示咱们要使用科技蓝主题的相册
- card：表示这是一个图片的卡片，卡片下面是图片和图片的标题以及描述，你可以把这个卡片多复制几个
<div class="gallery-blue">
<div class="card">
<img src="../../img/1.jpg" alt="图片1"/>
<div class="info">
<h3>图片标题1</h3>
<p>这里是图片的描述内容，简洁明了。</p>
</div>
</div>
</div>
第三步：展示分页
- pagination-blue：表示这是科技蓝主题的分页
- page-btn：表示这是分页的一个按钮
<div class="pagination-blue">
<a class="page-btn">首页</a>
<a class="page-btn">上一页</a>
<a class="page-btn active">1</a>
<a class="page-btn">2</a>
<a class="page-btn">3</a>
<a class="page-btn">4</a>
<a class="page-btn">5</a>
<a class="page-btn">下一页</a>
<a class="page-btn">末页</a>
</div>
只需要简单的三步，你就可以开发出一个炫酷的相册网站了。
开发详情页
头部：
在这里插入图片描述
底部：
在这里插入图片描述
第一步：引入样式
<link rel="stylesheet" href="../django33.css">
第二步：头部导航
<body class="container-dark">
<div class="navbar-blue">
<a href="#" class="logo">Python私教</a>
<div class="nav-links">
<a href="#">首页</a>
<a href="#">课程</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<div class="search-box">
<input type="text" placeholder="搜索课程..."/>
<button>🔍</button>
</div>
</div>
</body>
第三步：图片详情，image-detail-blue表示是科技蓝主题下的图片详情
<div class="image-detail-blue">
<img src="../../img/1.jpg" alt="图片1"/>
<img src="../../img/2.jpg" alt="图片2"/>
<img src="../../img/3.jpg" alt="图片3"/>
</div>
第四步：分页按钮，详情页面我们只需要放一个上一篇和下一篇就行了，pagination-blue-buttons这个表示科技蓝主题下的分页按钮，主要是用来实现上一篇和下一篇的样式布局
<div class="pagination-blue-buttons">
<button>上一篇</button>
<button>下一篇</button>
</div>
第五步：推荐相册
- gallery-blue-recommend：表示科技蓝下的推荐相册
- gallery：表示相册内容
- card：表示图片卡片，这个卡片就是图片的内容，可以复制多个
<div class="gallery-blue-recommend">
<h3>推荐相册</h3>
<div class="gallery">
<div class="card">
<img src="../../img/11.jpg" alt="推荐图片1"/>
<div class="info">
<h4>相册标题1</h4>
<p>这里是相册的简短描述。</p>
</div>
</div>
</div>
</div>
开发分类页
顶部：
在这里插入图片描述
底部：
在这里插入图片描述
第一步：引入依赖
<link rel="stylesheet" href="../django33.css">
第二步：顶部导航，这个之前做过了
<body class="container-dark">
<div class="navbar-blue">
<a href="#" class="logo">Python私教</a>
<div class="nav-links">
<a href="#">首页</a>
<a href="#">课程</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</div>
<div class="search-box">
<input type="text" placeholder="搜索课程..."/>
<button>🔍</button>
</div>
</div>
</body>
第三步：分类标签
- category-blue-container：分类标签的容器
- category-blue：科技蓝主题下的分类标签
- category：一个具体的分类
<div class="category-blue-container">
<div class="category-blue">
<a href="#" class="category">动漫</a>
<a href="#" class="category">美女</a>
<a href="#" class="category">风景</a>
<a href="#" class="category">动物</a>
<a href="#" class="category">美食</a>
<a href="#" class="category">旅行</a>
<a href="#" class="category">科技</a>
<a href="#" class="category">艺术</a>
<a href="#" class="category">运动</a>
<a href="#" class="category">汽车</a>
<a href="#" class="category">建筑</a>
<a href="#" class="category">时尚</a>
<a href="#" class="category">电影</a>
<a href="#" class="category">音乐</a>
<a href="#" class="category">游戏</a>
</div>
</div>
第四步：热门相册展示，这个和之前的推荐相册是一样的
<div class="gallery-blue-recommend">
<h3>动漫</h3>
<div class="gallery">
<div class="card">
<img src="../../img/1.jpg" alt="推荐图片1"/>
<div class="info">
<h4>相册标题1</h4>
<p>这里是相册的简短描述。</p>
</div>
</div>
</div>
</div>
详情页标题
效果：
在这里插入图片描述
只需要在导航栏下面加上如下内容即可：
<div class="detail-header-blue">
<h1 class="title">这里是图片标题</h1>
<div class="meta">
<span class="author">作者：Python私教</span>
<span class="date">发布时间：2023-10-01</span>
</div>
</div>
添加点赞和收藏等按钮
效果预览：
在这里插入图片描述
只需要在详情页面里面的最后一张图片下面添加如下内容即可。
<div class="btn-social-container">
<!-- 点赞按钮 -->
<button class="btn-social like">
<span class="icon">👍</span>
<span class="text">点赞</span>
</button>
<!-- 踩按钮 -->
<button class="btn-social dislike">
<span class="icon">👎</span>
<span class="text">踩</span>
</button>
<!-- 收藏按钮 -->
<button class="btn-social favorite">
<span class="icon">❤️</span>
<span class="text">收藏</span>
</button>
<!-- 下载按钮 -->
<button class="btn-social download">
<span class="icon">⬇️</span>
<span class="text">下载</span>
</button>
</div>
总结
目前我们就已经实现了首页，详情页，分类页。
接下来还需要继续开发哪些页面了？
你可以把你的想法写在评论区。
