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

做名片的网站/网上怎么发布广告

news 文章来源：https://blog.csdn.net/zhoutong2323/article/details/135202375 2025/3/13 0:02:11
做名片的网站,网上怎么发布广告,房屋平面设计软件手机版,中国反钓鱼网站联盟目录 文章目录 一.定位属性概述 二.position 基础数值 三.z-index属性 网页元素透明度 练习 一.定位属性概述 HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。 position属性指定了元素的定位方式&a…

目录

文章目录

一.定位属性概述

二.position

基础数值

 三.z-index属性

 网页元素透明度

练习

一.定位属性概述

   HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性，包括position、top、bottom、left和right等。

  • position属性指定了元素的定位方式，常用的取值有static、relative、absolute和fixed。通过设置不同的position值，可以实现元素的不同定位方式。
  • top、bottom、left和right属性用于精确地定位元素的位置。当position属性的值为relative时，这些属性参照的是元素自身的位置进行调整；当position属性的值为absolute或fixed时，这些属性参照的是最近的具有定位属性的父元素进行调整。

二.position

基础数值

position属性中的值
static默认值，没有定位
relative相对定位
absolute绝对定位
fixed固定定位

演示案例： 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">div{margin: 10px; padding: 5px; font-size: 15px; line-height: 25px;}#father{border: 1px solid red;padding: 0px;}#first{background-color: orange;border: 1px blue dashed;}#second{background-color: aqua;border: 1px gray dashed;}#third{background-color: aquamarine;border: 1px green solid;}</style></head><body><div id="father"><div id="first">第一个盒子</div><div id="second">第二个盒子</div><div id="third">第三个盒子</div></body>
</html>

  • static 

默认值，无定位

  • relative

相对定位：元素相对于其正常位置进行定位，可以通过top、right、bottom、left属性调整位置。

  • 案例：
#first{background-color: orange;border: 1px blue dashed;position: relative;top: 100px;/**设置偏移量**/
}

相对定位中元素的原有位置会被保留，父级边框不会塌陷。 相对定位中top：0px left：0px的坐标轴为元素本身。

  •  absolute

绝对定位：设置绝对定位后的元素将处于悬浮状态。

  •  案例：
#first{background-color: orange;border: 1px blue dashed;position: absolute;	}

结论： 

绝对定位的元素会触发浮动：悬浮，剩余元素将自动补齐浮动元素的位置。 

  • 停留在浏览器的左上角 
#first{background-color: orange;border: 1px blue dashed;position: absolute;	top: 0px;left: 0px;}

  • 停留在上一级元素边框的左上角 
#father{border: 1px solid red;padding: 0px;position: relative;}
#first{background-color: orange;border: 1px blue dashed;position: absolute;	top: 0px;left: 0px;}

结论： 

 绝对定位的top：0px left：0px 的坐标轴在上一级设置过元素的左上角，若没有则停留在浏览器左上角。

  •  fixed

固定定位：

固定定位的元素不会随着浏览器的滚动而改变位置，但会脱离标准文档流，产生悬浮

案例：

#father{border: 1px solid red;padding: 0px;height: 1000px;}
#first{background-color: orange;border: 1px blue dashed;position: absolute;		}
#second{background-color: aqua;border: 1px gray dashed;}
#third{background-color: aqua;border: 1px gray dashed; position: fixed;}

  • 停留在浏览器左上角 
#third{background-color: aqua;border: 1px gray dashed; position: fixed;top: 0px;left: 0px;}

 三.z-index属性

在CSS中，z-index属性用于控制元素的堆叠顺序。它指定了一个元素在Z轴上的顺序，即元素在层叠元素堆里的垂直位置。

当两个或多个元素重叠时，z-index属性决定了哪个元素会显示在顶部。默认情况下，元素的堆叠顺序由它们在HTML中的出现顺序决定。后出现的元素会覆盖先出现的元素。

z-index属性的值可以是整数或auto。较高的值表示元素将显示在较低的值上面。

例如，如果一个元素A具有z-index值为2，而另一个元素B具有z-index值为1，那么元素A将显示在元素B上面。

 网页元素透明度

 案例：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">*{margin: 0px;padding: 0px;				}ul{list-style: none;position: relative;}#content{width: 330px;overflow: hidden;padding: 5px;font-size: 12px;line-height: 25px;border: 1px red solid;	margin: 0 auto;/***设置边框居中*/}#l2,#l3{ /**id="l2"作为空列表属于块状元素需要设置高度否则会被下级元素覆盖**/position: absolute;width: 330px;height: 25px;top:100px}#l2{color: aliceblue;text-align: center;z-index: 0;}#13{}#l3{background-color: black;opacity:0.5;z-index: 1;}</style></head><body><div id=content><ul><li><img src="picture1.png"/></li><li id="l2">金秋魅力.相约共享香山红叶</li><li id="l3"></li><!--设置一个空列表作为id="12"的背景列表--><li>时间:2023年12月20日20:28:10</li><li>地点:朝阳区西大望江路珠江帝景K区正门前集合</li></ul></div></body>
</html>

练习

相关文章：

HTML---定位

目录 文章目录 一.定位属性概述 二.position 基础数值 三.z-index属性 网页元素透明度 练习 一.定位属性概述 HTML中的定位属性指的是用来控制HTML元素在页面中的位置和布局的属性&#xff0c;包括position、top、bottom、left和right等。 position属性指定了元素的定位方式&a…...

编程日记 2023/12/28 5:50:12

JVM高频面试题（2023最新版）

JVM面试题 1、JVM内存区域 Jvm包含两个子系统和两个组件。 1.1子系统 Class loader&#xff08;类加载器&#xff09;&#xff1a;根据给定的全限定名类名&#xff08;java.lang.object&#xff09;来装载class文件到Runtime data area&#xff08;运行时数据区&#xff09;…...

编程日记 2023/12/28 5:43:05

webpack学习-7.创建库

webpack学习-7.创建库 1.暴露库1.1概念1.2验证1.2.1 不导出方法1.2.2 导出方法 2.外部化 lodash3.外部化的限制4.最终步骤5.使用自己的库5.1坑 6.总结 1.暴露库 这个模块学习有点坑。看名字就是把自己写的个包传到npm&#xff0c;而且还要在项目中使用到它&#xff0c;支持各种…...

编程日记 2023/12/28 5:42:03

MQTT - 笔记

1 Mosquitto 官网 https://mosquitto.org/ 2 Windows环境下安装配置Mosquitto服务及入门操作介绍 Windows环境下安装配置Mosquitto服务及入门操作介绍-CSDN博客 3 开源：MQTT安装与配置使用 【C++】开源：MQTT安装与配置使用_c++ mqtt-CSDN博客 4 一文搞懂Qt-MQTT开发...

编程日记 2023/12/28 5:37:59

Django 安装

各位小伙伴想要博客相关资料的话&#xff0c;关注公众号&#xff1a;chuanyeTry即可领取相关资料&#xff01; Django 安装 在安装 Django 前&#xff0c;系统需要已经安装了 Python 的开发环境。 如果你还没有安装 Python&#xff0c;请先从 Python 官网 https://www.python…...

编程日记 2023/12/28 5:34:57

推荐一个vscode看着比较舒服的主题：Dark High Contrast

主题名称&#xff1a;Dark High Contrast &#xff08;意思就是&#xff0c;黑色的&#xff0c;高反差的&#xff09; 步骤&#xff1a;设置→Themes→Color Theme→Dark High Contrast 效果如下&#xff1a; 感觉这个颜色的看起来比较舒服。...

编程日记 2023/12/28 5:32:55

YCSB 测试表预分区

最近使用 YCSB 测试时&#xff0c;一直使用如下方法创建预分区&#xff1a; TABLE_NAME"usertable" REGIN_SPLITS$((510-1)) cat << EOF | sudo -u hbase hbase shell create ${TABLE_NAME}, cf, {SPLITS > (1..${REGIN_SPLITS}).map {|i| "user#{100…...

编程日记 2023/12/28 5:31:54

K8s 教程

一文让你全面了解K8s(Kubernetes) - 知乎 Install and Set Up kubectl on Linux | Kubernetes阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 留存一份地址...

编程日记 2023/12/28 5:29:52

python：改进型鳟海鞘算法（SSALEO）求解23个基本函数

一、改进型鳟海鞘算法SSALEO 改进型鳟海鞘算法&#xff08;SSALEO&#xff09;由Mohammed Qaraad等人于2022年提出。 参考文献&#xff1a;M. Qaraad, S. Amjad, N. K. Hussein, S. Mirjalili, N. B. Halima and M. A. Elhosseini, "Comparing SSALEO as a Scalable Larg…...

编程日记 2023/12/28 5:28:51

Hive-数据模型详解（超详细）

文章目录 一、Hive数据模型1. 概述2. 数据库和表(1) 创建数据库(2) 使用数据库(3) 创建表格(4) 查看表结构 3. 分区与桶(1) 分区(2) 桶 4. 数据加载与查询(1) 数据导入(2) 查询语句 5. 总结 一、Hive数据模型 1. 概述 Hive是基于Hadoop的数据仓库工具&#xff0c;它提供了类似…...

编程日记 2023/12/28 5:27:50

docker的常规使用总结

不安装docker下载镜像&#xff0c;或者下载异构镜像&#xff0c;模拟docker客户端 https://pull.7ii.win/ 1、启动docker服务 systemctl start docker 设置开机自启 systemctl enable docker 2、查看镜像 docker images --查看下载镜像架构 docker inspect 镜像名字 |…...

编程日记 2023/12/28 5:15:38

CSS 文字弹跳效果

鼠标移过去 会加快速度 <template><div class"bounce"><p class"text" :style"{animationDuration: animationDuration}">欢迎使用UniApp Vue3&#xff01;</p></div> </template><script> export d…...

编程日记 2023/12/28 5:09:32

什么是动态IP？静态IP和动态IP有什么区别？

动态IP(Dynamic IP)和静态IP(Static IP)它是指在计算机网络中分配给设备的两种不同类型的IP地址。 动态IP是指每次设备连接到网络时&#xff0c;网络服务提供商(ISP)IP地址的动态分配。当设备重新连接到网络时&#xff0c;它可能会被分配到不同的IP地址。动态IP适用于传统的家…...

编程日记 2023/12/28 5:05:27

Linux 与 Shell

Linux系统的四部分&#xff1a;Linux系统的核心是内核。内核主要负责四种功能&#xff1a; 系统内存管理 操作系统内核的主要功能之一&#xff1a;内存管理。&#xff08;物理内存 虚拟内存&#xff09;内核通过硬盘上称为交换空间&#xff08;swap space&#xff09;的存储区…...

编程日记 2023/12/28 4:49:12

大数据-Hive练习-环比增长率、同比增长率、复合增长率

目录 &#x1f959;12.1 环比增长率 1. 概述 2. 公式 3. 示例 4.练习-需求:计算各类商品的月环比增长率 &#x1f959;12.2 同比增长率 1. 概述 2. 公式 3. 示例 4. 练习-需求:计算各类商品的月同比增长率 &#x1f959;12.3 复合增长率 1. 概述 2. 公式 3. 示例…...

编程日记 2023/12/28 4:47:10

C++ 考前难点总结

前言 后天考c&#xff0c;但这几天得甲流了&#xff0c;特别难受&#xff01;复习c的时候复习着忘着&#xff0c;所以用csdn记录一下不熟悉的知识点&#xff0c;等后天考前再看一遍&#xff01; 函数模板 #include <iostream>// 定义一个模板类 template <class T1…...

编程日记 2023/12/28 4:44:08

ARM 汇编语言知识积累

博文参考&#xff1a; arm中SP&#xff0c;LR&#xff0c;PC寄存器以及其它所有寄存器以及处理器运行模式介绍 arm平台根据栈进行backtrace的方法-腾讯云开发者社区-腾讯云 (tencent.com) 特殊功能寄存器&#xff1a; SP&#xff1a; 即 R13&#xff0c;栈指针&#xff0c;…...

编程日记 2023/12/28 4:43:06

k8s面试之——简述网络模型

kubernetes网络模型是kubernetes集群中管理容器网络通信的一种机制&#xff0c;用于实现pod间、pod与外部网络间的通信和互联&#xff0c;并提供了多种网络插件和配置选项来满足不同应用场景下的需求。kubernetes网络模型可以分为一下几个部分&#xff1a; 1. pod网络模型 在…...

编程日记 2023/12/28 4:42:05

C语言中关于if else的理解

if else我们可以理解为 if(条件1) //如果条件1成立 语句1&#xff1b; //执行语句1 else //如果条件1不成立 语句2; //执行语句2 这是一个经典的if els…...

编程日记 2023/12/28 4:41:04

Keil5软件仿真 定时器互补通道 波形输出（Logic Analyzer）

步骤一&#xff1a;管脚配置确认。 ①配置定时器的管脚模式为复用推挽输出模式&#xff08;GPIO_MODE_AF_PP&#xff09;&#xff01;&#xff01;&#xff01;&#xff0c;注意&#xff1a;复用开漏模式软件仿真时无波形。 步骤二&#xff1a;编译程序。 ①点击编译按钮。 …...

编程日记 2023/12/28 4:40:03

华纳云：怎么实现Linux主机ssh无密码登录

实现Linux主机之间的SSH无密码登录可以通过使用SSH密钥对。以下是简单的步骤&#xff1a; 步骤 1: 生成SSH密钥对 打开终端&#xff0c;并在本地计算机上执行以下命令&#xff1a; ssh-keygen -t rsa 此命令将生成一对SSH密钥(公钥和私钥)。您可以选择在生成密钥时设置密码&…...

编程日记 2023/12/28 4:39:01

模型树实操

很多时候&#xff0c;数据都是有层级和分类的&#xff0c;使用laravel的Dcat框架&#xff0c;可以快速搭建一个结构清晰、且可以鼠标拖拽排序的后台&#xff1b;先上例子更直观&#xff1a; 这里是Dcat的模型树使用文档&#xff0c;戳一下&#xff1b; 重点注意事项有&#x…...

编程日记 2023/12/28 4:37:59

html table+css实现可编辑表格

要实现可编辑的 HTML 表格&#xff0c;你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。 <!DOCTYPE html> <html> <head><style>table {border-collapse: collapse;width: 100%;}th, td {border: 1px solid black;padding: 8px;text-align:…...

编程日记 2023/12/28 4:35:56

c语言：计算1+2+3……+n的和｜练习题

一、题目 输入一个数n&#xff0c;计算123……n的和 二、代码截图【带注释】 三、源代码【带注释】 #include int main() { int num0; printf("请输入要运算的数:"); scanf("%d",&num); sumResult(num);//相加结果函数 } //计算打印…...

编程日记 2023/12/28 4:32:54

Yolov5水果分类识别+pyqt交互式界面

Yolov5 Fruits Detector Yolov5 是一种先进的目标检测算法&#xff0c;可以应用于水果分类识别任务。结合 PyQT 框架&#xff0c;可以创建一个交互式界面&#xff0c;使用户能够方便地上传图片并获取水果分类结果。以下将详细阐述 Yolov5 水果分类识别和 PyQT 交互式界面的实现…...

编程日记 2023/12/28 4:26:49

正式环境和sandbox中的RecordTypeId不一样应该怎么办

如果在 Salesforce 正式环境和 Sandbox 中&#xff0c;RecordTypeId 不一样&#xff0c;通常需要在代码或配置中进行适配&#xff0c;以确保代码在不同环境中的兼容性。以下是一些常见的方法&#xff1a; 使用自定义设置或自定义标签&#xff1a; 创建自定义设置或自定义标签来…...

编程日记 2023/12/28 4:24:47

7种常见的网络安全设备及其功能

网络安全设备在现代网络环境中起着至关重要的作用&#xff0c;帮助保护个人和组织免受恶意攻击。本文将介绍7种常见的网络安全设备&#xff0c;包括防火墙、入侵检测系统、反病毒软件、数据加密设备、虚拟私人网络、安全信息和事件管理系统以及网络访问控制设备&#xff0c;并详…...

编程日记 2023/12/28 4:22:45

vue3实现pinia仓库状态持久化

使用 pinia-plugin-persistedstate 实现pinia仓库状态持久化 安装 pnpm i pinia-plugin-persistedstate # or npm i pinia-plugin-persistedstate # or yarn add pinia-plugin-persistedstatemain.ts引入 import persist from pinia-plugin-persistedstate const app creat…...

编程日记 2023/12/28 4:14:38

Node.js(三)-模块的加载机制

1. 优先从缓存中加载 模块在第一次加载后会被缓存&#xff0c;这就意味着多次调用require()不会导致模块的代码被执行多次。 注意:不论是内置模块、用户自定义模块、还是第三方模块&#xff0c;它们都会优先从缓存中加载&#xff0c;从而提高模块的加载效率. 2. 内置模块的加…...

编程日记 2023/12/28 4:10:35

函数

1、概述 1.1、函数分类 1&#xff09;系统函数&#xff08;库函数&#xff09; 2&#xff09;用户定义函数 1.2、函数的作用 降低代码重复率让程序更加模块化&#xff0c;利于阅读、修改和完善 1.3、函数的调用&#xff1a;随机数 函数调用 5 要素&#xff1a; 头文件&…...

编程日记 2023/12/28 4:07:32