目前我们已经学习了很多的前端案例，是时候来学习一些网页开发实战了。
这节课我们来学习怎么开发一个前端相册网站。
开发首页先来看看首页的效果。
看上去是不是比较帅？
不要羡慕，你跟着老师学习，马上就能够学会自己开发这样的一个相册网站的首页。
第一步：引入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>
总结目前我们就已经实现了首页，详情页，分类页。
接下来还需要继续开发哪些页面了？
你可以把你的想法写在评论区。
