太极图php代码,如何实现太极图
如何实现太极图：
如何实现的呢：
下面我来教大家：
首先在
标签里建div盒子：代码如下
.whb(@w, @h, @back) {
width: @w; **宽
height: @h; **高
background-color: @back; **背景
}
这个是设置 宽 高 背景 的简写；
先给每一个标签起一个class名字：
然后在css里面写入样式！
现在写
.tai {
.whb(300px, 600px, #fff);
margin: 0 auto;
border: 2px solid #000;
border-radius: 0px 500px 500px 0px;
}
.ji {
.whb(300px, 600px, #000);
margin: 0 auto;
border: 2px solid #000;
border-radius: 500px 0px 0px 500px;
}
这是会出现两个半圆：这是再给.div2设置的定位
position:relative
top:0px;
left:0px;
如下图：
.ji {
.whb(300px, 600px, #000);
margin: 0 auto;
border: 2px solid #000;
border-radius: 500px 0px 0px 500px;
position: relative;
top: -604px;
left: -293px;
}
这是会出现一个圆！
在往下就是写每一个
position:relative
top:0px;
left:0px;
代码下图:
.tai-1 {
display: block;
.whb(295px, 295px, #fff);
border: 2px solid #fff;
border-radius: 50%;
position: relative;
top: -1px;
left: -140px;
z-index: 2;
}
.ji-1 {
display: block;
.whb(300px, 300px, #000);
border: 2px solid #000;
border-radius: 50%;
position: relative;
top: 298px;
left: 150px;
z-index: 1;
}
这是会现实出大该的八卦图形：
最后在给每一个标签设置是同样的样式：
代码如下：
i {
display: block;
.whb(70px, 70px, #000);
border: 2px solid #000;
border-radius: 50%;
margin: 110px auto;
}
i {
display: block;
.whb(70px, 70px, #fff);
border: 2px solid #fff;
border-radius: 50%;
margin: 110px auto;
}
这是一个完整的八卦图就实现出您的面页上！
完整的样式：
代码如下:
.tai {
.whb(300px, 600px, #fff);
margin: 0 auto;
border: 2px solid #000;
border-radius: 0px 500px 500px 0px;
.tai-1 {
display: block;
.whb(295px, 295px, #fff);
border: 2px solid #fff;
border-radius: 50%;
position: relative;
top: -1px;
left: -140px;
z-index: 2;
i {
display: block;
.whb(70px, 70px, #000);
border: 2px solid #000;
border-radius: 50%;
margin: 110px auto;
}
}
}
.ji {
.whb(300px, 600px, #000);
margin: 0 auto;
border: 2px solid #000;
border-radius: 500px 0px 0px 500px;
position: relative;
top: -604px;
left: -293px;
.ji-1 {
display: block;
.whb(300px, 300px, #000);
border: 2px solid #000;
border-radius: 50%;
position: relative;
top: 298px;
left: 150px;
z-index: 1;
i {
display: block;
.whb(70px, 70px, #fff);
border: 2px solid #fff;
border-radius: 50%;
margin: 110px auto;
}
}
}
这就是一个完整的太极图代码
太极图php代码,如何实现太极图相关推荐
- 太极图php代码,css画太极图(阴阳八卦)
复制代码代码如下: #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red; border-style: ...
- 太极图正确画法_小小太极图，暗藏大乾坤！您真的看懂了这张“中华第一图”？...
"易有太极,是生两仪,两仪生四象,四象生八卦--"<周易>文化博大精深,而最为人所知的,就是被称为"中华第一图"的太极图,从道教寺观,到店铺门面:从 ...
- java画太极加图片_Android 画一个太极图实例代码
今天练手一下,一起来画个太极图吧~ 最终效果如下: 最终效果 一般都是先讲原理,我就反其道而行,先讲实现吧. 1.继承实现初始化方法 继承View,实现基本的构造函数: public TestView ...
- 动态太极图html代码,用一个div加一段css代码画一个太极图
[摘要] 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图. 在王海达博客看到了这段代码,仅使用一个div和css就画出了一个标准的太极阴阳鱼图.看了下代码,发现其利 ...
- 太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由 若干个小圆组合而成,适合初学css3的人练练手,娱以 致 ...
- python太极代码_Python : Turtle绘图-太极图（代码）
import turtle def draw_TJT®: turtle.screensize(800,600,"white") turtle.pensize(3) turtle.p ...
- 太极图php代码,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
- 用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
- 用python代码画太极图
好的,这是用 Python 画太极图的代码: import turtle# 画一个圆 def draw_circle(radius, color):turtle.pencolor(color)turt ...
- 运用CSS画动态太极图
今天用学会了用css画动态太极图,现在和小伙伴们分享一下,供大家参考学习. 一.先画一个太极图 1.代码: <!DOCTYPE html> <html lang="en&q ...
最新文章
- 业余草 SpringCloud 教程 | 第一篇： 服务的注册与发现Eureka(Finchley版本)
- 青龙羊毛——内容改版
- c语言习题与实验doc,[教材]C语言程序设计习题与上机实验(全部答案).doc
- 第二阶段个人总结11
- 子路由里嵌套子路由、嵌套多重子路由
- layou split 属性
- 短作业优先算法的缺点
- LeetCode 907. 子数组的最小值之和（单调栈）
- There is no getter for property named 'XXX' in class 'aaa.bbb.ccc'（终极骚操作的解决方法）...
- PXE自动化安装系统工具介绍与部署
- 25个关键技术点，带你熟悉Python
- c#正则表达式取出数据库中带html标签的内容,C#用正则表达式 获取网页源代码标签的属性或值...
- 不会真有人觉得聊天机器人难吧——开篇
- R语言_安装包时联网失败
- OICQ登录号码清除器实现原理 (转)
- vue音乐播放器demo，主要是模仿慕课音乐播放器教程制作的一个小demo
- mc服务器fabric安装位置,也许这是史上最详细的Fabric安装教程，助你在1.14/1.15安装mod...
- 《数据库原理》复试面试篇
- CV GaussianBlur
- DevOps团队如何为网络星期一做准备