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

HTML---网页布局

news 2025/11/1 21:33:01

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结

一.常见网页布局

二.标准文档流 

 标准文档流常见标签

标准文档流的组成
块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等
内联元素<span>、<a>、<strong>、<em>、<img>等

 三.display属性

 在HTML中，display属性用于指定元素的展示方式。该属性可以接受以下几种值：

  •  总结--display特性

 实现块级元素与行级元素的转变，控制块级元素排到一行，控制元素的显示和隐藏。

演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{border: 1px seagreen solid;width: 100px; height: 100px;}span{border: 1px red solid;}</style></head><body><div>我是元素</div><span>我是Span元素</Span></body>
</html>

  • none属性

设置的元素不会被显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: none;}

  •  inline

元素被视为内联元素，并在同一行内显示。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline;}

  •  inline-block

该元素被视为内联块级元素同时具有块元素和行元素的属性。即可设置宽度也可并行排列。

div{width: 100px; height: 100px;border: 1px seagreen solid;display: inline-block;}

四.float属性

  • 浮动属性的特点
  1. 元素浮动后会脱离文档流，不再占据原来的空间，而是向左或向右移动，其他元素会填充到浮动元素所占据的空间。
  2. 浮动元素并可以与其他元素并排显示，如果空间不够，会自动换行或换列，并可以设置宽度和高度：浮动元素可以通过设置宽度和高度来确定其占据的空间大小

演示案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>浮动</title><style>div{margin: 10px; padding: 5px;}#father{border: 1px red solid;}.layer01{border: 1px blue dashed; }.layer02{border: 1px pink dashed; }.layer03{border: 1px green dashed; ;}.layer04{border: 1px skyblue dashed; font-size: 30px; line-height: 100px;}</style></head><body><div id="father"><div class="layer01"><img src="picture1.png" alt="日用品"></div><div class="layer02"><img src="picture2.png" alt="图书"></div><div class="layer03"><img src="picture3.png" alt="鞋子"></div><div class="layer04">浮动盒子可以向左浮动，也可以向右浮动，直到外边缘碰到包含框或另一个浮动盒子为止这里使用三个图片和本段文字来讲解浮动属性在网页中的应用，根据所在的div分别向左/        右/不浮动。</div></div></div>	</body>
</html>

  •  left

设置元素向左浮动

.layer01{border: 1px blue dashed;float: left;}

  • 设置向左浮动后产生上述网页布局的原因： 

    设置向左浮动的元素脱离原来的文档流向左上方移动直到碰到父级边框后停止移动，剩余元素会自动填充浮动元素的原有位置，并防止遮住浮动元素会自适应移动。

.layer02{border: 1px darkorange dashed; float: left;}

  • right 
.layer01{border: 1px blue dashed;float: right;}

.layer02{border: 1px darkorange dashed; float: right;}
  • 总结： 

浮动属性中的左移动/右移动，代表X轴方向的移动。而Y轴方向的移动则需要使用下面的清除浮动属性。

清除浮动

 清除浮动是为了解决浮动元素引起的父元素高度塌陷的问题。

移动规则：

清除左浮动：设置清除左浮的元素会停留在先行左浮元素的下方并且靠右。

清除右浮动：设置清除右浮的元素会停留在先行右浮元素的下方并且靠左。

案例： 

  •  向右浮动并清除向左浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: left;}

  • 上述布局形成原因： 

排在元素layer02前面的元素layer01为右浮动，并未设置左浮动，对于layer02设置清除左浮动之后没有先行元素向左移动，因此layer02元素仅执行向右移动。

  •  向右浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: right;clear: right;}

  •  上述布局形成原因： 

排在元素layer02前面的元素layer01为右浮动，对于layer02设置清除右浮动之后有先行元素向右移动，因此layer02元素会先向右移动并停留在先行元素layer01的下方。

  •  向左浮动并清除右浮动
.layer01{border: 1px blue dashed;float: right;}
.layer02{border: 1px darkorange dashed; float: left;clear: right;}

  •  向右移动并清除两侧浮动

清除两侧浮动的元素将停留在最低元素的下方，并执行浮动的指令向右移动。

.layer03{border: 1px green dashed; float: right;clear: both;}

五. 解决边框塌陷问题

  • 父级边框塌陷的原因：
  1. 浮动元素脱离文档流导致相邻元素无法检测到该浮动元素的边界，进而导致边框塌陷的现象发生。
  2. 相邻的两个元素的margin相遇时较大的margin会覆盖较小的margin，导致边框塌陷的现象发生。

下图为元素浮动导致的父级边框塌陷 

  •  overflow属性

在浮动元素的父元素中设置 overflow:auto; 或 overflow:hidden; 属性。这会使父元素包含浮动元素，并清除浮动，例如：

语法：

#father{border: 1px red solid;overflow: hidden;}

  •  after伪类

在浮动元素的父元素中添加一个带有 content:""; display:table; clear:both; 属性的伪元素。例如:

语法：

#father:after{content: '';/**内容清空**/display: block;/**设置该元素为块元素**/clear: both;/**清除两侧浮动**/}

六.解决内容溢出问题

overflow属性

 内容溢出案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#d1{width: 200px;height: 200px;border: 1px solid rebeccapurple;}</style></head><body><div id="d1"><img src="picture1.png"/><p>都 是勇敢的你额头的伤口 你的 不同 你犯的错都 不必隐藏你破旧的玩偶 你的 面具 你的自我他们说 要带着光 驯服每一头怪兽他们说 要缝好你的伤没有人爱小丑 为何孤独 不可 光荣人只有不完美 值得歌颂谁说污泥满身的不算英雄</p></div></body>
</html>

  •  overflow：scroll

无论内容是否被修剪都设置浏览器以滚动条的方式查看边框内的内容。

语法：

#d1{overflow: scroll;}

  •   overflow：auto

 若内容被修建则设置浏览器以滚动条的方式查看剩余内容，内容未溢出则无需修建不会设置滚动方式。

 练习

一.制作热门活动页面

 二.制作电视剧详情列表页面

三. 制作QQ会员页面导航

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0px; padding: 0px;}/**设置根边框的内外边距**/a{text-decoration:none ;}/**去除超链接下划线**/.nav-header{height: 90px; width: 100%; background: rgba(0, 0, 0, .6); border: 1px red solid;}.head-contain{width: 1180px; height: 90px; margin: 0 auto; text-align: center; border: 1px yellow dashed; border-width: 5px;}.top-logo,.top-nav,.top-nav li,.top-right{  /**针对上述选择器同时设置样式**/height: 90px;display: inline-block;vertical-align: top;/**垂直对齐方式：靠上**/}.top-nav{margin: 0,55; border: 1px blue solid; border-width: 5px;}/**设置右外长度边距**/.top-nav li{line-height: 90px; width: 90px;}.top-nav li a{display: block; text-align: center; font-size: 15px; color: aliceblue;}.top-nav li a:hover{color: blue;}/**设置鼠标点击链接的样式**/.top-right{border: 1px green solid; border-width: 5px;}.top-right a{display: inline-block; font-size: 15px; text-align: center; margin-top: 15px;border-radius: 35px;/**设置边框为圆角**/}.top-right a:nth-child(2){width: 93px;border: 1px solid orange ;position: relative;top: 20px;}.top-right a:nth-child(3){position: relative; top: 20px;}.top-right a:nth-child(2):hover{color: gold;background-color: orange;}</style></head><body><div class="wrap"><header class="nav-header"><!--设置一个根边框用于添加class="head-contain"中的元素--><div class="head-contain"><!--设置一个二级边框添加下列元素--><a href="#" class="top-logo"><img src="picture1.png" width="145px" height="90px"/></a><nav class="top-nav"><!--<nav标签：定义导航模块>--><ul><!--定义一个列表--><li><a href="">功能特权</li><li><a href="">游戏特权</li><li><a href="">生活特权</li><li><a href="">会员活动</li><li><a href="">成长体系</li><li><a href="">年费专区</li><li><a href="">超级会员</li></ul></nav><div class="top-right"><!--设置另一个框架用于存放下列元素--><a href="">登录</a><a href="">开通超级会员</a></div></div>		</header></div></body>
</html>

 黄色边框为二级边框 -黄色边框外层红色边框为根边框-蓝色边框为子边框1-绿色边框为子边框2

总结

相关文章：

HTML---网页布局

目录 文章目录 一.常见的网页布局 二.标准文档流 标准文档流常见标签 三.display属性 四.float属性 总结 一.常见网页布局 二.标准文档流 标准文档流常见标签 标准文档流的组成 块级元素<div>、<p>、<h1>-<h6>、<ul>、<ol>等内联元素<…...

编程日记 2023/12/26 2:15:13

python 普通存款（单利）计算公式：

python 普通存款&#xff08;单利&#xff09;计算公式&#xff1a; 代码如下&#xff1a; #普通存款 单利计算公式&#xff1a;a:原值&#xff0c;n:计算年限&#xff0c;li&#xff1a;利率&#xff08;小数&#xff09;, def danli(a,n,li):print("普通存款(单利)计…...

编程日记 2023/12/26 2:12:10

什么是 PHP 内存溢出 ？遇到了要如何解决呢 ？

PHP内存溢出指的是在PHP应用程序中&#xff0c;分配给脚本执行的内存超出了PHP配置文件中设置的限制。当脚本尝试使用比可用内存更多的内存时&#xff0c;就会发生内存溢出错误。 一、内存溢出可能由以下几个原因引起&#xff1a; 循环引用&#xff1a;如果存在循环引用&#…...

编程日记 2023/12/26 2:11:09

本地使用 docker 运行OpenSearch + Dashboard + IK 分词插件

准备基础镜像 注意一定要拉取和当前 IK 分词插件版本一致的 OpenSearch 镜像: https://github.com/aparo/opensearch-analysis-ik/releases 写这篇文章的时候 IK 最新版本 2.11.0, 而 dockerhub 上 OpenSearch 最新版是 2.11.1 如果版本不匹配的话是不能用的, 小版本号对不上…...

编程日记 2023/12/26 2:07:05

【JavaEE初阶一】线程的概念与简单创建

1. 认识线程&#xff08;Thread&#xff09; 1.1 关于线程 1.1.1 线程是什么 由前一节的内容可知&#xff0c;进程在进行频繁的创建和销毁的时候&#xff0c;开销比较大&#xff08;主要体现在资源的申请和释放上&#xff09;&#xff0c;线程就是为了解决上述产生的问题而提…...

编程日记 2023/12/26 2:05:02

三叠云工程劳务管理，优化建筑施工管理，提升效率与质量

随着建筑行业的蓬勃发展&#xff0c;工程施工现场管理变得愈发复杂。传统的人员管理方式已经无法满足企业快速发展的需求。如何提高施工效率、优化人力资源管理成为了建筑企业亟待解决的问题。逐渐走向数字化的工程建设行业&#xff0c;急需一种足以匹配这一时代变革、高效管理…...

编程日记 2023/12/26 1:57:56

RocketMQ连接报错RemotingConnectException: connect to ＜192.168.57.129:9876＞解决

文章目录 前言一、RocketMQ 连接报错处理1.1 报错信息1.2 修改 broker.conf 文件1.3 Linux 开放端口1.4 项目启动成功 前言 上一篇文章&#xff1a;基于SpringBoot整合RocketMQ异步发送短信功能在项目启动的过程中报了 RocketMQ 连接错误。针对这个问题&#xff0c;本文给予记…...

编程日记 2023/12/26 1:54:53

设计模式--桥接模式

实验9&#xff1a;桥接模式 本次实验属于模仿型实验&#xff0c;通过本次实验学生将掌握以下内容&#xff1a; 1、理解桥接模式的动机&#xff0c;掌握该模式的结构&#xff1b; 2、能够利用桥接模式解决实际问题。 [实验任务]&#xff1a;两个维度的桥接模式 用桥接模式…...

编程日记 2023/12/26 1:53:52

redis基本用法学习（C#调用StackExchange.Redis操作redis）

StackExchange.Redis是基于C#的高性能通用redis操作客户端&#xff0c;也属于常用的redis客户端之一&#xff0c;本文学习其基本用法。   新建Winform项目&#xff0c;在Nuget包管理器中搜索并安装StackExchange.Redis&#xff0c;如下图所示&#xff1a;   StackExchange.…...

编程日记 2023/12/26 1:52:51

单挑力扣（LeetCode）SQL题：1308. 不同性别每日分数总计

相信很多学习SQL的小伙伴都面临这样的困境&#xff0c;学习完书本上的SQL基础知识后&#xff0c;一方面想测试下自己的水平&#xff1b;另一方面想进一步提升&#xff0c;却不知道方法。 其实&#xff0c;对于技能型知识&#xff0c;我的观点一贯都是&#xff1a;多练习、多实…...

编程日记 2023/12/26 1:49:48

Vue3组合式-依赖注入provideinject

一、注意点 专门强调了是3.0且是组合式&#xff0c;不是2.0不支持也不是选项式不支持provide&&inject&#xff0c;是支持但是有很明显的弊端&#xff0c;不建议使用 二、场景 官方的解释: 通常情况下&#xff0c;当我们需要从父组件向子组件传递数据时&#xff0c;会…...

编程日记 2023/12/26 1:47:46

SRE 与 DevOps 的不同之处

尽管网站可靠性工程 (SRE) 理念早在 2003 年就由 Google 的 Ben Treynor Sloss 提出&#xff0c;但其近年来却一直受到追捧。随着 DevOps 实践已经在许多组织中牢固确立&#xff0c;两者之间的冲突是否已经显现&#xff1f;SRE 只不过是一种过时的趋势吗&#xff1f;是 SRE 补充…...

编程日记 2023/12/26 1:45:45

【湖仓一体尝试】MYSQL和HIVE数据联合查询

爬了两天大大小小的一堆坑&#xff0c;今天把一个简单的单机环境的流程走通了&#xff0c;记录一笔。 先来个完工环境照&#xff1a; mysqlhadoophiveflinkicebergtrino 得益于IBM OPENJ9的优化&#xff0c;完全启动后的内存占用&#xff1a; 1&#xff09;执行联合查询后的…...

编程日记 2023/12/26 1:44:43

SpringCloud跨服务调用失败Seata无法回滚解决办法

遇到的问题 在微服务项目中 有A、B、C三个服务 其中 A调用B服务 &#xff0c;B调用C&#xff0c; 这些就是跨服务调用了&#xff0c;在A服务中 还调用了一个当前模块执行插入数据的方法(在这里我就叫它为AA 也就是mybatis/spring管理的本地事务) A服务开启全局事务注解 Globa…...

编程日记 2023/12/26 1:43:43

OSG三维渲染引擎编程学习之一百零一：“第十一章：OSG粒子” 之 “11.2 粒子模拟过程”

目录 第十一章 OSG粒子 11.2 粒子模拟过程 第十一章 OSG粒子 虚拟现实中有很多效果，如雨效、雪效、雾效等，这些都可以通过粒子条统来实现。一个真实的粒子系统的模式能使三维场景达到更好的效果。 粒子系统是一个非常复杂的粒子模拟过程。在OSG中，专门定义了新的名字空间o…...

编程日记 2023/12/26 1:40:38

Autosar CAN开发03（从实际应用认识CAN总线的物理层）

建议同时阅读本专栏的&#xff1a; Autosar CAN开发03&#xff08;从实际应用认识CAN总线的物理层&#xff09; Autosar CAN开发04&#xff08;从实际应用认识CAN报文&#xff09; Autosar CAN开发05&#xff08;从实际应用认识CAN波特率&#xff09; 前言 在上一章的《AU…...

编程日记 2023/12/26 1:31:29

vue中父子组件传值

父传子 传: 在"标签"上传属性 <Card :name"name"></Card> 接: 在props中 export default {props: {name: String},setup(props) {console.log(props.name);} } 子传父 传: 触发,给一个事件传值 setup(props,{emit}) {emit("get…...

编程日记 2023/12/26 1:29:27

【网络编程】基于UDP数据报实现回显服务器/客户端程序

个人主页&#xff1a;兜里有颗棉花糖 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 兜里有颗棉花糖 原创 收录于专栏【网络编程】【Java系列】 本专栏旨在分享学习网络编程的一点学习心得&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 前言 我们如果…...

编程日记 2023/12/26 1:27:25

sqlilabs第三十二三十三关

Less-32&#xff08;GET - Bypass custom filter adding slashes to dangerous chars) 手工注入 由 宽字符注入可知payload 成功触发报错 http://192.168.21.149/Less-32/ ?id1%df 要写字符串的话直接吧字符串变成ascii码 注意16进制的表示方式 自动注入 sqlmap -u http:…...

编程日记 2023/12/26 1:26:24

第二十一章博客

计算机应用实现了多台计算机间的互联&#xff0c;使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序&#xff0c;这些程序借助于网络协议&#xff0c;相互之间可以交换数据。编写网络应用程序前&#xff0c;首先必须明确所要使用的网络协议…...

编程日记 2023/12/26 1:24:22

如何在最短时间内提升打ctf（web)的水平？

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

编程新知 2025/11/1 3:10:07

华硕a豆14 Air香氛版，美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

编程新知 2025/10/24 11:54:49

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

编程新知 2025/10/27 20:21:07

AI语音助手的Python实现

引言 语音助手（如小爱同学、Siri）通过语音识别、自然语言处理（NLP）和语音合成技术，为用户提供直观、高效的交互体验。随着人工智能的普及，Python开发者可以利用开源库和AI模型，快速构建自定义语音助手。本文由浅入深，详细介绍如何使用Python开发AI语音助手，涵盖基础功…...

编程新知 2025/10/29 14:41:59

协议转换利器，profinet转ethercat网关的两大派系，各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...

编程新知 2025/10/29 15:34:09

FFmpeg avformat_open_input函数分析

函数内部的总体流程如下&#xff1a; avformat_open_input 精简后的代码如下&#xff1a; int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...

编程新知 2025/10/31 9:36:44

[拓扑优化] 1.概述

常见的拓扑优化方法有&#xff1a;均匀化法、变密度法、渐进结构优化法、水平集法、移动可变形组件法等。 常见的数值计算方法有&#xff1a;有限元法、有限差分法、边界元法、离散元法、无网格法、扩展有限元法、等几何分析等。 将上述数值计算方法与拓扑优化方法结合&#…...

编程新知 2025/10/30 4:14:18

PydanticAI快速入门示例

参考链接&#xff1a;https://ai.pydantic.dev/#why-use-pydanticai 示例代码 from pydantic_ai import Agent from pydantic_ai.models.openai import OpenAIModel from pydantic_ai.providers.openai import OpenAIProvider# 配置使用阿里云通义千问模型 model OpenAIMode…...

编程新知 2025/11/1 13:09:26

java+webstock

maven依赖 <dependency><groupId>org.java-websocket</groupId><artifactId>Java-WebSocket</artifactId><version>1.3.5</version></dependency><dependency><groupId>org.apache.tomcat.websocket</groupId&…...

编程新知 2025/10/20 16:10:30

智警杯备赛--excel模块

数据透视与图表制作 创建步骤 创建 1.在Excel的插入或者数据标签页下找到数据透视表的按钮 2.将数据放进“请选择单元格区域“中&#xff0c;点击确定 这是最终结果&#xff0c;但是由于环境启不了&#xff0c;这里用的是自己的excel&#xff0c;真实的环境中的excel根据实训…...

编程新知 2025/10/21 21:19:45