当前位置： 首页 > news >正文

html5cssjs代码 014 布局框架

news 2025/11/4 2:43:58

html5&css&js代码 014 布局框架

  • 一、代码
  • 二、解释
  • 三、Bootstrap框架简介

Bootstrap 是一个流行的开源前端开发框架，它由Twitter公司（后独立为Bootstrap团队）创建并维护。Bootstrap 提供了一套现成的、响应式的用户界面组件和设计布局工具，用于快速构建高质量的网页和Web应用。这段代码使用了这个框架，实现了一个简单的布局。

一、代码

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="utf-8"> <!-- 指定文档编码格式为UTF-8 --><title>编程笔记 html5&css&js 014 布局框架</title> <!-- 页面标题 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配不同设备的视口设置 --><link href="page014/css/base.css" rel="stylesheet"> <!-- 引入基础样式表 --><link href="page014/css/m.css" rel="stylesheet"> <!-- 引入移动端样式表 --><script src="page014/js/jquery-3.6.0.min.js"></script> <!-- 引入jQuery库 --><script src="page014/js/comm.js"></script> <!-- 引入通用函数脚本 -->
</head>
<body>
<div class="ph_margin"></div> <!-- 相册边距 -->
<div class="box"><div class="photos"><h1 class="h_title">我的相册<br>使用bootstrap框架</h1> <!-- 相册标题 --><ul><li><img src="page014/images/02.jpg" alt="i1"></li> <!-- 相片列表 --><li><img src="page014/images/03.jpg" alt="i2"></li><li><img src="page014/images/07.jpg" alt="i3"></li><li><img src="page014/images/08.jpg" alt="i4"></li><li><img src="page014/images/09.jpg" alt="i5"></li><li><img src="page014/images/10.jpg" alt="i6"></li><li><img src="page014/images/11.jpg" alt="i7"></li><li><img src="page014/images/12.jpg" alt="i8"></li><li><img src="page014/images/05.jpg" alt="i9"></li><li><img src="page014/images/04.jpg" alt="i10"></li><li><img src="page014/images/06.jpg" alt="i11"></li><li><img src="page014/images/01.jpg" alt="i12"></li></ul></div>
</div>
</body>
<footer style="text-align: center; font-size: 1.5rem; font-weight: bold; margin: 20px; color: #ffcc00;">HTML+CSS+JavaScript编程配套代码 作者：明月看潮生 <!-- 页面底部版权信息 -->
</footer>
</html>

二、解释

这段HTML代码是一个简单的网页，展示了作者的相册。以下是该代码的功能解释：

文档声明（<!DOCTYPE html>）：指定了文档类型为HTML5。
HTML标签（<html lang="zh">）：定义了文档的语言为中文。
头部标签（<head>）：包含了页面的元数据，如字符编码、标题和外部资源链接。
字符编码（<meta charset="utf-8">）：指定了文档的字符编码为UTF-8。
页面标题（<title>）：设置了浏览器标签页上显示的页面标题。
视口设置（<meta name="viewport" content="width=device-width, initial-scale=1.0">）：优化了页面在不同设备上的显示。
样式表链接（<link>）：引入了外部的CSS样式表。
脚本引入（<script>）：引入了外部的JavaScript库和脚本。
主体标签（<body>）：包含了页面的主要内容。
相册边距（.ph_margin）：为相册添加了一个边距。
相册容器（.box）：定义了相册的布局和样式。
相册标题（.h_title）：设置了相册标题的样式。
相片列表（<ul>和<li>）：包含了相片的缩略图。
底部版权信息（<footer>）：显示了页面底部的版权信息。
这段代码主要展示了如何使用HTML和CSS创建一个简单的相册页面，包括设置页面的基本结构、引入外部资源、定义样式和布局。

三、Bootstrap框架简介

Bootstrap 是一个流行的开源前端开发框架，它由Twitter公司（后独立为Bootstrap团队）创建并维护。Bootstrap 提供了一套现成的、响应式的用户界面组件和设计布局工具，用于快速构建高质量的网页和Web应用。以下是Bootstrap框架的主要特点：
响应式设计：Bootstrap遵循移动优先的设计理念，使得基于该框架构建的网站能够自动适应不同屏幕尺寸的设备，如手机、平板电脑和桌面电脑。
HTML/CSS/JS基础：Bootstrap基于HTML5、CSS3以及JavaScript（主要依赖jQuery库），提供了一系列预定义的CSS类，简化了布局、排版、按钮、导航、表单、提示、弹出框等各种UI元素的样式设置。
栅格系统：Bootstrap包含了一个强大的12列响应式栅格系统，便于灵活地组织页面布局结构。
组件丰富：提供了大量可复用的组件，包括导航条、下拉菜单、轮播图、分页、标签页、警告提示框、模态对话框等，只需简单引用相应的类名即可实现复杂的交互效果。
定制化：通过Sass源文件可以对Bootstrap进行深度定制，包括颜色方案、字体大小和其他样式变量。
易用性与社区支持：由于其广泛的应用和庞大的开发者社区，Bootstrap拥有丰富的教程资源、插件和扩展，极大地降低了学习曲线，并确保开发者在遇到问题时能得到及时的帮助。
简而言之，Bootstrap是一个高度灵活且功能齐全的前端框架，旨在提高开发效率、保证代码一致性，并帮助开发者创建出美观、一致且响应式的网站和应用程序。

相关文章：

html5cssjs代码 014 布局框架

html5&css&js代码 014 布局框架 一、代码二、解释三、Bootstrap框架简介 Bootstrap 是一个流行的开源前端开发框架&#xff0c;它由Twitter公司&#xff08;后独立为Bootstrap团队&#xff09;创建并维护。Bootstrap 提供了一套现成的、响应式的用户界面组件和设计布局…...

编程日记 2024/3/17 22:08:31

[EFI]Lenovo Ideapad 530S-14IKB电脑 Hackintosh 黑苹果efi引导文件

硬件型号驱动情况主板 Lenovo Ideapad 530S-14IKB 处理器Intel i5 8250U✅已驱动内存8 GB DDR4 2400 MHz✅已驱动硬盘250 GB SSD M.2 PCI-E✅已驱动显卡Intel UHD Graphics 620✅已驱动声卡暂无更多详细信息✅已驱动网卡Realtek RTL8111✅已驱动无线网卡蓝牙DW1560 (BCM94352Z)…...

编程日记 2024/3/17 22:03:26

FFmpeg-aac、h264封装flv及时间转换

文章目录 时间概念流程api核心代码 时间概念 dts: 解码时间戳, 表示压缩帧的解码时间 pts: 显示时间戳, 表示将压缩帧解码后得到的原始帧的显示时间 时间基: time_base &#xff0c; 通常以ms为单位 时间戳: timestamp , 多少个时间基 真实时间&#xff1a;time_base * timest…...

编程日记 2024/3/17 22:02:26

TCP并发模型 || select || poll || epoll

TCP并发模型: 1.TCP多线程模型: 缺点: 1.创建线程会带来资源开销,能够实现的并发量比较有限 2.IO模型: 1.阻塞IO: 没有数据到来时,可以让任务挂起,节省CPU资源开销,提高系统效率 2.非阻塞IO: 程序未接收到数据时一直执行,效率很低 3…...

编程日记 2024/3/17 21:59:23

【开源】SpringBoot框架开发房屋出售出租系统

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 房屋销售模块2.2 房屋出租模块2.3 预定意向模块2.4 交易订单模块 三、系统展示四、核心代码4.1 查询房屋求租单4.2 查询卖家的房屋求购单4.3 出租意向预定4.4 出租单支付4.5 查询买家房屋销售交易单 五、免责说明 一、摘…...

编程日记 2024/3/17 21:56:20

STM32的简单介绍

STM32是一种基于ARM Cortex-M内核的32位微控制器&#xff0c;由意法半导体公司开发和生产。STM32具有丰富的外设和功能&#xff0c;适用于各种应用场合&#xff0c;如工业控制、消费电子、物联网、人机交互等。STM32的优势包括低功耗、高性能、高可靠性、易于开发等。STM32的系…...

编程日记 2024/3/17 21:53:17

浏览器同源策略及跨域问题

同源策略&#xff1a;同源策略是一个重要的安全策略&#xff0c;它用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档&#xff0c;减少可能被攻击的媒介。 同源策略的作用&#xff1a;保护浏览器中网站的安全&#xff0c;限制ajax只…...

编程日记 2024/3/17 21:52:16

【读书笔记】知识图谱概述

1、KG定义 1.1 背景知识 人工智能分为三个层次&#xff0c;分别是运算智能&#xff0c;感知智能和认知智能。运算智能是让机器能存会算&#xff1b;感知智能是让机器能听会说、能看会认&#xff1b;认知智能是解决机器能理解会思考的问题。由于知识图谱的数据组织方式是计算机…...

编程日记 2024/3/17 21:48:13

用尾插的思路实现 “合并两个有序链表”

一、题目 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff1a; 输入&#xff1a;l1 [], l2 [] 输出&#…...

编程日记 2024/3/17 21:47:12

大数据 - Spark系列《十四》- spark集群部署模式

Spark系列文章&#xff1a; 大数据 - Spark系列《一》- 从Hadoop到Spark&#xff1a;大数据计算引擎的演进-CSDN博客 大数据 - Spark系列《二》- 关于Spark在Idea中的一些常用配置-CSDN博客 大数据 - Spark系列《三》- 加载各种数据源创建RDD-CSDN博客 大数据 - Spark系列《…...

编程日记 2024/3/17 21:46:11

考研C语言复习进阶（2）

目录 1. 字符指针 2. 指针数组 3. 数组指针 3.1 数组指针的定义 3.2 &数组名VS数组名 4. 函数指针 5. 函数指针数组 6. 指向函数指针数组的指针 7. 回调函数 8.三步辗转法 9. 指针和数组笔试题解析 10. 指针笔试题 指针的主题&#xff0c;我们在初级阶段的《指…...

编程日记 2024/3/17 21:41:07

设计模式学习笔记 - 设计原则与思想总结：1.总结回顾面向对象、设计原则、编程规范、重构技巧等知识点

概述 对前面的内容的回顾&#xff0c;温故而知新&#xff0c;包括&#xff1a;面向对象、设计原则、规范与重构三个模块的内容。 1.代码质量评判标准 如何评价代码质量的高低&#xff1f; 代码质量的评价具有很强的主观性&#xff0c;描述代码质量的词汇也有很多&#xff0c…...

编程日记 2024/3/17 21:40:06

WPF图表库LiveCharts的使用

这个LiveCharts非常考究版本&#xff0c;它有非常多个版本&#xff0c;.net6对应的是LiveChart2 我这里的wpf项目是.net6&#xff0c;所以安装的是这三个&#xff0c;搜索的时候要将按钮“包括愈发行版”打勾 git&#xff1a;https://github.com/beto-rodriguez/LiveCharts2?…...

编程日记 2024/3/17 21:39:05

第十三届蓝桥杯省赛C++ C组《全题目+题解》

填空题一般都是找规律题目&#xff0c;耐下心来慢慢分析即可。 第一题《排列字母》 【问题描述】 小蓝要把一个字符串中的字母按其在字母表中的顺序排列。 例如&#xff0c;LANQIAO 排列后为AAILNOQ。 又如&#xff0c;GOODGOODSTUDYDAYDAYUP 排列后为AADDDDDGGOOOOPSTUUYYY。…...

编程日记 2024/3/17 21:37:03

Linux——线程池

目录 线程池的概念 线程池的优点 线程池的实现 【注意】 线程池的线程安全 日志文件的实现 线程池的概念 线程池也是一种池化技术&#xff0c;可以预先申请一批线程&#xff0c;当我们后续有任务的时候就可以直接用&#xff0c;这本质上是一种空间换时间的策略。 如果有任…...

编程日记 2024/3/17 21:36:02

Linux：搭建ntp服务器

我准备两个centos7服务器 一个为主服务器连接着外网&#xff0c;并且搭建了ntp服务给其他主机同步 另外一个没有连接外网&#xff0c;通过第一台设备去同步时间 首先两个服务器都要安装ntp软件 yum -y install ntp 再把他俩的时间都改成别的 左侧的是主服务器&#xff0c;主…...

编程日记 2024/3/17 21:32:59

unity学习（57）——选择角色界面--删除角色2

1.客户端添加点击按钮所触发的事件&#xff0c;在selectMenu界面中增加myDelete函数&#xff0c;当点击“删除角色”按钮时触发该函数的内容。 public void myDelete() {string message nowPlayer.id;//string m Coding<StringDTO>.encode(message);NetWorkScript.get…...

编程日记 2024/3/17 21:30:57

Flutter：构建美观应用的跨平台方案

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…...

编程日记 2024/3/17 21:29:56

【深度学习模型移植】用torch普通算子组合替代torch.einsum方法

首先不得不佩服大模型的强大之处&#xff0c;在算法移植过程中遇到einsum算子在ONNX中不支持&#xff0c;因此需要使用普通算子替代。参考TensorRT - 使用torch普通算子组合替代torch.einsum爱因斯坦求和约定算子的一般性方法。可以写出简单的替换方法&#xff0c;但是该方法会…...

编程日记 2024/3/17 21:28:54

鸿蒙 Harmony 初体验

前言 看现在网上传得沸沸扬扬的鸿蒙&#xff0c;打算弄个 hello world 玩一下, 不然就跟不上时代的发展了 环境安装 我的环境 Windows 11 家庭中文版HarmonyOS SDK (API 9)DevEco Studio (3.1.1 Release)Node.js (16.19.1) 开发IDE下载 官方下载链接 配置 nodejs 这里帮…...

编程日记 2024/3/17 21:27:53

UE5 学习系列（二）用户操作界面及介绍

这篇博客是 UE5 学习系列博客的第二篇&#xff0c;在第一篇的基础上展开这篇内容。博客参考的 B 站视频资料和第一篇的链接如下&#xff1a; 【Note】&#xff1a;如果你已经完成安装等操作&#xff0c;可以只执行第一篇博客中 2. 新建一个空白游戏项目 章节操作&#xff0c;重…...

编程新知 2025/11/3 20:10:56

【Linux】shell脚本忽略错误继续执行

在 shell 脚本中&#xff0c;可以使用 set -e 命令来设置脚本在遇到错误时退出执行。如果你希望脚本忽略错误并继续执行&#xff0c;可以在脚本开头添加 set e 命令来取消该设置。 举例1 #!/bin/bash# 取消 set -e 的设置 set e# 执行命令&#xff0c;并忽略错误 rm somefile…...

编程新知 2025/9/11 15:27:32

树莓派超全系列教程文档--(61)树莓派摄像头高级使用方法

树莓派摄像头高级使用方法 配置通过调谐文件来调整相机行为 使用多个摄像头安装 libcam 和 rpicam-apps依赖关系开发包 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 配置 大多数用例自动工作&#xff0c;无需更改相机配置。但是&#xff0c;一…...

编程新知 2025/10/29 8:42:26

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2025/11/2 5:02:11

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/9/11 12:55:04

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

编程新知 2025/11/3 9:50:37

从 GreenPlum 到镜舟数据库：杭银消费金融湖仓一体转型实践

作者&#xff1a;吴岐诗&#xff0c;杭银消费金融大数据应用开发工程师 本文整理自杭银消费金融大数据应用开发工程师在StarRocks Summit Asia 2024的分享 引言&#xff1a;融合数据湖与数仓的创新之路 在数字金融时代&#xff0c;数据已成为金融机构的核心竞争力。杭银消费金…...

编程新知 2025/11/2 10:50:19

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

编程新知 2025/7/27 8:17:48

Vue ③-生命周期 || 脚手架

生命周期 思考&#xff1a;什么时候可以发送初始化渲染请求&#xff1f;&#xff08;越早越好&#xff09; 什么时候可以开始操作dom&#xff1f;&#xff08;至少dom得渲染出来&#xff09; Vue生命周期&#xff1a; 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...

编程新知 2025/10/15 0:28:44

【LeetCode】算法详解#6 ---除自身以外数组的乘积

1.题目介绍 给定一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O…...

编程新知 2025/11/2 9:18:28