html5cssjs代码 012 我的像册

html5&css&js代码 012 我的像册

  • 一、代码
  • 二、解释

这段HTML代码定义了一个简单的网页,实现了一个简洁、响应式的图片相册页面。

一、代码

<!DOCTYPE html>
<html lang="zh-cn">
<head><title>编程笔记 html5&css&js HTML分块 我的像册</title><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body {margin: 0;padding: 0;font-family: Arial, sans-serif;background-color: #f2f2f2;display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: 100vh;}.album-header {text-align: center;margin-bottom: 20px;}.photo-album {display: flex;flex-wrap: wrap;justify-content: space-between;max-width: 90vw;}.photo {flex: 0 0 calc(33.33% - 10px);max-width: calc(33.33% - 10px);margin-bottom: 20px;}.photo img {width: 100%;height: auto;display: block;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);}.footer {text-align: center;color: #ffa500;margin: 20px;}@media (max-width: 600px) {.photo {flex: 0 0 calc(50% - 10px);max-width: calc(50% - 10px);}}</style>
</head>
<body>
<div class="album-header"><h1>我的像册</h1>
</div>
<div class="photo-album"><div class="photo"><img src="page012/image6.jpg" alt="Image 6"></div><div class="photo"><img src="page012/image1.jpg" alt="Image 1"></div><div class="photo"><img src="page012/image3.jpg" alt="Image 3"></div><div class="photo"><img src="page012/image5.jpg" alt="Image 5"></div><div class="photo"><img src="page012/image4.jpg" alt="Image 4"></div><div class="photo"><img src="page012/image2.jpg" alt="Image 2"></div>
</div>
<div class="footer"><h1>HTML+CSS+JavaScript编程配套代码 作者:明月看潮生</h1>
</div>
</body>
</html>

二、解释

这段HTML代码定义了一个简单的网页,展示了一个图片相册。网页使用了HTML5、CSS和JavaScript。
以下是该网页的主要特点:

  1. 页面布局:使用了Flexbox布局,使得页面在不同设备和屏幕尺寸上都能保持良好的响应式。
  2. 相册标题:在页面顶部显示了相册的标题"我的像册"。
  3. 相册内容:使用一个类名为photo-album的容器展示图片。图片以3列(在屏幕宽度小于600px时为2列)的形式排列,每个图片容器的类名为photo,图片通过<img>标签展示,并添加了圆角和阴影样式。
  4. 页面底部:添加了一个类名为footer的底部区域,显示了代码的作者信息。
    整体而言,这段代码实现了一个简洁、响应式的图片相册页面。

Flexbox布局是一种用于网页设计的CSS布局模型,它允许容器内的子元素按照可伸缩的方式布局。Flexbox布局以容器和子元素的角色来工作。容器是被指定为flex或inline-flex的父元素,而子元素则是容器内的直接子元素。
Flexbox布局通过使用主轴和交叉轴来确定元素的位置。主轴是容器的主要方向,可以是水平方向(从左到右)或垂直方向(从上到下)。交叉轴则与主轴垂直,它的方向取决于主轴的方向。
通过使用灵活的尺寸分配和对齐方式,Flexbox布局可以创建响应式和自适应的网页设计。它提供了多个属性来控制元素在容器内的布局,包括flex-direction、justify-content、align-items和align-self等。
Flexbox布局的主要优势是简化了网页布局的复杂性,减少了使用浮动和定位的需要。它还提供了更好的浏览器兼容性,使得开发人员可以更轻松地创建适用于不同设备和浏览器的布局。
总的来说,Flexbox布局是一个强大且灵活的布局模型,可以帮助开发人员更轻松地实现网页布局的需求。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/740454.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AHU 汇编 实验六

一、实验名称&#xff1a;实验6 输入一个16进制数&#xff0c;把它转换为10进制数输出 实验目的&#xff1a; 培养汇编中设计子程序的能力 实验过程&#xff1a; 源代码&#xff1a; data segmentbuff1 db Please input a number(H):$buff2 db 30,?,30 dup(?),13,10buff3 …

QT进阶---------pro项目文件中的常用命令 (第三天)

1、命令一 决定exe可执行程序的生成路径CONFIG 作用&#xff1a;不使用默认路径&#xff0c;方便移植 CONFIG(debug, debug|release) {DESTDIR $$_PRO_FILE_PWD_/../../../debugXXXsystem } else {DESTDIR $$_PRO_FILE_PWD_/../../../realeaseXXXsystem } 是用于 Qt 项目…

多维时序 | Matlab实现VMD-CNN-LSTM变分模态分解结合卷积神经网络结合长短期记忆神经网络多变量时间序列预测

多维时序 | Matlab实现VMD-CNN-LSTM变分模态分解结合卷积神经网络结合长短期记忆神经网络多变量时间序列预测 目录 多维时序 | Matlab实现VMD-CNN-LSTM变分模态分解结合卷积神经网络结合长短期记忆神经网络多变量时间序列预测预测效果基本介绍程序设计参考资料 预测效果 基本介…

大数据开发(HBase面试真题-卷二)

大数据开发&#xff08;HBase面试真题&#xff09; 1、HBase读写数据流程&#xff1f;2、HBase的读写缓存&#xff1f;3、在删除HBase中的一个数据的时候&#xff0c;它什么时候真正的进行删除呢&#xff1f;4、HBase的一个region由哪些东西组成&#xff1f;5、HBase的rowkey为…

nginx详解,配置http,https,负载均衡,反向代理,SMTP 代理步骤说明

Nginx 是一款高性能的开源 Web 服务器,同时也可以用作反向代理服务器、负载均衡器、HTTP 缓存、HTTPS 中继、以及作为邮件代理服务器等。以下是 Nginx 可以实现的一些常见用途: 静态内容服务: Nginx 可以用来提供静态内容,比如 HTML、CSS、JavaScript 文件等。 动态内容服务…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:Stepper)

步骤导航器组件&#xff0c;适用于引导用户按照步骤完成任务的导航场景。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。 子组件 仅能包含子组件StepperItem。 接口 Stepper(value?: { index?…

View UI清除表单

首先&#xff0c;想要先爆个粗口&#xff0c;这个组件真的好难用&#xff0c;接下来看看清除表单验证吧&#xff0c;和element-ui一点都不一样。 1、清除所有表单&#xff1a;resetFields() this.$nextTick(() > {this.$refs[dateForm].resetFields() }) 其中dateForm为for…

微信小程序小白易入门基础教程1

微信小程序 基本结构 页面配置 页面配置 app.json 中的部分配置&#xff0c;也支持对单个页面进行配置&#xff0c;可以在页面对应的 .json 文件来对本页面的表现进行配置。 页面中配置项在当前页面会覆盖 app.json 中相同的配置项&#xff08;样式相关的配置项属于 app.js…

【NOIP 2015 普及组】金币

文章目录 题目描述思路分析评价 题目描述 国王将金币作为工资&#xff0c;发放给忠诚的骑士。第一天&#xff0c;骑士收到一枚金币&#xff1b;之后两天&#xff08;第二天和第三天&#xff09;里&#xff0c;每天收到两枚金币&#xff1b;之后三天&#xff08;第四、五、六天…

鸿蒙Harmony应用开发—ArkTS声明式开发(基础手势:RichText)

富文本组件&#xff0c;解析并显示HTML格式文本。 说明&#xff1a; 该组件从API Version 8开始支持。后续版本如有新增内容&#xff0c;则采用上角标单独标记该内容的起始版本。该组件无法根据内容自适应设置宽高属性&#xff0c;需要开发者设置显示布局。 子组件 不包含子组…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的石头剪刀布手势识别系统详解(深度学习模型+UI界面代码+训练数据集)

摘要&#xff1a;本篇博客深入探讨了使用深度学习技术开发石头剪刀布手势识别系统的过程&#xff0c;并分享了完整代码。该系统利用先进的YOLOv8、YOLOv7、YOLOv6、YOLOv5算法&#xff0c;并对这几个版本进行性能对比&#xff0c;如mAP、F1 Score等关键指标。文章详细阐述了YOL…

西门子S7.NET通信库【读】操作详解

在使用西门子PLC进行工业自动化控制的过程中&#xff0c;经常需要与PLC进行数据交换。S7.NET是一款广泛应用于.NET平台的西门子PLC通信库&#xff0c;它为开发者提供了一系列的API函数&#xff0c;以便在C#、VB.NET等.NET语言中轻松实现与西门子PLC的数据交互。本文将详细介绍如…

基于YOLOv8/YOLOv7/YOLOv6/YOLOv5的远距离停车位检测系统(深度学习代码+UI界面+训练数据集)

摘要&#xff1a;开发远距离停车位检测系统对于提高停车效率具有关键作用。本篇博客详细介绍了如何运用深度学习构建一个远距离停车位检测系统&#xff0c;并提供了完整的实现代码。该系统基于强大的YOLOv8算法&#xff0c;并对比了YOLOv7、YOLOv6、YOLOv5&#xff0c;展示了不…

2.MySQL中的数据类型

整数类型&#xff1a; tinyint(m): 1个字节 范围(-128~127) 常用&#xff1a;性别 0和1表示性别&#xff1b;状态 0和1表示 int(m): 4个字节 范围(-2147483648~2147483647) 常用&#xff1a;数值 数值类型中的长度m是值显示长度&#xff0c;只有字段指定zerofill时有用 例如…

TS271IDT运算放大器芯片中文资料PDF数据手册引脚图图片参数价格功能

产品描述&#xff1a; TS271 是一款低成本、低功耗的单通道运算放大器&#xff0c;设计用于采用单电源或双电源供电。该运算放大器采用意法半导体硅栅CMOS工艺&#xff0c;具有出色的消耗-速度比。该放大器非常适合低功耗应用。 电源可通过引脚 8 和 4 之间连接的电阻器进行外…

解决git clone报错RPC failed; curl 56 GnuTLS recv error (-9)

一、问题描述 ubuntu终端输入&#xff1a;git clone https://github.com/ARISE-Initiative/robomimic.git 报错内容如下&#xff1a; Cloning into robomimic... remote: Enumerating objects: 3751, done. remote: Counting objects: 100% (1235/1235), done. remote: Comp…

2024年【高压电工】考试及高压电工考试总结

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 高压电工考试考前必练&#xff01;安全生产模拟考试一点通每个月更新高压电工考试总结题目及答案&#xff01;多做几遍&#xff0c;其实通过高压电工模拟试题很简单。 1、【单选题】 为了保证频率偏差不超过规定值,必…

webpack一些常用的Loader和Plugin

文章目录 webpack4一些常用的Loader&#xff1a;webpack4一些常用的Plugin&#xff1a;关于webpack5的一些特点&#xff1a;新增特性&#xff1a;修复的问题&#xff1a;内置模块和工具&#xff1a; 关于webpack5的一些内置:内置Loader&#xff1a;内置Plugin&#xff1a; webp…

基于Springboot的预报名管理系统(有报告)。Javaee项目,springboot项目。

演示视频&#xff1a; 基于Springboot的预报名管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&a…

用miniconda建立PyTorch、Keras、TensorFlow三个环境

一、配置清华镜像conda源 由于网络问题&#xff0c;直接使用conda默认的源下载包可能会非常慢。为了解决这个问题&#xff0c;可以配置国内镜像源来加速包的下载。清华大学TUNA协会提供了一个常用的conda镜像源。下面是如何配置清华镜像源的步骤&#xff1a; 1. 配置清华conda…