在DW中做出一个灰色太极图

妖狐艹你老母 2022-02-13 13:47 272阅读 0赞

1：创建一个css，然后再引用这个css，方便我们对一些HTML进行css样式处理，然后再到css中把body的背景设为灰色；  
2：创建完css以后，先做出太极图外面的大圆：给一个div设置一个类，通过这个类设置出这个大圆的样式；“给这个类的宽高都设为400px，设置1px，实线，黑色的边框，显示出这个类，然后设置离顶部5%，左右居中的外边距，再设置圆角为50%”，这样太极图的轮廓就出来了：  
太极图轮廓截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]  
3：设置完轮廓以后，再解决中间的“s”字母，也就是太极图分割线，因为“s”可以通过两个圆表达出来，所以再去大圆的那个类里面放两个div，这两个div的作用是用来设置两个圆，然后再用两个圆来表达“s”；“先给第一个div设置css样式，因为‘s’是平均分割的，所以第一个圆肯定是大圆的一半，所以给第一个圆的宽高都设置为大圆的50%，然后也给它一个1px，实线，黑色的边框，再调整一下它的位置，让它左右居中，同样设置圆角为50%，这样就会出来一个小圆，但是我们只需要它的左边，也就是‘s’的上半部分，所以把它的上下右边框都隐藏，同理第二个圆也跟第一个圆差不多，所以把相同的代码放在一起，这样方便一些，然后第一个圆是隐藏右边的边框，第二个圆是隐藏左边的边框”；然后太极图的分割线就完成了：  
太极图分割线代码截图（s1为第一个圆，s2为第二个圆）：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]  
4：接下来就只剩下两个黑白圆了，因为两个黑白圆都是在两个小圆里面并且居中的，所以我们在里面个放一个div，并且给它一个类，然后再设置css样式，跟上面那两个小圆的样式差不多，这里就不详情说了，唯一不同的就是要用到一个绝对定位，方便调整它们两个的位置：  
太极图黑白圆代码截图：

5：全部设置完以后，我们的太极图也就出来了，我们在浏览器中打开就能看到效果了  
灰太极图截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70]: /images/20220213/b78c53bdb760403cb2c16f603c3e556a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 1]: /images/20220213/b80cef2a033a4d3dab1ebbd593e79548.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU0MzEzMQ_size_16_color_FFFFFF_t_70 2]: /images/20220213/0171909021514ba290779c4e0f06bf89.png