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. 【AngularJs-模块篇-Form篇】

    1.模块 <!doctype html> <html lang="en-US" ng-app="myApp"> <head> ...

  2. css---媒体查询

    简单示例: <style type="text/css"> /* 小于 300的时候 */ @media screen and (max-width: 400px){ ...

  3. 原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 <script> var oStr = ''; var postData = {}; var oAjax = null; //post ...

  4. 图论-桥/割点/双连通分量/缩点/LCA

    基本概念: 1.割点:若删掉某点后,原连通图分裂为多个子图,则称该点为割点. 2.割点集合:在一个无向连通图中,如果有一个顶点集合,删除这个顶点集合,以及这个集合中所有顶点相关联的边以后,原图变成多个 ...

  5. 编译android --system,framework

    在你的android 目录下: sudo git clone  https://android.googlesource.com/platform/manifest cd manifest git b ...

  6. 【aws】

    云服务器EC2 动态调整云服务器ec2 cpu.内存大小: 在ec2实例上右键,Instance settings--> Change Instance Type 选择一个合适的type 云数据 ...

  7. River Crossing---河南省第六届大学生程序设计竞赛

    题目描述 Afandi is herding N sheep across the expanses of grassland  when he finds himself blocked by a ...

  8. sparkuser is not in the sudoers file. This incident will be reported.

    切换到root身份$su -(注意有- ,这和su是不同的,在用命令"su"的时候只是切换到root,但没有把root的环境变量传过去,还是当前用户的环境变量,用"su ...

  9. oracle(七)索引

    一.B-Tree索引 (1). 选择索引字段的原则: 在WHERE子句中最频繁使用的字段 联接语句中的联接字段 选择高选择性的字段(如果很少的字段拥有相同值,即有很多独特值,则选择性很好) Oracl ...

  10. 数据库级别DDL操作监控审计、数据库触发器/服务器触发器

    关键词:数据库触发器/服务器触发器  ,数据库级别DDL操作监控审计,禁止修改登录名密码 [1]数据库级别DDL操作监控审计 转自2012示例库,只能数据库级别,不能实例级别 use database ...