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

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

news 文章来源：https://blog.csdn.net/VLOKL/article/details/132696142 2024/12/29 3:36:06

✨博主：命运之光 

🌸专栏：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>

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

🍓1.打开记事本 

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

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

总结

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

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

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

 

相关文章：

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

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

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

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

前言 在多线程的环境下&#xff0c;我们常常要协调多个线程之间的执行顺序&#xff0c;而为了实现这一点&#xff0c;Java提供了一些方法来帮助我们完成这一点。 一&#xff0c;wait() 作用&#xff1a; 使当前线程进入等待状态 释放当前的锁 (即该方法必须和 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场景降本实践

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

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

BGP路由属性

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

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

Java面试常用函数

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

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

linux编译curl库（支持https）

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) 会议时间&#xff1a;2024年9月1日-3日 召开地点&#xff1a;新西兰奥克兰 大会官网&#xff1a;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 命令行指令类&#xff0c;我们修改内容如下&#xff1a; <?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 中&#xff0c;关键字 static 在不同的应用场景下&#xff0c;有不同的作用&#xff0c;这…...

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

攻防世界-web-file_include

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

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

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

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

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

笔记本开启WiFi

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

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

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

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

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

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

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

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

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

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

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

web请求cookie中expires总结

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

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

如何学习Java核心知识

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

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

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

目录 0.环境 1.连接结果示例 2.SSH连接思路 3.具体步骤 1&#xff09;安装并运行ssh服务 2&#xff09;启动ssh服务 3&#xff09;在AWS上找到正在运行的EC2实例&#xff0c;并且根据提供的ssh连接语句进行连接 0.环境 windows 11 64位 前提&#xff1a; 有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 一、队列的概念 队列&#xff1a;只允许在…...

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

开源免费缺陷管理工具：对比6款

在软件开发环境中&#xff0c;缺陷管理工具是关键的基础设施。例如&#xff0c;在构建一个电商平台时&#xff0c;这些工具能系统地跟踪从发现到解决的各个问题阶段。它们支持多用户协作&#xff0c;实现信息和状态的实时共享。通过数据分析&#xff0c;这些工具还能帮助团队识…...

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

Weblogic反序列化漏洞

文章目录 1、搭建环境2、漏洞特征3、漏洞利用1)获取用户名密码2)后台上传shell 4、检测工具 1、搭建环境 漏洞环境基于vulhub搭建–进入weak_password的docker环境 sudo docker-compose up -d拉取靶场 2、漏洞特征 404特征Weblogic常用端口&#xff1a;7001 3、漏洞利用…...

编程日记 2023/9/13 20:23:29

element-ui el-table 滚动到底部，进行加载下一页

使用element-ui 自带的InfiniteScroll 无限滚动组件无法使用在table里面&#xff0c;所以项目只能组件写一个 俺的方法是写了一个自定义组件&#xff0c;进行监听滚动条是否拉到最底部进行一个处理。方法如下 直接复制完事了&#xff0c; loadTableMore: { bind(el, binding…...

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

线性代数的学习和整理19，特征值，特征向量，以及引入的正交化矩阵概念（草稿）

目录 1 什么是特征值和特征向量&#xff1f; 1.1 特征值和特征向量这2个概念先放后 1.2 直观定义 1.3 严格定义 2 如何求特征值和特征向量 2.1 方法1&#xff1a;结合图形看&#xff0c;直观方法求 2.1.1 单位矩阵的特征值和特征向量 2.1.2 旋转矩阵 2.2 根据严格定义…...

编程日记 2023/9/13 20:20:26

初步了解android如何锁键

百年三万六千日&#xff0c;光阴只有瞬息间。 手机下面的三个图形&#xff0c;正方形&#xff0c;园形&#xff0c;三角形分别的什么建&#xff1f;都起到什么功能&#xff1f; 三角形的那个叫返回键&#xff0c;就是可以返回你的上一个操作; 圆形是HOME键&#xff0c;按一下可…...

编程日记 2023/9/13 20:19:25

行业追踪，2023-09-13

自动复盘 2023-09-13 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

编程日记 2023/9/13 20:18:25

$nextTick和setTimeout区别（宏任务微任务）

nextTick 在vue 源码中是利用 Promise.resolve()实现的。该问题实际就是Promise与setTimeout的区别&#xff0c;本质是Event Loop中微任务与宏任务的区别。 nextTick:在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;获取更新后的 DOM。…...

编程日记 2023/9/13 20:17:24

Linux内核及可加载内核模块编程

图1 Linux系统整体结构 图2 Linux的源代码结构 下面显示一段内核模块代码案例&#xff1a; #include <linux/moduLe.h> #include <linux/kernel.h #include <linux/intt.h> /*模块的初始化函数lkp_ init()_init是用于初始化的修饰符 */ static int __init lk…...

编程日记 2023/9/13 20:16:22

软件设计师_备考笔记

考试介绍及考点分布情况 考试要求&#xff1a; &#xff08;1&#xff09;掌握数据表示、算术和逻辑运算&#xff1b; &#xff08;2&#xff09;掌握相关的应用数学、离散数学的基础知识&#xff1b; &#xff08;3&#xff09;掌握计算机体系结构以及各主要部件的性能和基…...

编程日记 2023/9/13 20:11:16

Java学习笔记------抽象类和抽象方法

抽象方法 抽象方法&#xff1a;将共性的行为&#xff08;方法&#xff09;抽取到父类之后&#xff0c;由于每一个子类执行的内容是不一样的&#xff0c;所以&#xff0c;在父类中不能确定具体的方法体&#xff0c;该方法就可以定义为抽象方法抽象类&#xff1a;如果一个类中存…...

编程日记 2023/9/13 20:10:15

初中学历怎么提升大专学历/重庆seo网站运营

在超MINI核心板 stm32F103C8最小系统板上调试Usart2功能&#xff1a;用Jlink 6Pin接口连接WStm32f103c8的Uart2,PC机向mcu发送数据&#xff0c;mcu收到数据后数据加1&#xff0c;回传给PC,并把 D1 指示灯状态取反. 硬件连接&#xff1a; 1、R27 悬空不焊接&#xff1b; 2、将P输…...

编程日记 2024/12/29 3:01:52

网站建站平台系统/网络公司优化关键词

2019独角兽企业重金招聘Python工程师标准>>> 满足OOM Killer条件的有可能是下面几种情况&#xff1a; RAM和Swap不足时物理内存太慢NUMA架构下&#xff0c;某个节点满足上面两点&#xff0c;也会出现。如何查找进程可能是被OOM Killer干掉的&#xff1a; /var/log/m…...

编程日记 2024/12/29 2:54:49

都是做面食网站/上海百度推广优化

1&#xff1a; 今天自己写一个用户控件&#xff0c;&#xff0c;放在aspx页面用&#xff0c;&#xff0c;刚好想到 能不能放到 html页面里于是测试一下&#xff0c;&#xff0c;不可以。。托不进去。 &#xff08;2013-5-9&#xff09;...

编程日记 2024/12/29 2:13:32

济南网站建设小程序/全媒体运营师

Calico网络 两台Docker主机如何实现容器互通&#xff1f; Docker跨主机会分配相同的的IP&#xff0c;这样肯定是无法通信的&#xff0c;在本地ping 172.17.0.2肯定是找的该主机上面的172.0.02不会去找另外一台主机上面的容器 Q&#xff1a; 1、统一管理这些k8s node网段&am…...

编程日记 2024/12/28 23:57:42

天津做公司网站/百度竞价推广出价技巧

Go中如何将json文件的内容映射到struct caoxinyiyi 关注 2018.06.29 17:32 字数 56 阅读 253评论 0喜欢 2 前言 工作中由于项目需求的需要&#xff0c;将json文件的内容要映射到struct 1、Json文件内容结构的定义 [ { "GoMethodName":"BasicTypeBool"…...

编程日记 2024/12/28 22:40:36

nh网站建设/谷歌推广网站

交换式服务 第2层的交换机和网桥在工作时要比路由器快许多&#xff0c;因为它们没有对数据包进行任何修改&#xff0c;不会花费时间去查看网络层头部的信息。 它们只是在决定转发、泛洪或是丢弃数据帧之前查看帧的硬件地址。与集线器不同&#xff0c;交换机能够创建私有的、专用…...

编程日记 2024/12/28 22:11:09