HTML---网页布局

news2025/1/15 22:57:58

目录

文章目录

一.常见的网页布局

二.标准文档流 

 标准文档流常见标签

 三.display属性

四.float属性

总结


一.常见网页布局

二.标准文档流 

 标准文档流常见标签

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

 三.display属性

 在HTML中,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;
	}

  •  总结--display特性

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

四.float属性

 


总结

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1331778.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Hadoop入门学习笔记——一、VMware准备Linux虚拟机

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 一、VMware准备Linux虚拟机1.1. VMware安装Linux虚拟机1.…

机密计算容器前沿探索与 AI 场景应用

作者&#xff1a;壮怀、朱江云 企业与个人对数据隐私保护日益关切&#xff0c;从数据&#xff0c;网络的可信基础设施扩展到闭环可信的计算基础设施&#xff0c;可信的计算&#xff0c;存储&#xff0c; 网络基础设施必定成为云计算的标配。 机密计算技术应运而生&#xff0c;…

Python遥感影像深度学习指南(1)-使用卷积神经网络(CNN、U-Net)和 FastAI进行简单云层检测

【遥感影像深度学习】系列的第一章,Python遥感影像深度学习的入门课程,介绍如何使用卷积神经网络(CNN)从卫星图像中分割云层 1、数据集 在本项目中,我们将使用 Kaggle 提供的 38-Cloud Segmentation in Satellite Images数据集。 该数据集由裁剪成 384x384 (适用…

AWD认识和赛前准备

AWD介绍 AWD: Attack With Defence, 北赛中每个队伍维护多台服务器&#xff0c;服务器中存在多个漏洞&#xff0c;利 用漏洞攻击其他队伍可以进行得分,修复漏洞可以避免被其他队伍攻击失分。 一般分配Web服务器&#xff0c;服务器(多数为Linux)某处存在flag(一般在根目录下)&am…

在Excel中,如何简单快速地删除重复项,这里提供详细步骤

当你在Microsoft Excel中使用电子表格时&#xff0c;意外地复制了行&#xff0c;或者如果你正在制作其他几个电子表格的合成电子表格&#xff0c;你将遇到需要删除的重复行。这可能是一项非常无脑、重复、耗时的任务&#xff0c;但有几个技巧可以让它变得更简单。 删除重复项 …

【MybatisPlus快速入门】(3)SpringBoot整合MybatisPlus 之 Lombok插件安装及MybatisPlus分页代码示例

目录 1.Lombok1.1 步骤1:添加lombok依赖 2.2 步骤2:安装Lombok的插件1.3 步骤3:模型类上添加注解2 分页功能2.1 步骤1:调用方法传入参数获取返回值2.2步骤2:设置分页拦截器2.3 步骤3:运行测试程序 之前我们已学习MyBatisPlus在代码示例与MyBatisPlus的简介&#xff0c;在这一节…

Could not resolve com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.28.

1、首先进入阿里云maven仓库&#xff0c;在搜索栏输入无法下载的依赖名称&#xff0c;查询现有版本号&#xff0c;可以看到这里有2.9.34。 2、在build.gradle(Project)的buildscript闭包下替换为阿里云maven仓库&#xff1a; maven { url https://www.jitpack.io } maven { u…

在k8s中使用Helm安装harbor并将Chart推送到私有仓库harbor

使用Helm安装harbor并将Chart推送到私有仓库harbor 注意&#xff1a;如果你的harbor是之前docker-compose安装的&#xff0c;还需要额外做一个动作&#xff0c;让它支持chart docker-compose stop ./install.sh --with-chartmuseum1&#xff09;下载harbor的chart包 Harbor的…

【经典LeetCode算法题目专栏分类】【第10期】排序问题、股票问题与TOP K问题:翻转对、买卖股票最佳时机、数组中第K个最大/最小元素

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推荐--…

Docker - 镜像 | 容器 日常开发常用指令 + 演示(一文通关)

目录 Docker 开发常用指令汇总 辅助命令 docker version docker info docker --help 镜像命令 查看镜像信息 下载镜像 搜索镜像 删除镜像 容器命令 查看运行中的容器 运行容器 停止、启动、重启、暂停、恢复容器 杀死容器 删除容器 查看容器日志 进入容器内部…

CGAL的网格简化

1、介绍 曲面网格简化是减少曲面网格中使用的面数&#xff0c;同时尽可能保持整体形状、体积和边界的过程。它是细分法的反面。 这里提出的算法可以使用称为边折叠的方法简化任何有向2流形曲面&#xff0c;具有任意数量的连接组件&#xff0c;有或没有边界&#xff08;边界或孔…

体验一下 CodeGPT 插件

体验一下 CodeGPT 插件 0. 背景1. CodeGPT 插件安装2. CodeGPT 插件基本配置3. (可选)CodeGPT 插件预制提示词原始配置(英文)4. CodeGPT 插件预制提示词配置(中文)5. 简单验证一下 0. 背景 看到B站Up主 “wwwzhouhui” 一个关于 CodeGPT 的视频&#xff0c;感觉挺有意思&#…

leetcode 268. 丢失的数字(优质解法)

链接&#xff1a;268. 丢失的数字 代码: class Solution {public int missingNumber(int[] nums) {int result0;for(int i0;i<nums.length;i){result^i;}for(int i0;i<nums.length;i){result^nums[i];}return result;} } 题解&#xff1a; 本题是比较简单的题&#xff…

将PPT的图保持高分辨率导入到Word / WPS中

1、将PPT中画好的图组合在一起&#xff0c;选择组合后的图复制&#xff08;Ctrlc&#xff09; 2、在Word中&#xff0c;选中左上角的粘贴选项--->选择性粘贴 WPS选择元文件 / Word选择增强型图元文件 这样放大也不模糊了

期末加油站-图像处理期末知识点汇总

第三章&#xff1a;图像增强 一、概念 1.图像增强是通过某种技术有选择地突出对某一具体应用有用的信息&#xff0c;削弱或抑制一些无用的信息。 2. 图像增强处理不是无损处理&#xff0c;不能增加原图像的信息。 3. 图像增强按所处理的对象不同可分为&#xff1a; 灰度图像增…

汽车服务品牌网站建设的作用是什么

汽车服务涵盖多个层面&#xff0c;在保修维护这一块更是精准到了车内车外&#xff0c;无论是品牌商还是市场中各维修部&#xff0c;都能给到车辆很好的维修养护服务。如今车辆的人均拥有量已经非常高&#xff0c;也因此市场中围绕汽车相关的从业者也比较多。 首先就是拓客引流…

ApsaraMQ Serverless 演进之路,助力企业降本

作者&#xff1a;家泽 ApsaraMQ 与时俱进&#xff0c;砥砺前行 阿里云消息队列从诞生开始&#xff0c;至今已有十余年。今年&#xff0c;阿里云消息产品全面品牌升级为 ApsaraMQ&#xff0c;与时俱进&#xff0c;砥砺前行。 2012 年&#xff0c;RocketMQ 诞生于集团内部&…

DLLNotFoundException:xxx tolua... 错误打印

DLLNotFoundException:xxx tolua... 错误打印 一、DLLNotFoundException介绍二、Plugins文件夹文件目录结构如下&#xff1a; 三、Plugins中的Android文件夹四、Plugins中的IOS文件夹这里不说了没测试过不过原理应该也是选择对应的平台即可五、Plugins中的x86和X86_64文件夹 一…

Hadoop入门学习笔记——六、连接到Hive

视频课程地址&#xff1a;https://www.bilibili.com/video/BV1WY4y197g7 课程资料链接&#xff1a;https://pan.baidu.com/s/15KpnWeKpvExpKmOC8xjmtQ?pwd5ay8 Hadoop入门学习笔记&#xff08;汇总&#xff09; 目录 六、连接到Hive6.1. 使用Hive的Shell客户端6.2. 使用Beel…

【一起学Rust | 框架篇 | Tauri2.0框架】Tauri2.0环境搭建与项目创建

文章目录 前言一、搭建 Tauri 2.0 开发环境二、创建 Tauri 2.0 项目1.创建项目2.安装依赖4. 编译运行 三、设置开发环境四、项目结构 前言 Tauri在Rust圈内成名已久&#xff0c;凭借Rust的可靠性&#xff0c;使用系统原生的Webview构建更小的App 以及开发人员可以灵活的使用各…