手把手教你基于HTML、CSS搭建我的相册（下）

已于 2023-03-27 08:00:29 修改
阅读量1.6w 收藏 99
点赞数 194
分类专栏： 前端小游戏 文章标签： css html 前端 javascript vue.js
于 2023-03-22 07:59:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JHXL_/article/details/129664105
版权
本文是针对前端初学者的HTML、CSS实践教程，通过搭建一个简单的个人相册页面，介绍了如何创建相册中心部分、添加照片、设置图片展示样式以及构建底部版权模块。文章逐步解析了每个部分的HTML结构和CSS样式，旨在帮助读者掌握前端基础并体验前端代码的实际应用。
摘要由CSDN通过智能技术生成

The sand accumulates to form a pagoda

⭐ 写在前面

经常有一些粉丝咨询前端该从什么开始学，那当然是我们的前端基础三件套开始学起，HTML、CSS、javaScript，前端的大部分框架的底层还是围绕着前端三件套来搭建的，相信大家能够在很多平台中去找到一些前端三件套的体系教程，借着原力计划凉哥也为大家带来前端三件套的一些内容分享，只不过这里可不是纯基础知识的输出，而是会结合一些基于前端三件套的基础知识来做一些有趣的小项目、小demo，会由简单到复杂，由静态到动态的过程来帮助大家掌握前端三件套的使用及搭配，所以这里针对的人群是前端初学者或者你还没有开始学前端想感受一些前端代码那这个专栏很适合你。

我们第一个小demo非常简单的一个个人相册的页面，布局简单，帮我们了解基础的前端代码；下面呢是我们demo的效果图，在上篇文章中我们为大家简单的讲解了HTML、CSS的概念以及我们完成了demo中的头部搭建，让我们初体验了一下HTML、CSS代码，今天呢我们就把这个demo剩下的部分完成吧！如果你没有接触过前端你可以看一下上篇文章 👉 手把手教你基于HTML、CSS搭建我的相册（上），我们接着上篇文章中的代码继续搭建；

了解本专栏 订阅专栏 解锁全文 超级会员免费看
几何心凉
关注
专栏目录
订阅专栏
使用html实现图片相册展示设计
liulang68的博客
03-29 1394
【代码】使用html实现图片相册展示设计。
3D旋转相册
-_^汪洸*的博客
10-17 1003
<!DOCTYPE html> <html lang="en"> <head> <meta charset="gbk"> <title>相册</title> <style> *{margin: 0;padding: 0;} html,body{height: ...
用HTML写一个动态的的电子相册实战详细案例
weixin_47139678的博客
09-05 701
用HTML写一个动态的的电子相册实战详细案例
分享56个Html相册模板，总有一款适合您
zy0412326的专栏
02-29 779
知识付费甚欢喜，为咱码农谋福利。分享56个Html相册模板，总有一款适合您。欧美人鱼模特相册展示flash模板。欧美风格FLASH街头贴图网站模板。模特影集FLASH相册网页模板。个人摄影FLASH相册网页模板。女性生活展示FLASH网站模板。精美图片展示FLASH网站模板。模特信息介绍网站FLASH模板。女性贴图＿FLASH相册模板。紫兰花主题FLASH相册模板。韩国化妆品展示FLASH模板。粉红图片展示响应式网页模板。灰色相册FLASH网页模板。结婚相册FLASH网页模板。少林武术FLASH相册模板。
HTML+CSS 视觉冲击实现相册图片的放大效果，让网站首页更震撼！
我们好像在哪见过 私
08-22 481
🌟 在这个视觉为王的时代，网站的第一屏图片效果尤为关键。一个引人注目的相册放大图片效果不仅能立即吸引访客的注意力，还能提升品牌形象。
html实现我的博客文章相册源码
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
07-29 2340
html实现我的博客文章相册源码，个人分类相册展示界面，相册照片详细演示界面，个人文章列表页面，个人文章详细（带评论相关），联系我页面，关于我界面，酷炫的动画风格，让页面简易而不简单，你值得拥有，六个页面包含各种内容，可以轻松扩展，各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
HTML网页相册
11-04
一个非常炫的网页相册。 老外写的东西就是不一样！ 值得学习。 里
Css相册
weixin_33843947的博客
05-06 179
　　对于相册，大家都很熟悉，常见的一种如下图所示： 　　 　　当你点击下面的数字的时候，就会换一张图片，直接用链接就可以实现，很简单。下面我们将介绍其他两种css相册。 第一种css相册： 　　我们先来看看示意图： 　　当鼠标移到某张图片时，这张图片会放大一倍，并且小图刚好是在大图的正中间的下面。看到效果图后，我们先来思考下怎样可以达到这样的效果: 　　　　1、图片先是放在一个大容...
html相册代码大全
热门推荐
皮小孩的博客
03-15 3万+
本文共有七个相册效果，都十分好看，照片可以替换成女朋友照片。 使用方法： 桌面新建一个文本文档，把代码复制进去，保存后把后缀改为html，双击即可打开页面。有些需要加照片，注意一下命名和文件夹位置即可。 代码1、3、7都是可以直接用的，其他代码css或者js文件没有给出，所以打开可能是空白的，可以去我的资源下载所有代码。html相册代码大全 代码1： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT
HTML以及CSS制作相册
qq_51131331的博客
01-11 2862
1.效果图： 2.设计思想： 在设计相册网页时，需要先想好一个整体的大致内容，然后再去具体实施。在这次设计相册的实验中，将整个相册都放在了一个div块中，而这个div块又被分为了三个部分，在最上方是一个的相册的英文标题，然后在下方，有2个div块，在第一个div块中存放的是分割线，在第二个div块中存放的是图片，当把基本框架设计好了之后，还有最后一个部分：JavaScript，设计好功能函数，在这里，使用了jquery，可以更方便简单地达到效果，在鼠标移到照片时，照片会放大并且偏...
css中float的边框案例
ojb98K的博客
05-25 318
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Doc
CSS相册简洁样式
03-21
NULL 博文链接：https://xdnh.iteye.com/blog/938641
HTML5+CSS3 漂亮的个性相册
07-31
HTML5+CSS3 漂亮的个性相册，HTML5+CSS3 漂亮的个性相册.zip 解 压 密 码 [www.0html.com]
超炫html相册
08-12
微信签到背景墙
手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
基于HTML个人博客网站项目的设计与实现——个人博客作品展示6页 HTML+CSS
而风不止
11-15 423
网页设计题材，DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 个人博客网站 | 个人主页介绍 | 个人简介 | 个人博客设计制作 | 等网站的设计与制作 | 大学生个人HTML网页设计作品 | HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为。
关于我的家乡html网页设计完整版 以家乡为主题的网页设计与实现
11-27 1618
web前端大一实训 web学生网页设计作业源码足不同的CSS：样式 在操作方面上运用了html5和css3， 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码） 描述网页设计题材
前端实现炫酷动效_10大炫酷的HTML5文字动画特效欣赏
weixin_39643255的博客
12-19 4688
7款让人惊叹的HTML5粒子动画特效HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效，特别是Canvas特性，可以实现在网页上绘制任何图形和动画。本文要分享7款让人惊叹的HTML5粒子动画特效，这些粒子特效都提供源代码下载供大家学习。1、HTML5 Canvas粒子模拟效果这是一款利用HTML5Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠...
pytnon好玩的代码
最新发布
09-27
Python是一种功能强大且简洁易学的编程语言，它的代码风格往往让人觉得既优雅又有趣。下面列举一些有趣的Python代码片段： 1. **列表推导式**：这是一种创建新列表的方式，非常简洁明了。例如，生成所有偶数的平方： ```python even_squares = [x**2 for x in range(10) if x % 2 == 0] ``` 2. **魔术方法**：Python有一些特殊的方法名称，如`__str__`，当你打印一个对象时会自动调用它们。比如自定义一个简单的Person类显示姓名： ```python class Person: def __str__(self): return "Hello, I'm a Person" p = Person() print(p) # 输出 "Hello, I'm a Person" ``` 3. **装饰器**：Python允许定义函数作为其他函数的修改器，可以简化代码并增强功能。例如，计时器装饰器： ```python import time def timer(func): def wrapper(*args, **kwargs): start_time = time.time() result = func(*args, **kwargs) end_time = time.time() print(f"{func.__name__} took {end_time - start_time} seconds") return result return wrapper @timer def my_function(n): time.sleep(n) return n my_function(2) # 输出执行时间 ``` 4. **生成器表达式**：类似于列表推导，但不会一次性生成所有元素，节省内存： ```python primes = (n for n in range(2, 100) if all(n % i != 0 for i in range(2, int(n**0.5)+1))) ``` 这些只是Python众多乐趣之一的例子，实际应用中还有许多巧妙的技巧和库可以让代码变得更有趣。
评论 36
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

几何心凉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值