CSS3制作Freebie标签_html-js-css

概述CSS3制作Freebie标签

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。

内存溢出小编现在分享给大家，也给大家做个参考。

<!DOCTYPE HTML><HTML lang="en-US"><head>  <Meta charset="UTF-8">  <Title>CSS3制作FreebIE标签|w3cplus</Title>  <Meta name="keywords" content="CSS3学习,CSS3属性详解,CSS3 Transition,如何学好CSS3">  <Meta name="description" content="W3CPLUS是一个前端爱好者的家园，W3CPLUS努力打造最优秀的web 前端学习的站点。W3CPLUS力求原创，以一起学习，一起进步，共同分享为原则。W3CPLUS站提供了有关于CSS,CSS3,HTML,HTML5,jquery,手机移动端的技术文档、DEMO、资源，与前端爱好者一起共勉。">  <link rel="shortcut icon" href="http://www.w3cplus.com/sites/all/themes/marvin/favicon.ico">  <link rel="stylesheet" type="text/CSS" href="http://www.w3cplus.com/demo/CSS3/base.CSS" media="all" />  <style type="text/CSS">body{background-color: #f2f2f2;background-size:20px 20px,20px 20px,6px 6px,6px 6px;background-position:-2px -2px,-2px -2px,0 0,3px 3px;background-image: -webkit-linear-gradIEnt(white 2px,transparent 2px),-webkit-linear-gradIEnt(0,white 2px,-webkit-linear-gradIEnt(45deg,#e6e6e6 25%,transparent 25%,transparent 75%,#e6e6e6 75%,#e6e6e6),#e6e6e6);background-image: -moz-linear-gradIEnt(white 2px,-moz-linear-gradIEnt(0deg,-moz-linear-gradIEnt(45deg,#e6e6e6);background-image: -ms-linear-gradIEnt(white 2px,-ms-linear-gradIEnt(0,-ms-linear-gradIEnt(45deg,#e6e6e6);background-image: -o-linear-gradIEnt(white 2px,-o-linear-gradIEnt(0,-o-linear-gradIEnt(45deg,#e6e6e6);                  background-image: linear-gradIEnt(white 2px,linear-gradIEnt(0,linear-gradIEnt(45deg,#e6e6e6);}.Box ul{margin-top: 100px;letter-spacing: -4px;word-spacing: -4px;Font-size: 0;height:75px;text-align: center;Box-shadow:0 -2px 3px rgba(0,.05),0 2px 3px rgba(0,.05);background:#fff; }.Box li{letter-spacing: normal;word-spacing: normal;display:inline-block;*display: inline;zoom:1;position:relative;top:-5px;wIDth:39px;height:48px;margin-right:40px;border-top:1px solID #66991f;border-left:1px solID #66991f;border-right:1px solID #66991f;overflow: hIDden;background-color: #79b023;background-size:3px 3px;background-position: 0 0,1px 1px;background-image: -webkit-linear-gradIEnt(45deg,#91c32e 25%,#91c32e 75%,#91c32e),#91c32e);background-image: -moz-linear-gradIEnt(45deg,#91c32e);background-image: -ms-linear-gradIEnt(45deg,#91c32e);background-image: -o-linear-gradIEnt(45deg,#91c32e);                  background-image: linear-gradIEnt(45deg,#91c32e);}.Box li:last-child{ margin-right: 0;}.Box li:after,.Box li:before{position:absolute;display:block;	}.Box li:before{top:5px;left: 5px;content: "";wIDth: 28px;height: 0;line-height: 30px;color:rgba(69,124,12,.5);border-top: 1px dashed #5d8c1c;border-bottom: 1px dashed #b4d969;Font-size: 18px;Font-family: 'icomoon';Font-style: normal;speak: none;Font-weight: normal;-webkit-font-smoothing: antialiased;}.Box li:after{ content:"";left:-1px;top:38px;wIDth:38px;height:35px;Box-shadow:1px 0 3px rgba(0,.3),0 -1px 3px rgba(0,.3);background:#fff;-webkit-transform:rotate(-45deg) skew(18deg,20deg);-moz-transform:rotate(-45deg) skew(18deg,20deg);-o-transform:rotate(-45deg) skew(18deg,20deg);-ms-transform:rotate(-45deg) skew(18deg,20deg);transform:rotate(-45deg) skew(18deg,20deg);}.Box li:nth-child(1):before{content: "";}.Box li:nth-child(2):before{content: "";}.Box li:nth-child(3):before{content: "";}.Box li:nth-child(4):before{content: "";}.Box li:nth-child(5):before{content: "";}@Font-face {Font-family: 'icomoon';src:url('Fonts/icomoon.eot');src:url('Fonts/icomoon.eot?#IEfix') format('embedded-opentype'),url('Fonts/icomoon.svg#icomoon') format('svg'),url('Fonts/icomoon.woff') format('woff'),url('Fonts/icomoon.ttf') format('truetype');Font-weight: normal;Font-style: normal;}  </style></head><body>  <div >  <nav ID="top_nav">    <ul >      <li><a href="http://www.w3cplus.com" target="_blank">w3cplus</a></li>      <li><a href="http://www.w3cplus.com/resources/CSS3-tutorial-and-case" target="_blank">CSS3详解教程</a></li>      <li><a href="http://www.w3cplus.com/demos/List.HTML" target="_blank">CSS3实例</a></li>      <li><a href="http://www.w3cplus.com/demo/Tags/242.HTML" target="_blank">藤藤每日一练</a></li>    </ul>    <a ID="read" href="http://www.w3cplus.com/demo/CSS3-create-freebIE.HTML" target="_blank">查看原文>></a>  </nav></div><div >  <header ID="header">    <hgrounp >      <h1>CSS3制作FreebIE标签</h1>      <h2>作者：藤藤(如有更好建议或疑问请加群：1041263)<h2>    </hgrounp>  </header>  <section >    <div >      <ul >        <li></li>        <li></li>        <li></li>        <li></li>        <li></li>      </ul>    </div>    </section></div></body></HTML>

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的CSS3制作Freebie标签全部内容，希望文章能够帮你解决CSS3制作Freebie标签所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1096633.html