html八卦绘制,HTML+CSS实现画出一个太极八卦图案
太极八卦是中华文化的象征。
今天我就用了html+css画出来一个太极八卦的图案,喜欢的可以拿去研究下!
代码:
太极八卦作者无陌然qq2633544207 aide技术网aidezy.com
/* CSS Document */
html, body, div, span, object, iframe,h1, h2,
h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn,
em, img, ins,kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd,
ol, ul, li,fieldset, form, label, legend,table, caption, tbody,
tfoot,thead,tr, th, td,article, aside, canvas, details, figcaption,
figure, footer, header, hgroup, menu, nav, section, summary,time, mark,
audio, video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
outline-style:none;/*FF*/
}
body {
line-height:1;
}
a{
margin:0;
padding:0;
border:0;
vertical-align:baseline;
background:transparent;
}
a:hover,a:focus{
text-decoration:none;
bblr:expression(this.onFocus=this.blur());/*IE*/
outline-style:none;/*FF*/
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select {
vertical-align:middle;
}
/*css为clearfix,清除浮动*/
.clearfix::before,
.clearfix::after{
content: "";
height: 0;
line-height: 0;
display: block;
visibility: hidden;
clear: both;
}
.clearfix:after{clear:both;}
.clearfix{
*zoom:1;/*IE/7/6*/
}
li{
list-style:none;
}
a {
text-decoration: none
}
/*上面这个style为css初始化代码*/
#one{
height: 800px;
border: black solid 1px;
border-radius: 400px;
width: 800px;
background-color:#F00;
clear: both;
background: black;
}
#tow{
width: 200px;
height: 400px;
border: white solid 1px;
border-radius: 0px 200px 200px 0px;
margin: 0px 100px 0px 400px;
box-sizing:border-box;
display: block; /*转为块状元素*/
background: white;
}
#three{
width: 200px;
height: 400px;
border: black solid 1px;
border-radius: 200px 0px 0px 200px;
margin: 0px 0px 0px 200px;
box-sizing:border-box;
display: block; /*转为块状元素*/
background: black;
}
#for{
width: 100px;
height: 100px;
box-sizing:border-box;
display: block; /*转为块状元素*/
border-radius: 50px;
margin: 150px 0px 0px -50px;
background: black;
}
#six{
width: 100px;
height: 100px;
box-sizing:border-box;
display: block; /*转为块状元素*/
border-radius: 50px;
margin: 150px 0px 0px 150px;
background: white;
}
#se{
height: 800px;
border-radius: 400px 0px 0px 400px;
width: 400px;
background-color:white;
clear: both;
}
代码ZIP打包下载:
html八卦绘制,HTML+CSS实现画出一个太极八卦图案相关推荐
- html网页制作图案,HTML+CSS实现画出一个太极八卦图案
太极八卦是中华文化的象征. 今天我就用了html+css画出来一个太极八卦的图案,喜欢的可以拿去研究下! 代码: 太极八卦作者无陌然qq2633544207 aide技术网aidezy.com /* ...
- 神级程序员8000行css代码画出一个蒙娜丽莎,堪比达芬奇!
代码画出的蒙娜丽莎 今天逛CODEPEN找HTML5动画案例的时候,偶尔看到一位神级大师的作品,用纯CSS代码画出一副蒙娜丽莎,虽然分辨率不高,但是仍然让我很是震撼,一看代码,整整8000行,基本一行 ...
- php绘制一个三角形,如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- h5画三角形_如何利用css或html5画出一个三角形?两种不同的制作三角形方法(代码实例)...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
- 运用html画一个三角形,利用css或html5画出一个三角形的方法
利用css或html5画出一个三角形的方法 发布时间:2020-09-14 14:49:22 来源:亿速云 阅读:83 作者:小新 这篇文章主要介绍利用css或html5画出一个三角形的方法,文中介绍 ...
- [css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法 先画一个圆,外加两个绝对定位的半圆 扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现 这只能切出180°以内的扇形 超过180°的 ...
- [css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
- [css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
- [css] 用css画出一个圆圈,里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
最新文章
- JSP 表单request内容
- ActiveRecord是啥意思?
- Hitv8 文件批量重命名工具
- Python可以调用Gpu吗_python可以开发app吗
- webpack4配置vue环境和一些小坑。
- 蓝桥杯 ADV-134算法提高 校门外的树
- 开源,自由,免费, 商业,收费,共享. 这些都不矛盾. 细数网络发展中的免费与收费....
- H3C大规模路由综合实验
- 服务器管理器添加php,为web服务器添加php的支持
- MySQL数据库选型
- Ubuntu18.04 安装 Matlab2020a
- goland切换换行/不换行快捷键
- 【Godot 插件】获取编辑器上所有的节点
- Docker overlay 默认位置硬盘不足,如何更换位置
- VB 从零开始编外挂
- swarm-XDai主网免bzz质押和rpc全套搭建教程-windows
- 使用C#压缩解压文件
- 三星a7108android 7.0,三星A7108解锁教程 三星A7108解锁Bootloader
- JAVA获取中文名字的首字母
- html页面打印成a4的尺寸,我如何将我的html div调整为A4打印页面中的整页?