【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图。
基本思路:由三个div块元素组成;
#taiji太极阴阳图底面
#yin太极阴阳图阴面小圆
#yang太极阴阳图阳面小圆
(太极阴阳图:上为阳下为阴或左为阳又为阴)
2. 太极阴阳图底图#taiji:
巧用边框:宽度0高度300px,左右边框150分别150px;然后圆角处理作圆形。
#taiji{
margin:auto;
width:0;
height:300px;
border-left:150px solid #fff;
border-right:150px solid #000;
box-shadow: 0 0 20px 0 #333;
border-radius:100%;
}
3. 阴阳小圆,两个眼分别用伪属性:before或:after一个做小圆眼。
#yin{
width:150px;
height:150px;
border-radius:100%;
background:#000;
}
#yin:after{
position:absolute;
content:" ";
width:50px;
height:50px;
border-radius:100%;
background:#fff;
}
4. 定位组合,效果如图:
5. 全部代码:
<!DOCTYPE html>
<html>
<head>
<title> 飛天网事--DIV+CSS代码阴阳太极图 </title>
<meta charset="utf-8" />
<meta name="description" content="飛天网事,WEB前端开发,纯css3代码时钟精彩案例" />
<meta name="keywords" content="飛天网事,WEB前端开发,HTML5,CSS3,jQuery," />
<meta name="author" content="R.tian @eduppp.cn 2015">
<link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" />
<link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
</head>
<body>
<style type="text/css">
#taiji{
margin:auto;
width:0;
height:300px;
border-left:150px solid #fff;
border-right:150px solid #000;
box-shadow: 0 0 20px 0 #333;
border-radius:100%;
}
#yin{
position:absolute;
margin:150px 0 0 -75px;
width:150px;
height:150px;
border-radius:100%;
background:#000;
}
#yin:after{
position:absolute;
margin:50px 0 0 50px;
content:" ";
width:50px;
height:50px;
border-radius:100%;
background:#fff;
}
#yang{
position:absolute;
margin:0 0 0 -75px;
width:150px;
height:150px;
border-radius:100%;
background:#fff;
}
#yang:after{
position:absolute;
margin:50px 0 0 50px;
content:" ";
width:50px;
height:50px;
border-radius:100%;
background:#000;
}
</style>
<div id="taiji">
<div id="yin"></div>
<div id="yang"></div>
</div>
</body>
</html>
使用一个div元素完成太极阴阳图,要点| :before、:after伪对象和box-shoadow阴影的使用。
<style>
#taiji{
position:absolute;
width:0px;
height:300px;
box-shadow:0 0 100px #000;
border-left:150px solid #fff;
border-right:150px solid #000;
border-radius:100%;
}
#taiji:before{
content:"; ";
position:absolute;
left:-25px;top:50px;
width:50px;height:50px;
border-radius:100%;
background:#000;
box-shadow:0 0 0 50px #fff ;
}
#taiji:after{
content:"; ";
position:absolute;
left:-25px;top:200px;
width:50px;height:50px;
border-radius:100%;
background:#fff;
box-shadow:0 0 0 50px #000 ;
}
</style>
<div id="taiji" ></div>
本文来自 rtian001 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/rtian001/article/details/48686353?utm_source=copy
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图的更多相关文章
- @import————————css代码内部链接另外css
在css代码里这样可以链接另外的css @import url("style.css"); @import语法结构 @import + 空格+ url(CSS文件路径地址); ...
- 如何写出优雅的CSS代码 ?(转)
对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...
- 如何写出优雅的css代码 ?
如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...
- 页面css代码
博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...
- 自动PC端显示 手机端隐藏CSS代码判断实现
实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...
- CSS代码重构与优化之路
作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...
- CSS代码重构
CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...
- CSS 代码是什么?(转)
转自:http://www.divcss5.com/rumen/r95.shtml CSS 代码是什么,什么是CSS代码? 目录 什么是CSS css代码样子(图) 作用 相关扩展阅读 一.了解什么是 ...
- CSS格式化 CSS代码压缩工具
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- iOS - 开源框架、项目和学习资料汇总(动画篇)
动画 1. Core Animation笔记,基本的使用方法 – Core Animation笔记,基本的使用方法:1.基本动画,2.多步动画,3.沿路径的动画,4.时间函数,5.动画组.2. awe ...
- ipv4组播预留地址
列表如下: 224.0.0.0 基准地址(保留) 224.0.0.1 所有主机的地址 224.0.0.2 所有组播路由器的地址 224.0.0.3 不分配 224.0.0.4 dvmrp 路由器 22 ...
- yii---获取当前sql语句
我们在用YII开发项目的时候,会查看当前执行的SQL语句来排查错误,那么YII该如何获取当前的SQL语句呢? $list = user::find()->where(['title'=>$ ...
- jsp页面中引入文件路径问题的解决方案(使用request获取项目路径)【原创】
在项目页面中,总会引入一些js和css,相对路径or绝对路径的选择就显得至关重要了!下面是项目中遇到的问题和解决方案,做一下记录! 环境: myEclipse创建工程,使用jsp+css+js,项目目 ...
- css 多行文字,超出部分隐藏,...代替
css虽然简单,但其实也是记得常用的那些,不常用的还是要搜一搜再写
- hdu1272 小希的迷宫【并查集】
上次Gardon的迷宫城堡小希玩了很久(见Problem B),现在她也想设计一个迷宫让Gardon来走.但是她设计迷宫的思路不一样,首先她认为所有的通道都应该是双向连通的,就是说如果有一个通道连通了 ...
- MapReduce的计数器
第一部分.Hadoop计数器简述 hadoop计数器: 可以让开发人员以全局的视角来审查程序的运行情况以及各项指标,及时做出错误诊断并进行相应处理. 内置计数器(MapReduce相关.文件系统相关 ...
- 通过qemu复现路由器漏洞
目录 简介 环境搭建 固件解包 复现漏洞,IDA调试 参考资料 简介 qemu和vmware一样,一种虚拟机软件,只不过qemu能够虚拟的平台更加丰富一些.能够虚拟很多嵌入式平台的设备. 工作上需要向 ...
- Dungeon Master---2251(bfs)
http://poj.org/problem?id=2251 有一个三维的牢房地图 求从S点走E点的最小时间: #include<stdio.h> #include<string.h ...
- PyQt5标准对话框
很全的Qt的标准对话框,包含QInputDialog.QColorDialog.QFontDialog.QMessageBox.QOpenFileDialog... 全部是由官网的C++版本,转换成P ...