用css和html制作太极图

news2025/1/15 22:16:30

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>