用css和html制作太极图

ops/2025/1/15 22:46:10/
htmledit_views">

目录

html" title=css>css%E7%9B%B8%E5%85%B3%E5%8F%82%E6%95%B0%E4%BB%8B%E7%BB%8D-toc" style="margin-left:0px;">html" title=css>css相关参数介绍

边距

边框

伪元素选择器

太极图案例实现、

代码

效果


html" title=css>css%E7%9B%B8%E5%85%B3%E5%8F%82%E6%95%B0%E4%BB%8B%E7%BB%8D">html" title=css>css相关参数介绍

边距

html"><!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>

边框

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>

伪元素选择器

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>

太极图案例实现、

代码

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>

效果


http://www.ppmy.cn/ops/150407.html

相关文章

Web前端------HTML多媒体标签之图片标签

一.图片标签介绍 1.路径问题>.绝对路径从盘符开始的路径问题&#xff1a;改变了工程目录的位置后&#xff0c;绝对路径从盘符开始则不能使用了&#xff0c;考虑相对路径>.相对路径从当前位置&#xff08;指从代码书写.html文件&#xff09;开始如何表示当前位置------使用…

强化风险防控:助贷 CRM 系统为助贷中介筑牢安全堤坝

对于助贷中介公司而言&#xff0c;风险防控无疑是关系到生死存亡的关键环节。在复杂多变的市场环境下&#xff0c;传统的风险管控手段漏洞百出&#xff0c;而助贷 CRM 系统的出现&#xff0c;为筑牢安全堤坝提供了坚实保障。 贷前审查阶段&#xff0c;公司以往仅能通过有限的资…

Mac操作系统zip压缩加密

介绍 在苹果电脑上使用zip压缩文件夹&#xff0c;并设置密码。 命令 命令行输入命令后&#xff0c;按下回车后&#xff0c;输入压缩密码。 zip -er aa.zip aa #-e选项启用了ZIP的加密功能 #-r选项表示你想要递归地压缩文件夹 #aa.zip压缩后的文件名 #aa要压缩的文件夹

成功案例分享 — 芯科科技助力涂鸦智能打造Matter over Thread模块,简化Matter设备开发

芯科科技&#xff08;Silicon Labs&#xff09;的愿景之一是让开发者每天都能够更轻松地开发无线物联网&#xff08;IoT&#xff09;。特别是在拥有相同愿景的合作伙伴的帮助下&#xff0c;我们每天都在取得进步。但是要想弥合知识水平和物联网开发之间的差距仍会面临一定的挑战…

k8s故障 ImagePullBackOff状态排错

需看yaml 这个策略是否开启

软件测试之单元测试总结

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 一、何为单测 测试有黑盒测试和白盒测试之分&#xff0c;黑盒测试顾名思义就是我们不了解盒子的内部结构&#xff0c;我们通过文档或者对该功能的理解&#xff0c…

[Qt]常用控件介绍-输入类控件-QLineEdit、QTextEdit、QComboBox控件

目录 1.Line Edit控件 属性 核心信号 Demo&#xff1a;XX软件登录 正则表达式-验证器 Demo&#xff1a;验证器与按钮的配合 Demo&#xff1a;验证两次输入的密码一致 Demo&#xff1a;显示与隐藏密码按钮 2.Text Edit控件 属性 核心信号 几个信号的演示操作 3.C…

maven 下载依赖 jhash:2.1.2 和对应 jar 包

原文地址 前言 25年新的一年&#xff0c;那就先更新一篇技术文章吧&#xff0c;这个是这几天刚遇到的一个有意思的bug&#xff0c;记录分享一下 原因分析 在使用maven加载一个项目的时&#xff0c;发现maven的依赖一直无法解析&#xff0c;更换阿里云镜像和中央仓库都没办法…