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太极阴阳图的更多相关文章

  1. @import————————css代码内部链接另外css

    在css代码里这样可以链接另外的css @import url("style.css");   @import语法结构 @import + 空格+ url(CSS文件路径地址); ...

  2. 如何写出优雅的CSS代码 ？(转)

    对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于团队合作和后期的维护:而有的混 ...

  3. 如何写出优雅的css代码 ？

    如何写出优雅的css代码 ? 对于同样的项目或者是一个网页,尽管最终每个前端开发工程师都可以实现相同的效果,但是他们所写的代码一定是不同的.有的优雅,看起来清晰易懂,代码具有可拓展性,这样的代码有利于 ...

  4. 页面css代码

    博主原来的页面css代码 (这个是原来的那种效果,差不多弄出来会是这种效果http://www.cnblogs.com/thmyl/) /*simplememory*/ #google_ad_c1, ...

  5. 自动PC端显示 手机端隐藏CSS代码判断实现

    实现场景描述: 有些内容部署在PC端但是有不适合在手机端显示(比如盒子过大,遮挡内容)或者手机端显示毫无意义等.我们可以使用下面的代码来实现:电脑端显示,手机端隐藏 实现方法: CSS控制判断 @me ...

  6. CSS代码重构与优化之路

    作者:@狼狼的蓝胖子 网址:http://www.cnblogs.com/lrzw32/p/5100745.html 写CSS的同学们往往会体会到,随着项目规模的增加,项目中的CSS代码也会越来越多, ...

  7. CSS代码重构

    CSS代码重构的目的 我们写CSS代码时,不仅仅只是完成页面设计的效果,还应该让CSS代码易于管理,维护.我们对CSS代码重构主要有两个目的:1.提高代码性能2.提高代码的可维护性 提高代码性能 提高 ...

  8. CSS 代码是什么?（转）

    转自:http://www.divcss5.com/rumen/r95.shtml CSS 代码是什么,什么是CSS代码? 目录 什么是CSS css代码样子(图) 作用 相关扩展阅读 一.了解什么是 ...

  9. CSS格式化 CSS代码压缩工具

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. npm使用报错解决办法

    在使用脚手架工具进行项目搭建的时候,很多时候会用到npm ,最近用npm的时候遇到一个错误: 'CALL "I:\Program Files\nodejs\\node.exe" & ...

  2. 设置ubuntu默认中文字符

    一. Ubuntu默认的中文字符编码 Ubuntu默认的中文字符编码为zh_CN.UTF-8,这个可以在 /etc/environment中看到:sudo gedit /etc/environment ...

  3. bootstrap中点击左边展开

    <div id="sideNav" href=""><i class="material-icons dp48 glyphicon- ...

  4. logstash实战filter插件之grok（收集apache日志）

    有些日志(比如apache)不像nginx那样支持json可以使用grok插件 grok利用正则表达式就行匹配拆分 预定义的位置在 /opt/logstash/vendor/bundle/jruby/ ...

  5. 同样的神经网络引擎，苹果A11芯片比华为麒麟970牛在哪？

    本文编辑:Cynthia iPhone X发布之后,999美元的售价并没有让人止步,相反,新iPhone的Face ID等功能让越来越多的人期待,库克在<早安美国>节目里也说了,iPhon ...

  6. HDU 3091 - Necklace - [状压DP]

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3091 Time Limit: 2000/1000 MS (Java/Others) Memory Li ...

  7. LDA模型数据的可视化

    """ 执行lda2vec.ipnb中的代码 模型LDA 功能:训练好后模型数据的可视化 """ from lda2vec import p ...

  8. LOJ6089 小Y的背包计数问题 背包

    正解:背包 解题报告: 先放传送门! 好烦昂感觉真的欠下一堆,,,高级数据结构知识点什么的都不会,基础又麻油打扎实NOIp前的题单什么的都还麻油刷完,,,就很难过,,,哭辣QAQ 不说辣看这题QwQ! ...

  9. PyQt5标准对话框

    很全的Qt的标准对话框,包含QInputDialog.QColorDialog.QFontDialog.QMessageBox.QOpenFileDialog... 全部是由官网的C++版本,转换成P ...

  10. [py]python内存管理

    Python深入06 Python的内存管理 堆栈内存 - 堆内存 对象一般就是开辟在堆上的结构体: 堆内存用于提供 引用数据类型存储值 对象存储的是属性名和属性值 函数存储的是函数体代码字符串 函数 ...