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

html5cssjs代码 014 布局框架

news 文章来源：https://blog.csdn.net/qq_40071585/article/details/136661878 2025/5/10 3:10:59

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

Jmeter+ant，ant安装与配置

1.ant含义 ant&#xff1a;Ant翻译过来是蚂蚁的意思&#xff0c;在我们做接口测试的时候&#xff0c;是可以用来做JMeter接口测试生成测试报告的工具 2.ant下载 下载地址&#xff1a;Apache Ant - Ant Manual Distributions download中选择ant 下载安装最新版zip文件 3.…...

编程日记 2024/3/17 21:24:51

【MySQL基础】MySQL基础操作三

文章目录 &#x1f349;1.联合查询&#x1f95d;笛卡尔积 &#x1f349;2.内连接&#x1f95d;查询单个数据&#x1f95d;查询多个数据 &#x1f349;3.外连接&#x1f349;4.自连接&#x1f349;5.合并查询 &#x1f349;1.联合查询 &#x1f95d;笛卡尔积 实际开发中往往数…...

编程日记 2024/3/17 21:22:49

【K8s】肿么办？？Kubernetes Secrets并不是Secret哟！！

【K8s】肿么办？？Kubernetes Secrets并不是Secret哟！！ 目录 【K8s】肿么办？？Kubernetes Secrets并不是Secret哟！！Kubernetes Secrets为什么不认为 Base64 编码是密文？问题出现了以下是几种加密 K8s Secrets 的选项。Bitnami Sealed Secrets 介绍Bitnami Sealed Secrets…...

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

数星星 刷题笔记 （树状数组）

依题意 要求每个点 x, y 的左下方有多少个星星 又因为 是按照y从小到大 给出的 所以 我们在计算个数的时候是按照y一层层变大来遍历的 因此我们在处理每一个点的时候 只需要看一下 当前的点有多少个点的x值比当前点小即可 树状数组的 操作模板 P3374 【模板】树…...

编程日记 2024/3/17 21:14:38

Windows→Linux，本地同步到服务器

适用背景&#xff1a; 用自己电脑修改代码&#xff0c;使用实验室/公司的服务器炼丹的朋友 优势&#xff1a; 本地 <--> 服务器&#xff0c;实时同步&#xff0c;省去文件传输的步骤 本地改 -> 自动同步到服务器 -> 服务器跑代码 -> 一键同步回本地&#xff…...

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

Pycharm连接远程服务器Anoconda中的虚拟环境

在配置远程解释器时&#xff0c;踩过一些坑&#xff0c;现在记录一下配置过程&#xff1a; 步骤1&#xff1a; 打开pycharm的File里面的Settings 里面的Project:你的项目名称目录下的Python Interpreter。 步骤二&#xff1a; 点击右上角的“add interpreter”&#xff0c;选择…...

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

无人机自动返航算法实现与优化

一、引言 随着无人机技术的快速发展&#xff0c;其在航拍、农业、救援等领域的应用越来越广泛。在这些应用中&#xff0c;无人机的自动返航功能显得尤为重要。一旦无人机失去控制或与遥控器失去连接&#xff0c;自动返航算法能够确保无人机安全返回起飞点&#xff0c;避免损失和…...

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

切面条-蓝桥杯？-Lua 中文代码解题第1题

切面条-蓝桥杯&#xff1f;-Lua 中文代码解题第1题 一根高筋拉面&#xff0c;中间切一刀&#xff0c;可以得到2根面条。 如果先对折1次&#xff0c;中间切一刀&#xff0c;可以得到3根面条。 如果连续对折2次&#xff0c;中间切一刀&#xff0c;可以得到5根面条。 那么&#xf…...

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

WebRTC：真正了解 RTP 和 RTCP

介绍 近年来&#xff0c;通过互联网进行实时通信变得越来越流行&#xff0c;而 WebRTC 已成为通过网络实现实时通信的领先技术之一。WebRTC 使用多种协议&#xff0c;包括实时传输协议 (RTP) 和实时控制协议 (RTCP)。 RTP负责通过网络传输音频和视频数据&#xff0c;而RTCP负责…...

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

vue实现双向绑定原理深度解析

1. vue双向绑定应用场景 Vue的双向绑定机制主要体现在以下几个方面： 表单输入：在表单输入中，Vue的双向绑定机制非常有用。通过v-model指令，可以将表单元素的值与Vue实例中的数据进行双向绑定，当用户在表单输入框中输入内容时，数据会自动更新，反之，当数据发生变化时，输…...

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