用css和html制作太极图
目录
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: …...
OJ12:160. 相交链表
目录 题目思路分析代码展示 题目 给你两个单链表的头节点 headA 和 headB ，请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点，返回 null 。 示例 1： 输入：intersectVal 8, listA [4,1,8,4,5], listB [5,…...
软件工程和项目管理领域 - CMMI 极简理解
CMMI 概述 CMMI 全称为 Capability Maturity Model Integration，即能力成熟度模型集成 CMMI 是由美国卡内基梅隆大学软件工程研究所（SEI）开发的一套综合性管理模型 CMMI 是一种用于评估和改进组织在软件开发和维护方面过程能力的国际标准 …...
C# 线程基础之 线程同步
线程同步的手段很多 lock 是通过内存索引块 0 1 切换 进行互斥的实现 互斥量 信号量 事件消息 其实意思就是 一个 标记量 通过这个标记 来进行类似的互斥手段 具体方式的分析 代码在后 1.互斥量 Mutex 作用 非常类似lock 一个Mutex 名称来代替 lock的引用对象 2.信号量 Semaph…...
[c语言日寄]c语言也有“回”字的多种写法——整数交换的三种方式
大家好啊，在今天的快乐刷题中，我们遇到了这样一道题目： 题目 写出 三种不同方式的 交换两个整数变量的 函数 交换变量的三种解法 常规方式 想要交换两个变量很简单，第一种方式就是新建一个临时变量，具体流程如下&…...
RocketMQ 知识速览
文章目录 一、消息队列对比二、RocketMQ 基础1. 消息模型2. 技术架构3. 消息类型4. 消费者类型5. 消费者分组和生产者分组 三、RocketMQ 高级1. 如何解决顺序消费和重复消费2. 如何实现分布式事务3. 如何解决消息堆积问题4. 如何保证高性能读写5. 刷盘机制 （topic 模…...
优化 Azure Synapse Dedicated SQL Pool中的 SQL 执行性能的经验方法
在 Azure Synapse Dedicated SQL Pool中优化 SQL 执行涉及了解底层体系结构（例如分布和分区）、查询优化（例如避免不必要的子查询和联接），以及利用具体化视图和 PolyBase 等工具进行高效数据加载。 1.有效使用分布和分…...
详解英语单词“pro bono”：公益服务的表达（中英双语）
中文版 详解英语单词“pro bono”：公益服务的表达 一、词义解释 “Pro bono” 是一个源自拉丁语的短语，完整表达为 “pro bono publico”，意思是“为了公众利益”（for the public good）。在现代英语中，它…...
16. C语言 字符串详解
本章目录: 前言C 字符串的基础概念字符串的定义字符串的内存表示 常见的字符串操作函数示例代码 深入探讨字符串长度计算strlen 与 sizeof 的区别 字符串操作的注意事项**1. 字符数组的大小**2. 字符数组和字符指针的区别3. 使用安全函数 字符串的遍历与格式化输出**遍历字符串…...
使用Buildroot开始嵌入式Linux系统之旅-3
文章目录 at91bootstrap操作教程修改at91bootstrap具体配置重新编译at91bootstrap U-Boot操作教程修改U-Boot具体配置重新编译U-Boot Linux Kernel操作教程修改Linux Kernel具体配置重新编译Linux Kernel buildroot操作进阶生成图形化软件模块依赖关系查看具体软件模块依赖关系…...
[免费]SpringBoot+Vue新能源汽车充电桩管理系统【论文+源码+SQL脚本】
大家好，我是java1234_小锋老师，看到一个不错的SpringBootVue新能源汽车充电桩管理系统，分享下哈。 项目视频演示 【免费】SpringBootVue新能源汽车充电桩管理系统 Java毕业设计_哔哩哔哩_bilibili 项目介绍 随着信息化时代的到来࿰…...
【已解决】【记录】2AI大模型web UI使用tips 本地
docker desktop使用 互动 如果需要发送网页链接，就在链接上加上【#】号 如果要上传文件就点击这个➕号 中文回复 命令它只用中文回复，在右上角打开【对话高级设置】 输入提示词（提示词使用英文会更好） Must reply to the us…...
44.ComboBox的数据绑定 C#例子 WPF例子
固定最简步骤，包括 XAML： 题头里引入命名空间 标题下面引入类 combobox绑定资源属性和选择属性，block则绑定和combobox一样的选择属性 C#： 通知的类，及对应固定的任务 引入字段 引入属性 其中资源是只读的 选…...
物联网之传感器技术
引言 在数字化浪潮席卷全球的今天，物联网（IoT）已成为推动各行各业变革的重要力量。而物联网传感器，作为物联网感知层的核心技术，更是扮演着不可或缺的角色。它们如同人类的五官，能够感知物理世界中的各种信…...
QTreeWidget QTreeWidgetItem
QTreeWidgetItem 是 Qt 框架中用于在 QTreeWidget 中表示树形结构中每个节点的类。它是 QTreeWidget 的一部分，允许您创建和管理层次结构的数据展示。 QTreeWidgetItem 用于表示树形结构中的单个节点。 添加子节点： 可以通过 addChild() 方法向节点添加…...
torch.einsum计算张量的外积
torch.einsum 是一种强大的张量操作工具，可以通过爱因斯坦求和约定（Einstein summation convention）来简洁地表示复杂的张量运算。通过它，我们可以高效地计算矩阵乘法、转置、点积、外积等操作。 以下是关于如何使用 torch.einsum 计算两个四维张量在第三维度上的外积的解…...
PostgreSQL 超级管理员详解
1. 什么是 PostgreSQL 超级管理员 PostgreSQL 超级管理员（superuser）是拥有数据库系统最高权限的用户。他们可以执行任何数据库操作，包括但不限于创建和删除数据库、用户、表空间、模式等。超级管理员权限是 PostgreSQL 中权限的最高级别。 …...
RabbitMQ 工作模式使用案例之（发布订阅模式、路由模式、通配符模式）
Hi~！这里是奋斗的明志，很荣幸您能阅读我的文章，诚请评论指点，欢迎欢迎 ~~ 🌱🌱个人主页：奋斗的明志 🌱🌱所属专栏：RabbitMQ 📚本系列文章为个人学…...
【2024年华为OD机试】(C卷,100分)- 机场航班调度程序 （Java JS PythonC/C++）
一、问题描述 题目描述 XX市机场停放了多架飞机，每架飞机都有自己的航班号，如CA3385，CZ6678，SC6508等，航班号的前2个大写字母（或数字）代表航空公司的缩写，后面4个数字代表航班信息…...
Vue.js组件开发-使用地图绘制轨迹
在Vue.js中开发一个组件来展示地图并绘制轨迹，可以使用诸如Leaflet.js、Mapbox GL JS或百度地图等地图库。这些库提供了丰富的API来创建和定制地图，以及绘制路径、标记和其他地图元素。 示例： 1. 安装Leaflet.js 首先，需要安装…...
Unity3D中Gfx.WaitForPresent优化方案
前言 在Unity中，Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染（即CPU被阻塞），这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案： 对惹，这里有一个游戏开发交流小组&…...
定时器任务——若依源码分析
分析util包下面的工具类schedule utils： ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类，封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz，先构建任务的 JobD…...
Vue2 第一节_Vue2上手_插值表达式{{}}_访问数据和修改数据_Vue开发者工具
文章目录 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染2. 插值表达式{{}}3. 访问数据和修改数据4. vue响应式5. Vue开发者工具--方便调试 1.Vue2上手-如何创建一个Vue实例,进行初始化渲染 准备容器引包创建Vue实例 new Vue()指定配置项 ->渲染数据 准备一个容器,例如: …...
css的定位（position）详解：相对定位 绝对定位 固定定位
在 CSS 中，元素的定位通过 position 属性控制，共有 5 种定位模式：static（静态定位）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）和…...
【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）
🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...
vue3+vite项目中使用.env文件环境变量方法
vue3vite项目中使用.env文件环境变量方法 .env文件作用命名规则常用的配置项示例使用方法注意事项在vite.config.js文件中读取环境变量方法 .env文件作用 .env 文件用于定义环境变量，这些变量可以在项目中通过 import.meta.env 进行访问。Vite 会自动加载这些环境变…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
搭建DNS域名解析服务器(正向解析资源文件)
正向解析资源文件 1）准备工作 服务端及客户端都关闭安全软件 [rootlocalhost ~]# systemctl stop firewalld [rootlocalhost ~]# setenforce 0 2）服务端安装软件：bind 1.配置yum源 [rootlocalhost ~]# cat /etc/yum.repos.d/base.repo [Base…...
Redis：现代应用开发的高效内存数据存储利器
一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发，其初衷是为了满足他自己的一个项目需求，即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源，Redis凭借其简单易用、…...
Windows安装Miniconda
一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...