HTML小案例之太极两仪图画法

学习了CSS的浮动布局和定位布局，下面使用这两种布局来画一个太极图。
思路：
1.我们首先要做的就是画出最外层的圆形

 我们画一个半径为250像素的圆，给它设置1像素的黑色边框,利用border-radius属性把它从正方形变成一个圆形。margin:100px auto 把它移到屏幕相对中间的位置

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极图</title><style>.container{width: 500px;height: 500px;border: 1px solid #333;border-radius: 250px;margin: 100px auto;}</style>
</head>
<body><div class="container"></div>
</body>
</html>

如图所示:

2.其次我们要做的就是画一个左半圆和一个右半圆，让它们分别在圆的左边和右边

我们在container内放入两个div,left和right，分别让他们左浮动和右浮动
left和right的宽度设为250像素，高度和父元素一样同为500像素，
利用border-radius属性让left和right从长方形变为半圆
border-top-left-radius  左上
border-bottom-left-radius 左下
border-top-right-radius  右上
border-bottom-right-radius  右下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极图</title><style>.container{width: 500px;height: 500px;border: 1px solid #333;border-radius: 250px;margin: 100px auto;}.left{width: 250px;height: 500px;float: left;background-color: black;border-top-left-radius: 250px;border-bottom-left-radius: 250px;}.right{width: 250px;height: 500px;float: right;background-color: white;border-top-right-radius: 250px;border-bottom-right-radius: 250px;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="right"></div></div>
</body>
</html>

如图所示:

3.然后我们要做的就是画两个小圆，让它们分别在圆形的正中间上方和正中间下方

 我们分别在container内放两个div，top和bottom，给它们设置宽高都为250像素，通过border-radius将
它们从正方形变为圆形，前面我们调整左半圆和右半圆的位置时使用的是左右浮动的方法，这里我们使用定位
布局中的子绝父相(子绝父相就是给父元素设置相对定位，给子元素设置绝对定位)来调整小圆的位置,也可以使用
外边距来跳转位置。
子绝父相实现div水平垂直居中
left:50%
margin-left:-50%*width
top:50%
margin-top:-50%*height

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极图</title><style>.container{width: 500px;height: 500px;border: 1px solid #333;border-radius: 250px;margin: 100px auto;/* 父元素开启相对定位 */position: relative;}.left{width: 250px;height: 500px;float: left;background-color: black;border-top-left-radius: 250px;border-bottom-left-radius: 250px;}.right{width: 250px;height: 500px;float: right;background-color: white;border-top-right-radius: 250px;border-bottom-right-radius: 250px;}.top{width: 250px;height: 250px;border-radius: 250px;background-color: black;/* 子元素开启绝对定位 */position: absolute;left: 50%;margin-left: -125px;}.bottom{width: 250px;height: 250px;border-radius: 250px;background-color: white;/* 子元素开启绝对定位 */position: absolute;top: 50%;left: 50%;margin-left: -125px;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="right"></div><div class="top"></div><div class="bottom"></div></div>
</body>
</html>

如图：

4.最后一步我们要做的就是画两个小小圆，让它们分别在两个小圆形中水平垂直居中

 我们分别在顶部小圆和底部小圆中放两个div,top_circle和bottom_circle。给它们设置宽高为50像素，通过
border-radius将它们从正方形变为圆形，通过给孙子元素top_circle和bottom_circle设置绝对定位来实现在小圆
中水平垂直居中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>太极图</title><style>.container{width: 500px;height: 500px;border: 1px solid #333;border-radius: 250px;margin: 100px auto;/* 父元素开启相对定位 */position: relative;}.left{width: 250px;height: 500px;float: left;background-color: black;border-top-left-radius: 250px;border-bottom-left-radius: 250px;}.right{width: 250px;height: 500px;float: right;background-color: white;border-top-right-radius: 250px;border-bottom-right-radius: 250px;}.top{width: 250px;height: 250px;border-radius: 250px;background-color: black;/* 子元素开启绝对定位 */position: absolute;left: 50%;margin-left: -125px;}.bottom{width: 250px;height: 250px;border-radius: 250px;background-color: white;/* 子元素开启绝对定位 */position: absolute;top: 50%;left: 50%;margin-left: -125px;}.top_circle{width: 50px;height: 50px;border-radius: 50px;background-color: white;/* 孙子元素开启绝对定位 */position: absolute;left: 50%;margin-left: -25px;top: 50%;margin-top: -25px;}.bottom_circle{width: 50px;height: 50px;border-radius: 50px;background-color: black;/* 孙子元素开启绝对定位 */position: absolute;left: 50%;margin-left: -25px;bottom: 50%;margin-bottom: -25px;}</style>
</head>
<body><div class="container"><div class="left"></div><div class="right"></div><div class="top"><div class="top_circle"></div></div><div class="bottom"><div class="bottom_circle"></div></div></div>
</body>
</html>

如图：

HTML小案例之太极两仪图画法相关推荐

小案例---淘宝轮播图实现
通过自己的自学,初步完成了淘宝轮播图的实现,可能代码上还没得到很多优化,希望大家可以帮我指出一下,非常感谢! 代码如下: <!DOCTYPE html> <html lang=&qu ...
javaScript小案例------js实现手风琴效果篇
原生js书写手风琴效果 js手风琴效果第一种方法手风琴需求 html和css: html: css: js animate.js index.js 第二种方法 js手风琴效果我用了两种方法来完成 ...
HTML+CSS+JavaScript小案例（注册页面表单验证轮播图跳转主页动态表格select联动）
案例:(表单验证) <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
【一天一个Python小案例】RGB图转简笔画
[一天一个Python小案例]RGB图转简笔画 import scipy.ndimage import numpy as np import matplotlib.pyplot as pltdef g ...
js轮播图按钮小案例
案列介绍我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例. 一.大概步骤注意:有很 ...
python使用matplotlib2D绘图库的折线图绘制小案例（方便matplotlib的学习理解）——随机数做幸运值，绘制一周的幸运趋势
python使用matplotlib2D绘图库的折线图绘制小案例(方便matplotlib的学习理解)--随机数做幸运值,绘制一周的幸运趋势 QQ:3020889729 小蔡小案例内容简介实例第 ...
python画太极八卦图_太极八卦图的正确画法
PPT怎么画太极八卦图?之前我们介绍了好几种软件绘制太极八卦图的方法,今天我们来看看最常见的ppt中怎么画太极八卦图?下面分享详细的绘制过程和具体参数,需要的朋友可以参考下 1.新建一个PPT文档,设 ...
001 小案例：类似“轮播图”转动效果
小案例动画效果@keyframs flex布局:display:flex <!DOCTYPE html> <html> <head><meta charse ...
css实例——太极八卦图
css实例--太极八卦图分析: 可以看成是三个类型的圆组成,分别是大的圆,中等大小的圆,小的圆.这是一个整体的思路,具体的话就是去调整各个圆的位置 HTML代码部分 <!DOCTYPE htm ...

HTML小案例之太极两仪图画法

HTML小案例之太极两仪图画法相关推荐

最新文章

热门文章