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

web前端——简单的网页布局案列

news 2026/2/8 3:39:46

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

问题背景

解决样例

网页版

手机版

源代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

问题背景

将网页布局成上面的样子。

解决样例

网页版

手机版

源代码

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网页设计</title><style>hr {height: 3px;background-color: green;border: none;margin: 20px 0;}.center-text {text-align: center;color: blue;font-size: 24px;margin-top: 20px;}.poem {text-align: center;margin: 20px 0;}.bold-center {text-align: center;font-weight: bold;}.poem-title {font-weight: bold;}</style>
</head><body><div class="center-text">网页中的文字</div><hr><div class="poem"><div class="poem-title">锦瑟</div>锦瑟无端五十弦，一弦一柱思华年。<br>庄生晓梦迷蝴蝶，望帝春心托杜鹃。<br>沧海月明珠有泪，蓝田日暖玉生烟。<br>此情可待成追忆，只是当时已惘然。</div><hr><div class="bold-center">使用<code>&lt;code&gt;</code>标签输入计算机代码。</div><br>
<code>
int main(){int x;printf("请输入一个十进制整数：\n");scanf("%d",&x);printf("输入十进制整数为：%d\\n");doctob{x};doctob{x};doctob{x}; 
}
</code><hr><div class="bold-center">使用<code>&lt;pre&gt;</code>标签输入计算机代码。</div><br>
<pre>
int main(){int x;printf("请输入一个十进制整数：\n");scanf("%d",&x);printf("输入十进制整数为：%d\\n");doctob{x};doctob{x};doctob{x}; 
}
</pre>
</body></html>

代码的使用方法（超简单什么都不用下载）

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

总结

学校简单的入门案列，分享给大家。

本章的内容就到这里了，觉得对你有帮助的话就关注一下博主吧~

🌌点击下方个人名片，交流会更方便哦~
↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

web前端——简单的网页布局案列

✨博主：命运之光 🌸专栏：Python星辰秘典 🐳专栏：web开发（简单好用又好看） ❤️专栏：Java经典程序设计 ☀️博主的其他文章：点击进入博主的主页目录问题背景解决样例 …...

编程日记 2023/9/13 21:00:08

线程安全问题(3)--- wait()，notify()

前言在多线程的环境下，我们常常要协调多个线程之间的执行顺序，而为了实现这一点，Java提供了一些方法来帮助我们完成这一点。一，wait() 作用： 使当前线程进入等待状态释放当前的锁 (即该方法必须和 synchrnized 关键…...

编程日记 2023/9/13 20:58:06

【Android知识笔记】进程通信（一）

一、Android Framework 用到了哪些 IPC 方式 Linux 的 IPC 方式有：管道Socket共享内存信号信号量消息队列管道通信管道是基于pipefs文件系统实现的，也就是多个进程通过对同一个文件进行读写来实现进程间通信。半双工，单向的，通过 pipe(fds) 系统函数调用可得到一对文件描…...

编程日记 2023/9/13 20:56:04

存储空间压缩6倍，多点DMALL零售SaaS场景降本实践

🧑‍💼 作者简介冯光普：多点 DMALL 数据库团队负责人，负责数据库稳定性建设与 DB PaaS 平台建设，在多活数据库架构、数据同步方案等方面拥有丰富经验。杨家鑫：多点高级 DBA，擅长故障分析与性能…...

编程日记 2023/9/13 20:54:02

BGP路由属性

任何一条BGP路由都拥有多个路径属性（Path Attributes），当路由器通告BGP路由给它的对等体时，该路由将会携带多个路径属性，这些属性描述了BGP路由的各项特征，同时在某些场景下也会影响BGP路由优选的决策。一…...

编程日记 2023/9/13 20:53:01

Java面试常用函数

1. charAt() 方法用于返回字符串指定索引处的字符。索引范围为从 0 到 length() - 1。 map.getOrDefault(num, 0) :如果map存在num这个key，则返回num对应的value，否则返回0. Arrays.sort(nums); 数组排序 Arrays.asList("a","b",&q…...

编程日记 2023/9/13 20:48:57

openssl下载和编译 https://www.openssl.org/source/old/ 解压 tar -xvf openssl-3.0.1.tar.gz cd openssl-3.0.1/配置 ./config如果是编译静态库加入 -fPIC no-shared 如果指定安装路径，使用 --prefix=/usr/local/openssl/选项指定特定目录编译和安装 make sodu make i…...

编程日记 2023/9/13 20:47:56

Ei Scopus检索 | 2024年第三届能源与环境工程国际会议(CFEEE 2024)

会议简介 Brief Introduction 2024年第三届能源与环境工程国际会议(CFEEE 2024) 会议时间：2024年9月1日-3日召开地点：新西兰奥克兰大会官网：https://www.cfeee.org/ 2024年第三届能源与环境工程国际会议(CFEEE 2024) 将于2024年12月12日至1…...

编程日记 2023/9/13 20:46:55

thinkphp6（tp6）创建定时任务

使用 thinkphp6 框架中提供的命令行形式实现定时任务一、创建一个自定义命令类文件 php think make:command Hello 会生成一个 app\command\Hello.php 命令行指令类，我们修改内容如下： <?php declare (strict_types1);namespace app\command;use …...

编程日记 2023/9/13 20:44:53

【学习笔记】C++ 中 static 关键字的作用

目录前言static 作用在变量上static 作用在全局变量上static 作用在局部变量上static 作用在成员变量上 static 作用在函数上static 作用在函数上static 作用在成员函数上前言在 C/C 中，关键字 static 在不同的应用场景下，有不同的作用，这…...

编程日记 2023/9/13 20:43:52

攻防世界-web-file_include

1. 题目描述打开界面，如下代码： 代码很简单，从参数中获取到filename然后include这个filename 2. 思路分析 2.1 首先参考常见做法，将参数设置为php://filter/readconvert.base64-encode/resourceflag.php，看是否有…...

编程日记 2023/9/13 20:42:51

C语言的函数指针、指针函数，函数数组

函数指针是指向函数的指针，它允许您在程序运行时动态选择要调用的函数。函数指针可以像普通变量一样传递、存储和使用，这使得它们在许多编程场景中非常有用，如回调函数、函数表、插件架构等。以下是一个简单的例子来说明函数指针的概念&a…...

编程日记 2023/9/13 20:38:47

笔记本开启WiFi

笔记本开启WiFi 为了节省流量：笔记本开启WiFi 条件支持热点的电脑；我的是华硕飞行堡垒7。注意事项笔记本连接公司网络，公司网络通常都在监管下的，手机连接wifi后，刷抖音、购物网站，公司后台会捕获你…...

编程日记 2023/9/13 20:36:45

力扣第37天----第322题、第279题

力扣第37天----第322题、第279题文章目录力扣第37天----第322题、第279题一、第322题--零钱兑换二、第279题--组合总和 Ⅳ 一、第322题–零钱兑换整体思路，跟前面的几道完全背包差不多，就不具体解释了。有一些细节要注意，见代码注释。…...

编程日记 2023/9/13 20:35:44

【ArcGIS Pro二次开发】(67)：处理面要素空洞

这个一个简单的小功能。有些面要素可能会存在空洞，这个工具的目的就是获取面要素的空洞，或者去除空洞获取要素的边界。这个功能其实在之前做拓扑功能的时候就已经有了，这次只是单独把它提取出来。因为有时候会单独用到这个功能。一、要实…...

编程日记 2023/9/13 20:33:42

FPGA-结合协议时序实现UART收发器（一）：UART协议、架构规划、框图

FPGA-结合协议时序实现UART收发器（一）：UART协议、架构规划、框图记录FPGA的UART学习笔记，以及一些细节处理，主要参考奇哥fpga学习资料。本次UART主要采用计数器方法实现，实现uart的稳定性发送和接收功能…...

编程日记 2023/9/13 20:32:41

web请求cookie中expires总结

用意 cookie 有失效日期 "expires"，如果还没有过失效期，即使重新启动电脑，cookie 仍然不会丢失注意：如果没有指定 expires 值，那么在关闭浏览器时，cookie 即失效。设置如果cookie存储时间大…...

编程日记 2023/9/13 20:31:40

如何学习Java核心知识

Java作为一门广泛应用于软件开发的编程语言，拥有着强大的生态系统和丰富的资源，是值得投入时间和精力去学习的。以下是一些建议，帮助你系统地学习Java核心知识。 1. 学习Java语言基础： 学习Java语言基础是学习Java的第一步&…...

编程日记 2023/9/13 20:30:38

【AWS】如何用SSH连接aws上的EC2实例（虚拟机）？

目录 0.环境 1.连接结果示例 2.SSH连接思路 3.具体步骤 1）安装并运行ssh服务 2）启动ssh服务 3）在AWS上找到正在运行的EC2实例，并且根据提供的ssh连接语句进行连接 0.环境 windows 11 64位前提： 有aws账户&…...

编程日记 2023/9/13 20:28:36

数据结构——看完这篇保证你学会队列

数据结构——队列一、队列的概念二、队列的实现方式三、队列所需要的接口四、接口的详细实现4.1初始化4.2销毁4.3入队4.5出队4.6获取队头元素4.7获取队尾元素4.8获取队列元素个数4.9判空五、完整代码5.1Queue.h5.2Queue.c5.3test.c 一、队列的概念队列：只允许在…...

编程日记 2023/9/13 20:27:34

装饰模式（Decorator Pattern）重构java邮件发奖系统实战

前言现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...

编程新知 2026/2/1 21:34:47

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/11/8 0:24:13

【位运算】消失的两个数字（hard）

消失的两个数字（hard） 题⽬描述：解法（位运算）：Java 算法代码：更简便代码题⽬链接：⾯试题 17.19. 消失的两个数字题⽬描述： 给定⼀个数组，包含从 1 到 N 所有…...

编程新知 2025/11/15 16:18:24

ios苹果系统，js 滑动屏幕、锚定无效

现象：window.addEventListener监听touch无效，划不动屏幕，但是代码逻辑都有执行到。 scrollIntoView也无效。原因：这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作，从而会影响…...

编程新知 2026/2/4 19:47:03

Typeerror: cannot read properties of undefined (reading ‘XXX‘)

最近需要在离线机器上运行软件，所以得把软件用docker打包起来，大部分功能都没问题，出了一个奇怪的事情。同样的代码，在本机上用vscode可以运行起来，但是打包之后在docker里出现了问题。使用的是dialog组件，…...

编程新知 2025/9/24 3:05:06

关键领域软件测试的突围之路：如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天，软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件，这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下，实现高效测试与快速迭代？这一命题正考验着…...

编程新知 2026/1/27 13:20:11

重启Eureka集群中的节点，对已经注册的服务有什么影响

先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。但如果操作不当，可能会引发短暂的服务发现问题。下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...

编程新知 2025/9/24 3:38:34

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子： 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

使用Spring AI和MCP协议构建图片搜索服务

目录使用Spring AI和MCP协议构建图片搜索服务引言技术栈概览项目架构设计架构图服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式（本地调用） SSE模式（远程调用） 4. 注册工具提…...

编程新知 2026/1/25 14:31:47

uniapp 开发ios， xcode 提交app store connect 和 testflight内测

uniapp 中配置配置manifest 文档：manifest.json 应用配置 | uni-app官网 hbuilderx中本地打包下载IOS最新SDK 开发环境 | uni小程序SDK hbulderx 版本号：4.66 对应的sdk版本 4.66 两者必须一致本地打包的资源导入到SDK 导入资源 | uni小程序SDK …...

编程新知 2026/1/31 8:35:07

问题背景

解决样例

网页版

手机版

源代码

代码的使用方法（超简单什么都不用下载）

总结

相关文章：