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

HTML布局

article 2026/2/18 16:51:27

HTML布局元素

<header>定义文档或者节的页眉
<nav>定义导航链接的容器
<section>定义文档中的一部分
<article>定义单独的文章
<aside>定义内容边栏（如侧边栏）
footer定义文档或节的页脚
<details>定义额外的细节
<summary>为<details>元素定义标题

HTML布局技术

html有四种不同的方法来创建多列布局。每种方式都各有优缺点：
HTML表格
CSS float 属性
CSS 框架
CSS flexbox
HTML表格<table>元素没有被设计成布局工具。<table>元素的设计目的是显示表格数据。因此，不要为页面布局使用表格，这会带来代码混乱。

CSS框架
CSS float属性

在 CSS 框架中，float 属性曾广泛用于实现布局（如网格系统），但随着现代布局技术（Flexbox 和 Grid）的普及，它的使用场景有所减少。浮动元素绑定到文档流，这可能会损害灵活性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div.container{width: 100%;border: 1px solid gray;}header,footer{padding: 1em;color: white;background-color: black;clear: left;text-align: center;}nav{float: left;max-width: 160px;margin: 0;padding: 1em;}nav ul{list-style-type: none;padding: 0;}nav ul a{text-decoration: none;}article{margin-left: 170px;border-left: 1px solid gray;padding: 1em;overflow: hidden;}</style>
</head>
<body><div class="container"><header><h1>城市</h1></header><nav><ul><li><a href="#">北京</a></li><li><a href="#">巴黎</a></li><li><a href="#">东京</a></li></ul></nav><article><h1>北京</h1><p>中国的政治、文化、国际交往和科技创新中心。GDP总量全国领先，兼具历史底蕴与现代活力。</p><p>跨国公司总部聚集地，世界500强企业中国总部多设于此。</p></article><footer>san.com</footer></div></body>
</html>

CSS Flexbox
使用flexbox确保元件的行为可以预见当页面布局必须适应不同的屏幕尺寸和不同的显示设备。缺点：不能在IE10和早期的浏览器工作。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.flex-container{display: -webkit-flex;display: flex;flex-flow:row wrap;text-align: center;}.flex-container > *{padding: 15px;flex:1 100%;flex:1 100%}.article{text-align: left;}header{background: black;color: white;}footer{background: red;color: white;}.nav ul{list-style-type: none;padding: 0;}nav ul a{text-decoration: none;}@media all and (min-width:768px){.nav{text-align: left;-webkit-flex:1 auto;flex:1 auto;-webkit-order:1;order: 2;}.article{-webkit-flex:5 0px;flex: 5 0px;-webkit-order:2;order:2;}footer{-webkit-order:3;order:3;}}</style>
</head>
<body><div class="flex-container"><header><h1>城市</h1></header><nav class="nav"><ul><li><a href="#">北京</a></li><li><a href="#">巴黎</a></li><li><a href="#">东京</a></li></ul></nav><article class="article"><h1>北京</h1><p>中国的政治、文化、国际交往和科技创新中心。GDP总量全国领先，兼具历史底蕴与现代活力。</p><p>跨国公司总部聚集地，世界500强企业中国总部多设于此。</p></article><footer>san.com</footer></div>
</body>
</html>

相关文章：

HTML布局

HTML布局元素 <header>定义文档或者节的页眉 <nav>定义导航链接的容器 <section>定义文档中的一部分 <article>定义单独的文章 <aside>定义内容边栏&#xff08;如侧边栏&#xff09; footer定义文档或节的页脚 <details>定义额外的细节 …...

编程日记 2026/2/16 15:03:38

vue搭建一个树形菜单项目

首先搭建项目需要先通过步骤搭建一个vue的项目&#xff0c;然后创建一个component文件&#xff0c;里面新建一个index.vue页面来。 这是引入的element-ui组件库里的组件&#xff0c;来实现我的路由&#xff0c;渲染的是我存储的动态路由&#xff0c;所以需要先安装并且引用。 …...

编程日记 2026/2/14 4:52:23

具身智能 - Diffusion Policy：技术解析与应用实践

具身智能之 Diffusion Policy：技术解析与应用实践 一、Diffusion Policy 的核心概念 Diffusion Policy 是一种基于扩散模型（Diffusion Models）的决策生成框架，专为具身智能（Embodied Intelligence）设计。其核心思想是通过逐步去噪的过程，在复杂环境中生成鲁棒的动作序列…...

编程日记 2026/2/15 21:29:55

[C++] 智能指针 进阶

标题&#xff1a;[C] 智能指针 进阶 水墨不写bug 在很久之前我们探讨了智能指针的浅显认识&#xff0c;接下来会更加深入&#xff0c;从源码角度认识智能指针&#xff0c;从而了解智能指针的设计原理&#xff0c;并应用到以后的工作项目中。 本文将会按照C智能指针的发展历史&…...

编程日记 2026/2/16 5:21:50

kubernetes》》k8s》》 kubeadm、kubectl、kubelet

kubeadm 、kubectl 、kubelet kubeadm、kubectl和kubelet是Kubernetes中不可或缺的三个组件。kubeadm负责集群的快速构建和初始化&#xff0c;为后续的容器部署和管理提供基础&#xff1b;kubectl作为命令行工具&#xff0c;提供了与Kubernetes集群交互的便捷方式&#xff1b;而…...

编程日记 2026/2/13 20:28:54

AI日报 - 2025年3月30日

&#x1f31f; 今日概览&#xff08;60秒速览&#xff09; ▎&#x1f916; 模型进展 | Qwen2.5-Omni多模态实时交互&#xff0c;Gemini 2.5 Pro/GPT-4o低调升级&#xff0c;Claude内部思考过程揭秘。 新模型和升级持续涌现&#xff0c;多模态与内部机制理解成焦点。 ▎&#x…...

编程日记 2026/2/15 2:27:41

C++中的new、malloc、realloc、calloc——特点？函数原型？释放方式？区别？校招面试常问内容？

作者&#xff1a;求一个demo 版权声明&#xff1a;著作权归作者所有&#xff0c;商业转载请联系作者获得授权&#xff0c;非商业转载请注明出处 内容通俗易懂&#xff0c;没有废话&#xff0c;文章最后是面试常问内容&#xff08;建议通过标题目录学习&#xff09; 废话不多…...

编程日记 2026/2/18 7:46:03

27_promise

插入一下前端助手测试&#xff0c;顺手可以用来做安全 promise promise 是一个es6新增的语法 汉语&#xff1a;承诺的意思 作用:是专门用来解决回调地狱!!!! 什么是回调函数&#xff1f; <script>// 回调函数 callback回调// 就是把函数A当作参数传递到函数B中// 在函…...

编程日记 2026/2/17 22:17:56

leetcode刷题日记——跳跃游戏 II

[ 题目描述 ]&#xff1a; [ 思路 ]&#xff1a; 题目要求在一个一定能达到数组末尾的跳跃数组中(见55题 跳跃游戏)&#xff0c;找出能够跳到末尾的最小次数要求次数最少&#xff0c;那肯定是选取能选步数中最大的数。也就是在当前能够达到的距离中&#xff0c;选择能够达到的…...

编程日记 2026/2/14 4:42:29

无人机进行航空数据收集对于分析道路状况非常有用-使用无人机勘测高速公路而不阻碍交通-

无人机进行航空数据收集对于分析道路状况非常有用-使用无人机勘测高速公路而不阻碍交通- 瑞士拥有1,400 多公里长的高速公路网络。这些公路将人和货物从山谷高原运送到阿尔卑斯山的最高山口。维护这些高速公路使国家得以顺利运转。高速公路维护的重要性显而易见&#xff0c;但在…...

编程日记 2026/2/16 20:04:35

注意力蒸馏技术

文章目录 摘要abstract论文摘要简介方法预备知识注意力蒸馏损失注意力引导采样 实验结论总结参考文献 摘要 本周阅读了一篇25年二月份发表于CVPR 的论文《Attention Distillation: A Unified Approach to Visual Characteristics Transfer》,论文开发了Attention Distillation…...

编程日记 2026/2/15 1:43:31

PERL开发环境搭建＞＞Windows,Linux,Mac OS

特点 简单 快速 perl解释器直接对源代码程序解释执行,是一个解释性的语言, 不需要编译器和链接器来运行代码>>速度快 灵活 借鉴了C/C, Basic, Pascal, awk, sed等多种语言, 定位于实用性语言,既具备了脚本语言的所有功能,也添加了高级语言功能 开源.免费 没有&qu…...

编程日记 2026/2/17 14:49:32

赛博威智慧导购平台，融合AI激活一线导购效能，破局增长瓶颈

导购管理≠“管人”&#xff0c;价值释放才是终极命题 在快消行业&#xff0c;一线导购是链接品牌与消费者的核心触点&#xff0c;更是市场洞察与销售转化的关键枢纽。然而&#xff0c;许多企业对导购的管理仍停留在“管人”的初级阶段&#xff1a;基础考勤、任务下发、薪资核…...

编程日记 2026/2/11 13:56:03

鸿蒙项目源码-记账本app个人财物管理-原创!原创!原创!

鸿蒙记账项目源码个人财务管理含文档包运行成功ArkTS语言。 我一个月写的原创作品&#xff0c;请尊重原创。 原创作品&#xff0c;盗版必究&#xff01;&#xff01;&#xff01; api12 SDK5.0.0仅适用于最新的2024版本DevEco studio 共9个页面&#xff1a;广告倒计时页、登录、…...

编程日记 2026/2/16 9:01:37

深入理解 `git pull --rebase` 与 `--allow-unrelated-histories`：区别、原理与实战指南

&#x1f680; git pull --rebase vs --allow-unrelated-histories 全面解析 在日常使用 Git 时&#xff0c;我们经常遇到两种拉取远程代码的方式&#xff1a;git pull --rebase 和 git pull --allow-unrelated-histories。它们的区别是什么&#xff1f;各自适用哪些场景&…...

编程日记 2026/2/16 0:08:30

ExpTimerApcRoutine函数分析之作用是ActiveTimerListHead里面移除定时器_etimer

第一部分&#xff1a; VOID ExpTimerApcRoutine ( IN PKAPC Apc, IN PKNORMAL_ROUTINE *NormalRoutine, IN PVOID *NormalContext, IN PVOID *SystemArgument1, IN PVOID *SystemArgument2 ) /* Routine Description: This function is the special …...

编程日记 2026/2/14 23:16:24

Ovito的python脚本

在 OVITO 里，Python 对象是构建脚本化操作的基础。下面为你详细介绍 OVITO 中 Python 对象的基本概念： 1. 数据管道（Pipeline） 数据管道是 OVITO 里最核心的对象之一。它就像一个流水线，把数据输入进来，经过一系列处理步骤，最后输出处理好的数据。 创建管道：借助 imp…...

编程日记 2026/2/14 21:46:25

【免费】2007-2019年各省地方财政文化体育与传媒支出数据

2007-2019年各省地方财政文化体育与传媒支出数据 1、时间&#xff1a;2007-2019年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;行政区划代码、地区、年份、地方财政文化体育与传媒支出 4、范围&#xff1a;31省 5、指标说明&#xff1a;地方财政在文化、…...

编程日记 2026/2/16 3:02:11

3PL EDI：SA Piper Logistics EDI需求分析

SA Piper Logistics成立于2005年&#xff0c;是一家专注于全球供应链管理的第三方物流服务商&#xff08;3PL&#xff09;&#xff0c;总部位于美国芝加哥。公司以“优化物流效率&#xff0c;重塑供应链价值”为使命&#xff0c;提供仓储管理、运输规划、订单履行及跨境清关等一…...

编程日记 2026/2/15 8:29:12

NOIP2007提高组.矩阵取数游戏

题目 492. 矩阵取数游戏 思路 不难发现, 每一行之间是独立的, 因此可以求出每一行的最大值, 然后行与行之间最大值相加, 就是总的最大值 对于行内来说, 每次可以选取左边或者右边, 可以使用区间 d p dp dp求解, 时间复杂度 O ( n 3 ) O(n ^ 3) O(n3), 因为列的最大值是 80 …...

编程日记 2026/2/18 2:53:57

项目实战--权限列表

后端数据&#xff1a; 用表格实现权限列表 const dataSource [{key: 1,name: 胡彦斌,age: 32,address: 西湖区湖底公园1号,},{key: 2,name: 胡彦祖,age: 42,address: 西湖区湖底公园1号,}, ];const columns [{title: 姓名,dataIndex: name,key: name,},{title: 年龄,dataInd…...

编程日记 2026/2/18 1:38:09

若依赖前端处理后端返回的错误状态码

【背景】 后端新增加了一个过滤器&#xff0c;用来处理前端请求中的session 若依赖存放过滤器的目录&#xff1a;RuoYi-Vue\ruoyi-framework\src\main\java\com\ruoyi\framework\security\filter\ 【问题】 后端返回了一个状态码为403的错误&#xff0c;现在前端需要处理这…...

编程日记 2026/2/17 12:29:18

【计网】数据包

期末复习自用的&#xff0c;处理得比较草率&#xff0c;复习的同学或者想看基础的同学可以看看&#xff0c;大佬的话可以不用浪费时间在我的水文上了 1.数据包的定义&#xff1a; 数据包是网络通信中的基本单元&#xff0c;它包含了通过网络传输的所有必要信息。数据包的结构…...

编程日记 2026/2/14 4:46:06

web权限划分提权和移权

前言&#xff1a;权限的基本认知 渗透权限划分&#xff1a;假如我们通过弱口令进入到web的后台 这样我们就拿到了web的管理员权限 管理员权限是web中最高的权限&#xff08;一般我们进入web的时候数据库会进行用户权限的划分&#xff1a;假设 0-10为最高的权限 11-10000为普通…...

编程日记 2026/2/15 3:07:27

LocalDateTime序列化总结

版权说明&#xff1a; 本文由CSDN博主keep丶原创&#xff0c;转载请保留此块内容在文首。 原文地址&#xff1a; https://blog.csdn.net/qq_38688267/article/details/146703276 文章目录 1.背景2.序列化介绍常见场景关键问题 3.总体方案4.各场景实现方式WEB接口EasyExcelMybat…...

编程日记 2026/2/14 6:01:40

[ 春秋云境 ] Initial 仿真场景

文章目录 靶标介绍&#xff1a;外网内网信呼oa永恒之蓝hash传递 靶标介绍&#xff1a; Initial是一套难度为简单的靶场环境&#xff0c;完成该挑战可以帮助玩家初步认识内网渗透的简单流程。该靶场只有一个flag&#xff0c;各部分位于不同的机器上。 外网 打开给的网址, 有一…...

编程日记 2026/2/17 5:36:54

unity 截图并且展现在UI中

using UnityEngine; using UnityEngine.UI; using System.IO; using System.Collections.Generic; using System; using System.Collections;public class ScreenshotManager : MonoBehaviour {[Header("UI 设置")]public RawImage latestScreenshotDisplay; // 显示…...

编程日记 2026/2/15 14:14:32

XHR.readyState详解

XHR.readyState详解 引言 XHR.readyState是XMLHttpRequest对象的一个属性，它反映了当前请求的状态。在Ajax编程中，正确理解和使用XHR.readyState对于调试和确保异步请求的正确执行至关重要。本文将详细介绍XHR.readyState的属性值、含义以及在Ajax请求中的具体应用。 XHR.…...

编程日记 2026/2/16 2:51:19

SQL Server数据库引擎服务启动失败：端口冲突

问题现象&#xff1a; SQL Server 2022 安装完成后&#xff0c;数据库引擎服务无法启动&#xff0c;日志报错 “TCP 端口 1433 已被占用”&#xff08;ERROR_LOG_SYS_TCP_PORT&#xff09;。 快速诊断 检测端口占用&#xff1a; # 查看 1433 端口占用情况&#xff08;需管理员权…...

编程日记 2026/2/15 6:57:03

前端知识点---用正则表达式判断邮箱(javascript)

// 全面的正则&#xff08;兼容大多数情况&#xff09; const emailRegex /^[a-zA-Z0-9._%-][a-zA-Z0-9.-]\.[a-zA-Z]{2,}$/;// 或直接使用浏览器内置验证 <input type"email" required>/&#xff1a;正则表达式的起始和结束标志。 ^&#xff1a;匹配字符串的…...

编程日记 2026/2/16 13:19:12