CSS3+DIV完成好看的动漫五颜六色标识

日期：2020-12-10 类型：科技新闻 

关键词：ps网页版在线制作，静态网页制作方法，微云网页版，怎么制作一个网页，django网页模板

先看看实际效果图：

CSS Code拷贝內容到剪贴板
  1. <style>   
  2.   
  3. .dict { margin: 20px 0;clear:both ;text-align:left;font-size:12px;}   
  4.   
  5. .dict a { line-height: 24px; height: 24px; display: inline-block; background: #fff; padding: 3px 11px; margin: 10px 5px 0 0; border-radius: 8px; -moz-transition: all 0.5s; -webkit-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; }   
  6.   
  7. .dict a { color: #FFF;text-decoration:none }   
  8.   
  9. .dict a:hover { border-radius: 0; text-shadow: #000 1px 1px 1px }   
  10.   
  11. .dict .pcolor a:nth-child(8n⑺) { background: #8A9B0F }   
  12.   
  13. .dict .pcolor a:nth-child(8n⑹) { background: #EB6841 }   
  14.   
  15. .dict .pcolor a:nth-child(8n⑸) { background: #3FB8AF }   
  16.   
  17. .dict .pcolor a:nth-child(8n⑷) { background: #FE4365 }   
  18.   
  19. .dict .pcolor a:nth-child(8n⑶) { background: #FC9D9A }   
  20.   
  21. .dict .pcolor a:nth-child(8n⑵) { background: #EDC951 }   
  22.   
  23. .dict .pcolor a:nth-child(8n⑴) { background: #C8C8A9 }   
  24.   
  25. .dict .pcolor a:nth-child(8n) { background: #83AF9B }   
  26.   
  27. .dict .pcolor a:first-child { background: #036564 }   
  28.   
  29. .dict .pcolor a:last-child { background: #3299BB }   
  30.   
  31. </style>   
  32.   
  33. <div class="dict">   
  34.   
  35.     <p class="pcolor">   
  36.   
  37.         <a href="#">html</a>   
  38.   
  39.         <a href="#">css3</a>   
  40.   
  41.         <a href="#">网站模板</a>   
  42.   
  43.         <a href="#">本人blog模板</a>   
  44.   
  45.         <a href="#">扁平化</a>   
  46.   
  47.         <a href="#">div+css</a>   
  48.   
  49.         <a href="#">bootstrap</a>   
  50.   
  51.         <a href="#">公司模板</a>   
  52.   
  53.         <a href="#">古典/文化艺术</a>   
  54.   
  55.         <a href="#">婚纱拍摄</a>   
  56.   
  57.         <a href="#">感情</a>   
  58.   
  59.         <a href="#">jquery</a>   
  60.   
  61.     </p>   
  62.   
  63. </div>   
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。

原文连接：http://www.cnblogs.com/cssteach/archive/2016/06/16/5590375.html

上一篇：CSS中的z 返回下一篇：微信公众号抽奖活动h5游戏如何玩？能够试一下九