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. python中的range与xrange

    range 也是一种类型(type),它是一个数字的序列(s sequence of numbers),而且是不可变的,通常用在for循环中. class range(stop) class rang ...

  2. 肖俊：HPE IT 的DevOps 实践分享

    本篇文章来自于HPE和msup共同举办的技术开放日HPE测试技术总监肖俊的分享,由壹佰案例整理编辑. 一.DevOps含义解析 这是DevOps的趋势图.DevOps这个概念大概是在2009年被提出来 ...

  3. HDU 2187 - 悼念512汶川大地震遇难同胞——老人是真饿了 - [大水题]

    讲真,这么水的题,我都不怎么好意思扔到博客上来,但是没办法啊,我总得证明一下今天上午我不是在寝室里瞎玩浪费掉的…… 思路就是,把米按单价从小到大排个序,便宜的买的越多越好,直到钱花光为止……我真的都不 ...

  4. ArcGIS API for javascript开发笔记（四）——GP服务调用之GP模型的规范化制作详解

    感谢一路走来默默陪伴和支持的你~~~ -------------------欢迎来访,拒绝转载------------------- 在之前的利用Python分析GP服务运行结果的输出路径 & ...

  5. od --http://blog.csdn.net/hgy413/article/details/7711925

    http://blog.csdn.net/hgy413/article/details/7711925

  6. iOS-动画之CoreAnimation框架(转载)

    一.简介 iOS动画主要是指Core Animation框架.官方使用文档地址为:Core Animation Guide.Core Animation是iOS和macOS平台上负责图形渲染与动画的基 ...

  7. 学习计划 mysql 主从复制

    网上资料繁多,需要跳多少坑才能实现,跳跳就知道了. -- 主从复制 如题:主数据库进行的操作,从数据库进行备份. -- 原理 有关于这方面的原理网上也是一搜一大片,去看看吧.肯定没错. 这里简单说一下 ...

  8. sum统计某字段满足某种条件的记录数

    (1)count来查询: 查询 lw_devices_type_relation 表中满足is_standard为1的数量. (2)sum来查询: ) from lw_devices_type_rel ...

  9. 优化dedecms设置文章url自定义规则

    DEDECMS自定义URL规则的做得还是不错的,可清楚的看到URL中可用到的变量,并且这些变量包括年月日.时间戳.文章 ID.拼音+文章ID.拼音部首.栏目目录及日期加ID转换的字符串等,基本可以很好 ...

  10. js-jquery-Validate校验【二】中文api

    jQuery.validate 中文 API 名称 返回类型 描述 validate(options) Validator 验证所选的 FORM. valid() Boolean 检查是否验证通过. ...