HTML小练习——个人相册的实现

结果：

（图片有点大就没有完全截下来）

代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>个人相册</title><style>.box1 {width: 700px;float: left;text-align: center;border: 5px solid white;}.box2 {width: 1500px;float: left;text-align: center;border: 5px solid white;}.box3 {background-color: pink;color: white;width: 100px;float: left;border: 5px solid white;}.box4 {width: 470px;height: 280px;float: left;border: 5px solid white;}.box5 {width: 490px;border: 5px solid white;background-color: whitesmoke;float: left;}</style>
</head><body><div class="box1"><div class="box3">艺术摄影</div><div class="box3">婚纱摄影</div><div class="box3">纪实摄影</div><div class="box3">儿童摄影</div><div class="box3">摄影器材</div><div class="box3">创意摄影</div></div><div class="box2"><img src="H:\大四实训\课堂文件\06\images\objpic07.jpg" alt="" class="box4"><img src="H:\大四实训\课堂文件\06\images\objpic02.jpg" alt="" class="box4"><img src="H:\大四实训\课堂文件\06\images\objpic03.jpg" alt="" class="box4"><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><img src="H:\大四实训\课堂文件\06\images\objpic04.jpg" alt="" class="box4"><img src="H:\大四实训\课堂文件\06\images\objpic05.jpg" alt="" class="box4"><img src="H:\大四实训\课堂文件\06\images\objpic06.jpg" alt="" class="box4"><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><img src="H:\大四实训\课堂文件\06\images\objpic01.jpg" alt="" class="box4"><img src="H:\大四实训\课堂文件\06\images\objpic08.jpg" alt="" class="box4"><img src="H:\大四实训\课堂文件\06\images\objpic09.jpg" alt="" class="box4"><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div><div class="box5">摄影艺术</div></div>
</body></html>

HTML小练习——个人相册的实现相关推荐

微信小程序——个人相册（前端）
微信小程序--个人相册(前端) 项目效果图 1.项目功能 1)用户管理,信息包括:头像.昵称,功能包括:获取微信用户信息.验证用户是否存在.修改头像.修改昵称 2)上传相片:上传图片 3)照册列表:封 ...
微商相册一直显示服务器偷懒,【小程序】微商个人相册多端小程序源码以及安装...
程序介绍学习node.js顺便接的400元单子,前后端都是自己写,相比自己以前写的,这次相对来说比较规范,用于个人相册展示,适合微商,有客服联系,无需后台管理系统,小程序上直接进行管理,没有登录账号 ...
nodejs框架微商个人相册多端小程序源码
介绍: 微商个人相册多端小程序源码,用于个人相册展示,适合微商,有客服联系,无需后台管理系统,小程序上直接进行管理,没有登录账号只拥有查看功能. 功能介绍: 1.首页进行相册展示,采用分页 2.列表页 ...
Nodejs框架+uniapp前端微商个人相册多端小程序源码
简介: 微商个人相册多端小程序源码,用于个人相册展示, 适合微商,有客服联系,无需后台管理系统, 小程序上直接进行管理,没有登录账号只拥有查看功能. 网盘下载地址: http://kekewl.cc/ ...
基于云开发的微信小程序：个人相册ByUestcXiye
基于云开发的微信小程序:个人相册ByUestcXiye 作业要求第一次作业第二次作业结课作业小程序开发入门开发前的准备注册微信小程序新建一个模板小程序开通云开发服务第一次作业参考资 ...
Nodejs框架＋uniapp前端微商个人相册多端小程序
详情介绍微商个人相册多端小程序,用于个人相册展示,适合微商,有客服联系,无需后台管理系统,小程序上直接进行管理,没有登录账号只拥有查看功能. 功能介绍: 1.首页进行相册展示,采用分页 2.列表页面 ...
微商个人相册多端小程序源码
简介: 微商个人相册多端小程序源码程序介绍 1.首页进行相册展示,采用分 2.列表页面以文字形式进行分类,管理员可进行添加,修改和排序网盘下载地址: http://kekewl.org/RgBOf ...
【小程序云开发】30分钟搭建个人相册小程序
文章目录前言最终效果准备工作小程序架构创建小程序云开发环境创建数据库搭建个人相册写在最后前言图片存储,是所有应用开发里最常见的场景之一. 本文将通过实战"个人相册小程序& ...
【原创】uniapp开发的微商个人相册多端小程序源码以及安装
微信小程序示例:一奇相册页面图片程序介绍学习node.js顺便接的单,相比自己以前写的,这次相对来说比较规范,用于个人相册展示,适合微商,有客服联系,无需后台管理系统,小程序上直接进行管理,没有 ...

HTML小练习——个人相册的实现

HTML小练习——个人相册的实现相关推荐

最新文章

热门文章