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

用css和html制作太极图

news 来源：原创 2025/6/9 6:57:56

css相关参数介绍

边距

边框

伪元素选择器

太极图案例实现、

代码

效果

css相关参数介绍

边距

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: 100px;height: 100px;/* margin-left: -110px; *//* 内边距 : 边框距离内容的长度*//* padding:100px; *//*    上下内边距  左右边距*//* padding: 100px 500px; *//*       上     右      下     左 *//* padding: 10px 100px  200px 300px; *//* 距离上边界的长度 *//* padding-top: 100px; *//* 距离左边界的长度 *//* padding-left: 100px; *//* 距离底边界的长度 *//* padding-bottom: 100px; *//* 距离右边界的长度 *//* padding-right: 100px; *//* 外边距 ：边界距离其他标签或者页面的长度*//* margin:100px 200px ; *//* margin: 10px 100px 200px 400px; *//* 左边距 *//* margin-left: 100px;margin-top: 100px;margin-right: 100px;margin-bottom: 100px; */border: 1px solid red;/*  默认情况下块元素的宽跟页面相同，高的默认值是0 */}</style></head><body><div>11111111111</div><p>22222222222</p></body>
</html>

边框

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>div{width: 100px;height: 100px;/* border缩略写法*//* border: dashed 1px red; *//* 以下三个属性完全等价于上面的边框 */border-width: 1px;/* border-color: red; */border-style: solid;/* 将四个角进行圆化处理 *//* border-radius: 50%; *//* 左上角圆化 *//* border-top-left-radius: 50%; *//* 右下角圆化 *//* border-bottom-right-radius: 50%; *//* 右上 *//* border-top-right-radius: 50%; *//* 左下 *//* border-bottom-left-radius: 50%; *//* 左边绿色 */border-left-color: green;border-top-color: red;border-right-color: yellow;border-bottom-color: purple;border-left-style: dashed;border-top-style: dotted;border-right-style: groove;border-bottom-style: solid;}</style></head><body><div></div></body>
</html>

伪元素选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}ul{list-style: none;}/* 	ul>li{border: 1px solid red;} *//* 标签中的文字的第一个字符做渲染 *//* ul>li::first-letter{font-size: 50px;color: rebeccapurple;} *//* ul>li::first-line{font-size: 50px;color: rebeccapurple;} */ul>li::before{/* 在写before伪元素是，content必须存在，否则整个伪元素无效 */content: "";display: inline-block;width: 10px;height: 10px;border: 1px solid blue;margin-right: 10px;margin-top: 20px;background-color: blue;border-radius: 50%;}</style></head><body><ul><li>壹234567890</li><li>贰asdasdfsdf</li><li>叁ccccccc</li></ul></body>
</html>

太极图案例实现、

代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>body{background-color: burlywood;}div{width: 0;height: 200px;border-left-width: 100px;border-left-color: white;border-left-style: solid;border-right-width: 100px;border-right-color: black;border-right-style: solid;border-radius: 50%;			}div::before,div::after{content: "";width: 25px;height: 25px;display: block;background-color: white;border: 37.5px black solid;border-radius: 50%;margin-left: -50px;}div::after{border-color: white;background-color: black;}</style></head><body><div></div></body>
</html>

效果

用css和html制作太极图

目录 css相关参数介绍边距边框伪元素选择器太极图案例实现、代码效果 css相关参数介绍边距 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title><style>*{margin: 0;padding: 0;}div{width: …...

编程日记 2025/6/4 17:19:08

软件测试入门—功能需求分析：以一个旅游管理系统为例

在软件测试的旅程中，功能需求分析是测试人员构建高质量测试用例的基础，它确保软件的各项功能都能按照预期正常运行。接下来，我们将以一个旅游管理系统为例，详细阐述如何进行功能需求分析，帮助大家更清晰地掌握这一重要…...

编程日记 2025/6/2 23:50:02

深度解析Linux中关于操作系统的知识点

操作系统概述与核心概念任何计算机系统都包含一个基本的程序集合，成为操作系统OS 操作系统是一款进行软硬件管理的软件操作系统包括： 内核（进程管理，内存管理，驱动管理） 其他程序（例如数据…...

编程日记 2025/6/2 23:50:34

【深度学习】关键技术-激活函数（Activation Functions）

激活函数（Activation Functions） 激活函数是神经网络的重要组成部分，它的作用是将神经元的输入信号映射到输出信号，同时引入非线性特性，使神经网络能够处理复杂问题。以下是常见激活函数的种类、公式、图形特点及其应…...

编程日记 2025/6/2 23:49:31

分布式ID的实现方案

1. 什么是分布式ID 对于低访问量的系统来说，无需对数据库进行分库分表，单库单表完全可以应对，但是随着系统访问量的上升，单表单库的访问压力逐渐增大，这时候就需要采用分库分表的方案，来缓解压力。 …...

编程日记 2025/6/2 7:46:00

电脑有两张网卡，如何实现同时访问外网和内网？

要是想让一台电脑用两张网卡，既能访问外网又能访问内网，那可以通过设置网络路由还有网卡的 IP 地址来达成。检查一下网卡的连接得保证电脑的两张网卡分别连到外网和内网的网络设备上，像路由器或者交换机啥的。给网卡配上不一样的 IP 地…...

编程日记 2025/6/2 23:50:19

Linux 查看内存命令

目录 1. free 2. vmstat 3. top 4. htop 5. /proc/meminfo 1. free free命令是最常用的查看内存使用情况的命令。它显示系统的总内存、已使用内存、空闲内存和交换内存的总量。 free -h -h 选项：以易读的格式（如GB、MB）显示内存大小。…...

编程日记 2025/5/30 9:06:20

无法联网怎么在docker中安装Ribbitmq

如果无法连接互联网，无法在Docker中安装RabbitMQ。但是，您可以使用本地镜像或者手动下载RabbitMQ的Docker镜像并进行安装。以下是使用本地镜像的步骤： 从可以上网的计算机上拉取RabbitMQ的官方Docker镜像： docker pull rabbitmq:…...

编程日记 2025/6/4 4:39:14

Spring Boot 定时任务搭建及Quartz对比详解

前言： 之前在帮别人搭建定时任务时被问到为什么不用 Quartz 反而使用 SpringBoot 定时任务以下是 SpringBoot 定时任务的使用情况大家可参考具体情况选择使用 1. 概述： Spring Boot 定时器是基于 Spring Framework 的 Task Scheduling 模块实现的…...

编程日记 2025/6/4 16:12:20

集中式架构vs分布式架构

一、集中式架构如何准确理解集中式架构 1. 集中式架构的定义集中式架构是一种将系统的所有计算、存储、数据处理和控制逻辑集中在一个或少数几个节点上运行的架构模式。这些中央节点（服务器或主机）作为系统的核心，负责处理所有用户请求和…...

编程日记 2025/5/30 16:38:55

中国数字安全产业年度报告（2024）

数字安全是指，在全球数字化背景下，合理控制个人、组织、国家在各种活动中面临的数字风险，保障数字社会可持续发展的政策法规、管理措施、技术方法等安全手段的总和。数字安全领域可从三个方面对应新质生产力的三大内涵:一是基于大型语言模型…...

编程日记 2025/6/2 4:17:27

Python Wi-Fi密码测试工具

Python Wi-Fi测试工具相关资源文件已经打包成EXE文件，可双击直接运行程序，且文章末尾已附上相关源码，以供大家学习交流，博主主页还有更多Python相关程序案例，秉着开源精神的想法，望大家喜欢，点…...

编程日记 2025/6/4 13:05:19

深入探讨DICOM医学影像中的MPPS服务及其具体实现

深入探讨DICOM医学影像中的MPPS服务及其具体实现 1. 引言在医疗影像的管理和传输过程中，DICOM（数字影像和通信医学）标准发挥着至关重要的作用。除了DICOM影像的存储和传输（如影像存储SCP和影像传输SCP），…...

编程日记 2025/6/4 10:57:09

【Rust自学】12.3. 重构 Pt.1：改善模块化

12.3.0. 写在正文之前第12章要做一个实例的项目——一个命令行程序。这个程序是一个grep(Global Regular Expression Print)，是一个全局正则搜索和输出的工具。它的功能是在指定的文件中搜索出指定的文字。这个项目分为这么几步： 接收命令行参数读取…...

编程日记 2025/6/2 22:19:54

Cosmos：英伟达发布世界基础模型，为机器人及自动驾驶开发加速！

1. 简介在2025年消费电子展（CES）上，NVIDIA发布了全新的Cosmos平台，旨在加速物理人工智能（AI）系统的开发，尤其是自主驾驶车辆和机器人。该平台集成了生成式世界基础模型（WFM&#x…...

编程日记 2025/6/2 22:20:10

【Docker】保姆级 docker 容器部署 MySQL 及 Navicat 远程连接

🥰🥰🥰来都来了，不妨点个关注叭！ 👉博客主页：欢迎各位大佬!👈 文章目录 1. docker 容器部署 MySQL1.1 拉取mysql镜像1.2 启动容器1.3 进入容器1.4 使用 root 用户登录 2. Navicat 连…...

编程日记 2025/6/4 6:59:04

Java IDEA中Gutter Icons图标的含义

前些天发现了一个蛮有意思的人工智能学习网站,8个字形容一下"通俗易懂，风趣幽默"，感觉非常有意思,忍不住分享一下给大家。 👉点击跳转到教程前言： 很多人刚开始用IDEA来学习编程，会发现下面这些图标。但是…...

编程日记 2025/6/2 12:50:01

Broker收到消息之后如何存储

1.前言此文章是在儒猿课程中的学习笔记，感兴趣的想看原来的课程可以去咨询儒猿课堂《从0开始带你成为RocketMQ高手》，我本人觉得这个作者还是不错，都是从场景来进行分析，感觉还是挺适合我这种小白的。这块主要都是我自己的学习笔…...

编程日记 2025/6/3 12:59:46

RuoYi框架上传图片或文件到阿里云OSS详细教程

为了提供一个更加详细的教程，我们将深入探讨每个步骤，并添加一些额外的细节和最佳实践建议。以下是关于如何在Ruoyi框架中集成阿里云OSS实现文件上传功能的详尽指南。详细教程环境准备注册阿里云账号：访问阿里云官网并创建一个账户。创…...

编程日记 2025/6/3 12:23:42

【论文笔记】SmileSplat：稀疏视角+pose-free+泛化

还是一篇基于dust3r的稀疏视角重建工作，作者联合优化了相机内外参与GS模型，实验结果表明优于noposplat。 abstract 在本文中，提出了一种新颖的可泛化高斯方法 SmileSplat，可以对无约束（未标定相机的）稀疏多…...

编程日记 2025/5/30 15:13:58

python实现收到一封邮件时自动触发执行读取邮件内容及后续操作

要实现收到一封邮件时自动触发执行 getEmailData()，可以结合定时任务或实时事件监控机制来实现。以下是两种常用的方法： 方法 1：轮询方式（定时检测） 使用 schedule 或 time.sleep 循环定期检测收件箱： i…...

编程日记 2025/6/2 7:02:19

【Vim Masterclass 笔记12】S06L26 + L27：Vim 文本的搜索、查找及替换同步练习（含点评课）

文章目录 S06L26 Exercise 07 - Search, Find, and Replace1 训练目标2 操作指令2.1. 打开 search-practice.txt 文件2.2. 同一行内的搜索练习2.3. 当前文件内的搜索练习2.4. 单词搜索练习2.5. 全局替换练习 3 退出 Vim S06L27 同步练习点评课写在前面 Vim 的文本检索、查找与…...

编程日记 2025/5/27 15:20:57

YOLOv11 OBB 任务介绍与数据集构建要求及训练脚本使用指南

YOLO（You Only Look Once）是一个高效且广泛应用于目标检测任务的深度学习框架。在目标检测任务中，传统的边界框（AABB）通过四个参数来定义目标的位置信息：中心坐标、宽度、高度以及目标的旋转角度。然而&…...

编程日记 2025/6/2 12:49:49

执行结果:通过执行用时和内存消耗如下： // 最小堆的节点结构体 typedef struct {long long* heap;int size;int capacity; } MinHeap;// 初始化最小堆 MinHeap* createMinHeap(int capacity) {MinHeap* minHeap (MinHeap*)malloc(sizeof(MinHeap));minHeap->s…...

编程日记 2025/6/3 16:02:49

【Linux】11.Linux基础开发工具使用（4）

文章目录 3. Linux调试器-gdb使用3.1 背景3.2 下载安装3.3 使用gdb查询3.4 开始使用 3. Linux调试器-gdb使用 3.1 背景程序的发布方式有两种，debug模式和release模式 Linux gcc/g出来的二进制程序，默认是release模式要使用gdb调试，必须…...

编程日记 2025/6/1 7:13:32

Cesium中的CustomDataSource 详解

Cesium CustomDataSource 详解在 Cesium 中，CustomDataSource 是一个强大的类，用于处理自定义的地理数据。它提供了一种方法，可以通过程序方式添加、管理和更新动态的地理实体，而无需依赖外部数据格式（如 GeoJSON 或…...

编程日记 2025/6/2 7:33:35

win32汇编环境,窗口程序中组合框的应用举例

;运行效果 ;win32汇编环境,窗口程序中组合框的应用举例 ;比如在窗口程序中生成组合框，增加子项，删除某项，取得指定项内容等 ;直接抄进RadAsm可编译运行。重点部分加备注。 ;以下是ASM文件 ;>>>>>>>>>>>>…...

编程日记 2025/6/3 4:17:28

Wireshark 使用教程：网络分析从入门到精通

一、引言在网络技术的广阔领域中，网络协议分析是一项至关重要的技能。Wireshark 作为一款开源且功能强大的网络协议分析工具，被广泛应用于网络故障排查、网络安全检测以及网络协议研究等诸多方面。本文将深入且详细地介绍 Wireshark 的使用方法&#x…...

编程日记 2025/6/4 17:46:59

菜品管理(day03)

公共字段自动填充问题分析业务表中的公共字段： 而针对于这些字段，我们的赋值方式为： 在新增数据时, 将createTime、updateTime 设置为当前时间, createUser、updateUser设置为当前登录用户ID。在更新数据时, 将updateTime 设置为当前时间…...

编程日记 2025/6/4 3:39:54

Scira - 一个极简的开源 AI 搜索引擎

支持实时搜索、学术论文分析、社交媒体洞察、YouTube 搜索、航班追踪、电影搜索，功能倒是挺多。但是目前只支持 xAI 的 Grok 还不能换模型，不过用的 Vercel SDK 支持下 DeepSeek 应该很容易 https://index.html.zone/ai/scira...

编程日记 2025/5/26 20:15:19

利用源码安装httpd

方法一： 1，下载源码 [rootopenEuler-1 ~]# wget https://archive.apache.org/dist/httpd/httpd-2.4.46.tar.gz [rootopenEuler-1 ~]# ls anaconda-ks.cfg httpd-2.4.46.tar.gz mysql-8.0.36-linux-glibc2.12-x86_64.tar.xz 2，进行压缩 […...

编程日记 2025/6/3 20:56:12

软件测试 —— Selenium（等待）

软件测试 —— Selenium（等待） 一个例子强制等待使用示例：为什么不推荐使用强制等待？更好的选择隐式等待 implicitly_wait（）隐式等待和强制等待的区别隐式等待（Implicit Wait）强制等…...

编程日记 2025/6/4 4:29:41

图像模糊度（清晰度）检测 EsFFT 算法详细分析

图像模糊度检测算法基于频域的算法傅里叶变换法：先将图像进行傅里叶变换得到频谱图，频谱图中心为低频，向外扩展为高频。通过屏蔽频谱图中心区域实现高通滤波，保留图像边缘等高频信息，再求频谱图的均值即平均高频幅值，该值越小，图像越模糊。但传统FFT方法存在不足，如…...

编程日记 2025/6/3 10:15:16

快速上手 HarmonyOS 应用开发

一、DevEco Studio 安装与配置 1. DevEco Studio 简介 DevEco Studio 是 HarmonyOS 的一站式集成开发环境（IDE），提供了丰富的工具和功能，支持 HarmonyOS 应用开发的全流程。 2. DevEco Studio 下载与安装下载地址&#xff1a…...

编程日记 2025/6/4 15:05:37

金融项目实战 06|Python实现接口自动化——日志、实名认证和开户接口

目录一、日志封装及应用（理解） 二、认证开户接口脚本编写 1、代码编写 1️⃣api目录 2️⃣script目录 2、BeautifulSoup库 1️⃣简介及例子 2️⃣提取html数据工具封装 3、认证开户参数化一、日志封装及应用（理解） &…...

编程日记 2025/6/1 13:54:29

Lianwei 安全周报|2025.1.13

新的一周又开始了，以下是本周「Lianwei周报」，我们总结推荐了本周的政策/标准/指南最新动态、热点资讯和安全事件，保证大家不错过本周的每一个重点！ 政策/标准/指南最新动态 01 美国国土安全部发布《公共部门生成式人工智能部署手…...

编程日记 2025/6/4 5:40:49

【C#深度学习之路】如何使用C#实现Yolo8/11 Segment 全尺寸模型的训练和推理

【C#深度学习之路】如何使用C#实现Yolo8/11 Segment 全尺寸模型的训练和推理项目背景项目实现推理过程训练过程项目展望写在最后项目下载链接本文为原创文章，若需要转载，请注明出处。原文地址：https://blog.csdn.net/qq_30270773/article…...

编程日记 2025/6/4 0:24:59

【Compose multiplatform教程】05 IOS环境编译

了解如何使现有的 Android 应用程序跨平台，以便它在 Android 和 iOS 上都能运行。您将能够在一个位置编写代码并针对 Android 和 iOS 进行测试一次。本教程使用一个示例 Android 应用程序，其中包含用于输入用户名和密码的单个屏幕。凭证经过验证并保存…...

编程日记 2025/6/2 0:02:09

【声音场景分类--论文阅读】

1.基于小波时频图特征在声音场景分类基于小波时频图特征在声音场景分类任务中的表现 2.增强增强高效音频分类网络 https://arxiv.org/pdf/2204.11479v5 https://github.com/Alibaba-MIIL/AudioClassfication 音频分类网络如图4所示。在此阶段，主要重点是建立一…...

编程日记 2025/6/4 6:54:02

浅谈云计算02 | 云计算模式的演进

云计算计算模式的演进一、云计算计算模式的起源追溯1.2 个人计算机与桌面计算二、云计算计算模式的发展阶段2.1 效用计算的出现2.2 客户机/服务器模式2.3 集群计算2.4 服务计算2.5 分布式计算2.6 网格计算三、云计算计算模式的成熟与多元化3.1 主流云计算服务模式的确立3.1.…...

编程日记 2025/6/4 6:53:46

【专题】2025年节日营销趋势洞察报告汇总PDF洞察（附原数据表）

原文链接： https://tecdat.cn/?p38813 在当今复杂多变且竞争激烈的消费市场环境下，节日营销已成为企业获取市场份额、提升品牌影响力的关键战略时机。我们深知深入洞察节日营销趋势对于企业决策的重要性。本报告汇总基于对 2024 年多个关键消费节点及…...

编程日记 2025/6/3 7:15:43

AR 在高校实验室安全教育中的应用

AR应用APP可以内置实验室安全功能介绍，学习并考试（为满足教育部关于实验室人员准入条件），AR主模块。其中AR主模块应该包括图形标识码的扫描，生成相应模型，或者火灾、逃生等应急处置的路线及动画演示。考试采…...

编程日记 2025/6/4 16:02:14

PHP智慧小区物业管理小程序

🌟智慧小区物业管理小程序：重塑社区生活，开启便捷高效新篇章 🌟 智慧小区物业管理小程序是一款基于PHPUniApp精心雕琢的智慧小区物业管理小程序，它犹如一股清新的科技之风，吹进了现代智慧小区的每一个角落…...

编程日记 2025/6/4 6:55:22

使用防抖与节流优化 Vue 中的异步函数调用

使用防抖与节流优化 Vue 中的异步函数调用在 Vue 项目中，我们经常需要处理用户交互事件，例如点击、输入、切换复选框等。这些事件可能频繁触发，尤其在用户快速操作的情况下，如果每次触发都执行复杂的逻辑（如异步网络…...

编程日记 2025/5/30 17:57:08

【大厂面试AI算法题中的知识点】方向涉及：ML/DL/CV/NLP/大数据...本篇介绍自动驾驶检测模型如何针对corner case 优化？

【大厂面试AI算法题中的知识点】方向涉及：ML/DL/CV/NLP/大数据…本篇介绍自动驾驶检测模型如何针对corner case 优化？ 【大厂面试AI算法题中的知识点】方向涉及：ML/DL/CV/NLP/大数据…本篇介绍自动驾驶检测模型如何针对corner case 优化&…...

编程日记 2025/6/4 6:54:33

Android CustomTextField

在 Compose 中开发用户界面时，需要处理输入框和键盘的交互，例如在键盘弹出时调整布局位置，避免遮挡重要内容。本篇博客将通过一个完整的示例展示如何实现这一功能。功能概述本例实现了一个简单的输入框。当输入框获得焦点或输入文字时&…...

编程日记 2025/6/4 6:55:06

源码编译安装httpd 2.4，提供系统服务管理脚本并测试（两种方法实现）

一、源码编译安装httpd 2.4 # 从官网下载httpd源代码 [rootopenEuler-2 ~]# wget https://downloads.apache.org/httpd/httpd-2.4.62.tar.gz# 解压并进入到该目录中 [rootopenEuler-2 ~]# tar -zxvf httpd-2.4.62.tar.gz [rootopenEuler-2 ~]# cd httpd-2.4.62/# 安装httpd编译…...

编程日记 2025/6/4 6:54:18

ubuntu24.04安装docker显卡工具包nvidia-container-toolkit

问题描述 docker 容器启动时如果需要访问 gpu ，需要安装 nvidia-container-toolkit 才行，否则会提示如下错误 sudo docker run --rm -it --gpus all ubuntu:latest docker: Error response from daemon: could not select device driver "" …...

编程日记 2025/6/4 6:54:50

mac intel芯片下载安卓模拟器

一、调研目前主流两个模拟器： 雷神模拟器不支持macosmumu模拟器pro版不支持macos intel芯片搜索到mumu的Q&A中有 “Intel芯片Mac如何安装MuMu？” q&a🔗：https://mumu.163.com/mac/faq/install-on-intel-mac.html 提…...

编程日记 2025/6/2 17:39:21

4 原型（Protoytpe）模式

原型模式 1.1 分类 （对象）创建型 1.2 提出问题希望复制一个状态完全相同的对象。首先，新建一个相同类的对象。然后，复制所有成员变量。但是，有时候不知道具体类型，而且成员变量可能是私有的。&#…...

编程日记 2025/6/2 0:02:19

css相关参数介绍

边距

边框

伪元素选择器

太极图案例实现、

代码

效果

相关文章：