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. 算法学习之快速排序的C语言实现

    近几天在学习简单算法,今天看了一个快速排序和堆排序,堆排序还没搞懂,还是先把快速排序搞清楚吧 教程网上一艘一大堆,这里选择一个讲的比较通俗的的一个吧: http://blog.csdn.net/mor ...

  2. SQL Fundamentals || DCL(Data Control Language) || 用户管理&Profile概要文件

    SQL Fundamentals || Oracle SQL语言 语句 解释 Create user Creates a user(usually performed by a DBA) Grant ...

  3. gitlab svlogd runsv 基于Rotated Log的日志统计

    小结: 1. 日志轮询 log roate 日志文件自动转存和重命名 2. rotated log独立于其他模块,可以以静态库或者动态库的形式支持二次开发: 3. [root@d1 ~]# gitla ...

  4. Python面试网络编程和并发

    1.简述 OSI 七层协议. OSI 开放系统互联参考模型,它是理论的,参考模型 七层:物理层->数据链路层->网络层->传输层->会话层->表示层->应用层 2. ...

  5. django model field validator 设置

    转自:http://blog.csdn.net/cwjcwj520/article/details/17330845 例子为想在创建用户名的时候验证输入字符是否有效,并且插入了even_field为C ...

  6. vs code 设置工作区背景图片方法

    1.扩展--安装background 2.文件--首选项--设置--在settings.josn中编辑--右侧用户设置添加 "background.useFront": false ...

  7. 洛谷P3157 动态逆序对 [CQOI2011] cdq分治

    正解:cdq分治 解题报告: 传送门! 长得有点像双倍经验还麻油仔细看先放上来QwQ! 这题首先想到的就直接做逆序对,然后记录每个点的贡献,删去就减掉就好 但是仔细一想会发现布星啊,如果有一对逆序对的 ...

  8. 洛谷P3599 Koishi Loves Construction 构造

    正解:构造 解题报告: 传送门! 这题俩问嘛,就分成两个问题港QwQ 就按顺序趴,先港第一问QwQ 首先要发现,n在膜n意义下就是0嘛 那作为前缀和的话显然它就只能放在第一个 然后再想下,发现,如果n ...

  9. Linux IO多路复用之epoll网络编程及源码（转）

    原文: 前言 本章节是用基本的Linux基本函数加上epoll调用编写一个完整的服务器和客户端例子,可在Linux上运行,客户端和服务端的功能如下: 客户端从标准输入读入一行,发送到服务端 服务端从网 ...

  10. JavaScript如何实现拖放功能

    1.在学习ExtJs时,对其拖放功能感到很陌生,然后找了个拖放功能实现. 转载地址 2.拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素.鼠标的移动也就是x.y坐标的变化:元素的移动就是style. ...