实训H5+CSS 太极图
大概就是上面这个样子
我们准备 两个半圆，两个大圆，两个小圆，然后稍微的进行覆盖就行~
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css"> #big{
height: 300px;
width: 300px;
background: #AFAFAF;
}
#biga{
height: 150px;
width: 300px;
background: black;
border-top-left-radius: 150px;
border-top-right-radius: 150px;
}
#bigb{
background: white;
height: 150px;
width: 300px;
border-bottom-left-radius: 150px;
border-bottom-right-radius: 150px;
}
#lita{
height: 150px;
width: 150px;
background: white;
position: absolute;
top: 80px;
border-radius: 50%;
}
#litb{
height: 150px;
width: 150px;
background: black;
position: absolute;
top: 80px;
left: 158px;
border-radius: 50%;
}
#litta{
height: 50px;
width: 50px;
background: black;
position: absolute;
top: 132px;
left: 60px;
border-radius: 50%;
}
#littb{
height: 50px;
width: 50px;
background: white;
position: absolute;
top: 135px;
left:205px;
border-radius: 50%;
}
</style>
</head> <body>
<div id="big">
<div id="biga"> </div> <div id="bigb"> </div> </div>
<div id="lita"> </div>
<div id="litb"> </div>
<div id="litta"> </div>
<div id="littb"> </div>
</body>
</html>
实训H5+CSS 太极图的更多相关文章
- SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选、检索功能（maven）
SSM 实训笔记 -11- 使用 Spring MVC + JDBC Template 实现筛选.检索功能(maven) 本篇是新建的一个数据库,新建的一个完整项目. 本篇内容: (1)使用 Spri ...
- springmvc springJDBC 简单实训银行账户管理系统
springmvc springJDBC 简单实训银行账户管理系统 1.简单介绍一下,在校时每周结束都会有一次学习总结,简称“实训”,这次实训内容是spring,因为是最近热门框架,我就先从基础方面开 ...
- JS相关实训
今天又是无聊的一天,我的脑袋一直在嗡嗡叫,想着一些奇怪的问题,比如我为什么总是感到这么失落,为什么我喜欢的女孩不喜欢我呢,真是头大啊.不过既然有作业了我这个五好公民当然要认真写了.没时间让我思考这么复 ...
- Java企业实训 - 01 - Java前奏
前言: 虽然个人专攻.NET方向,不过由于个人是干教育行业的,方方面面的东西,不能说都必须精通,但肯定多少都会涉及到. 一个菜鸟学员,从啥都不会,经过一步步学习,最后到企业上手掌管一个模块甚至一个项目 ...
- UML基础与Rose建模实训教程
目 录 第1章 初识UML. 1 1.1 初识UML用例图... 1 1.2 初识UML类图... 3 第2章 Rational Rose工具... 6 2.1 安装与配置Rational Ro ...
- <实训|第六天>偷偷让新手的Linux无限重启附linux主机名称不是随便乱改的！
先说个事情:这几天我正在忙一个项目的设计,8月1号之前要弄出来,所以每天都要弄到很晚,可能更新就有点跟不上了,不过我如果有时间的话,我就更新,没时间的话,我会在8月1号之后统一更新出来,希望大家谅解! ...
- <实训|第五天>通过搭建NFS，FTP实现共享文件附Vim脚本游戏
先说个事情:我周末是不更新这个系列教程的,不过其他内容的会更新,我周末就整理这一周的各种内容到我的微信公众号中,提供给大家! 期待已久的linux运维.oracle"培训班"终于开 ...
- 软件工程实训项目案例--Android移动应用开发
实训过程 角色分工 1.项目经理:负责项目的组织实施,制定项目计划,并进行跟踪管理 2.开发人员:对项目经理及项目负责 3.需求分析员:负责系统的需求获取和分析,并协助设计人员进行系统设计 4.系统设 ...
- <实训|第四天>Linux下的vim你真的掌握了吗？附上ftp远程命令上传。
期待已久的linux运维.oracle"培训班"终于开班了,我从已经开始长期四个半月的linux运维.oracle培训,每天白天我会好好学习,晚上回来我会努力更新教程,包括今天学到 ...
随机推荐
- HTML布局之左右结构，左边固定右边跟据父元素自适应
HTML布局之左右结构,左边固定右边跟据父元素自适应,兼容IE6+.Firefox.Chrome.Opera.Safari,这里是用表单写的一个demo,其实就在主体布局中也是可以的,比如像后台一些管 ...
- BZOJ 1600 [Usaco2008 Oct]建造栅栏：dp【前缀和优化】
题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1600 题意: 给你一个长度为n的木板,让你把这个木板切割成四段(长度为整数),并且要求这四 ...
- ES搜索排序，文档相关度评分介绍——TF-IDF—term frequency, inverse document frequency, and field-length norm—are calculated and stored at index time.
Theory Behind Relevance Scoring Lucene (and thus Elasticsearch) uses the Boolean model to find match ...
- NO1：安装VMLinux虚拟机，安装配置Samba实现Linux与Windows文件共享
离开技术好些年,仅凭记忆开始学习.同时决定在Linux系统学习C语言. 一.下午安装了VM 8.0,安装RedHat Enterpris Server 6.4虚拟操作系统,都还比较顺利. 二.要实现L ...
- Can't load AMD 64-bit .dll on a IA 32-bit platform错误
将tomcat的bin目录下的tcnative-1.dll文件删除.就可以了.
- 洛谷 1979 华容道——最短路+dp
题目:https://www.luogu.org/problemnew/show/P1979 感到无从下手.但不妨用dp的角度来看.因为空格只有在指定棋子的旁边才有用,所以状态记成制定棋子的位置与空格 ...
- Oracle字符串截断
字段.SUBSTR(string,start_position,[length]) 求子字符串,返回字符串解释:string 元字符串, start_position 开始位置(从0开始), leng ...
- JavaScript高级程序设计学习笔记第八章--BOM
1.间歇调用和超时调用: 超时调用:需要使用 window 对象的 setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(即在执行代码前需要等待多少毫秒).其中,第一个参数可以 ...
- java 对象锁和类锁的区别（转）
java 对象锁和类锁的区别 转自; ) ); ; ) ); 上述的代码,第一个方法时用了同步代码块的方式进行同步,传入的对象实例是this,表明是当前对象,当然,如果需要同步其他对象实例,也不可 ...
- [poj1222]EXTENDED LIGHTS OUT(高斯消元)
题意:每个灯开启会使自身和周围的灯反转,要使全图的灯灭掉,判断灯开的位置. 解题关键:二进制高斯消元模板题. 复杂度:$O({n^3})$ #include<cstdio> #includ ...