冰之雪博�?/title> <meta name="keywords" content="网站制作,博客,个人博客,个人网站,网站建设,网站模板" /> <meta name="description" content="如何建立个人网站制作_企业网站建设方案_独立个人博客模板源码程序下载哪个比较好_SEO排名技术建站cms系统制作企业网站个人网站价格_个人博客网站制作视频教学快速建�? /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="/skin/css/base.css" rel="stylesheet"> <link href="/skin/css/m.css" rel="stylesheet"> <script src="/skin/js/jquery-1.8.3.min.js" ></script> <script src="/skin/js/comm.js"></script>  <script type="text/javascript" src="/skin/js/ajax.js"></script> <link href="/skin/css/shCoreDefault.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="/skin/js/shCore.js"></script> <script type="text/javascript"> SyntaxHighlighter.all(); </script>  <script language="javascript" type="text/javascript" src="/include/dedeajax2.js"></script> <script language="javascript" type="text/javascript"> </script> </head> <body>   <header id="header"> <div class="navbox"> <h2 id="mnavh"><span class="navicon"></span></h2> <div class="logo"><a href="/">冰之�?| <font class="font16">排名技术建站，让你对手追赶</font></a></div> <nav> <ul id="starlist"> <li><a href="/" title="首页">网站首页</a></li> <li class="menu"><a href="/a/gerenbokemoban/" target="_blank">热点资讯</a> <ul class="sub"> <li><a href="/a/gerenbokemoban/gerenwangzhanmoban/" target="_blank">时尚盛典</a></li> <li><a href="/a/gerenbokemoban/diguocmsmoban/" target="_blank">娱乐生活</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/gerenwangzhanmoban/" target="_blank">博客网站制作</a> <ul class="sub"> <li><a href="/a/gerenwangzhanmoban/xindebiji/" target="_blank">心得笔记</a></li> <li><a href="/a/gerenwangzhanmoban/CSS3_Html5/" target="_blank">CSS3|Html5</a></li> <li><a href="/a/gerenwangzhanmoban/wangzhanjianshejiaocheng/" target="_blank">网站建设教程</a></li> <li><a href="/a/gerenwangzhanmoban/tuijiangongju/" target="_blank">推荐工具</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/qiyewangzhanjianshe/" target="_blank">企业网站建设</a> <ul class="sub"> <li><a href="/a/qiyewangzhanjianshe/qiyewangzhanmoban/" target="_blank">企业网站模板</a></li> <li><a href="/a/qiyewangzhanjianshe/qiyewangzhanzhizuo/" target="_blank">企业网站制作</a></li> </ul> <span></span></li> <li class="menu"><a href="/a/wangyeshejixinde/" target="_blank">网页设计心得</a> <ul class="sub"> <li><a href="/a/wangyeshejixinde/bokeriji/" target="_blank">博客日记</a></li> <li><a href="/a/wangyeshejixinde/chengxurensheng/" target="_blank">程序人生</a></li> </ul> <span></span></li> <li><a href="/a/youxiugerenboke/" target="_blank">时装搭配</a></li> <li><a href="/a/guanyuwo/" target="_blank">关于�?/a></li> </ul> </nav> <div class="searchico"></div> </div> </header>    <article>  <div class="lbox"> <div class="content_box whitebg"> <h2 class="htitle"><span class="con_nav">您现在的位置是：<a href='http://www.bingzhixue.top/'>主页</a> > <a href='/a/gerenwangzhanmoban/'>博客网站制作</a> > <a href='/a/gerenwangzhanmoban/CSS3_Html5/'>CSS3|Html5</a> > > </span></h2> <h1 class="con_tilte">学习用css3画博客网站logo图标</h1> <p class="bloginfo"><i class="avatar"><img src="/skin/img/avatar.jpg"></i><span>admin </span><span>2019-04-03</span><span>【网站建设教程�?/span><span><script src=""></script>人已围观</span></p> <p class="con_info"><b>简�?/b>花了几个小时的时间来研究怎么用css3来画logo，就是G有点儿问题，也算是有进步了，代码贴出来： CSS样式表： .y{width:160px;height:200px;position:relative; /* relat...</p> <div class="con_text"> <p style="margin: 15px 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> 花了几个小时的时间来研究怎么用css3来画logo，就是G有点儿问题，也算是有进步了，代码贴出来：</p> <div style="margin: 0px; padding: 0px; color: rgb(51, 51, 51); font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 15px;"> <img alt="学习用css3画博客网站logo图标" src="https://www.yangqq.com/upload/news/month_1304/20130416234542262.png" style="margin: auto; padding: 0px; border: 0px; display: block; max-width: 100%; height: auto !important;" /> <p style="margin: 15px 0px; padding: 0px;"> <strong style="margin: 0px; padding: 0px;">CSS样式表：</strong></p> <p style="margin: 15px 0px; padding: 0px;"> <span style="margin: 0px; padding: 0px; color: rgb(75, 75, 75); font-family: "Courier New";">.y{width:160px;height:200px;position:relative; /* relative(相对定位) 对象不可层叠、不脱离文档流，参考自身静态位置通过 top,bottom,left,right 定位，并且可以通过z-index进行层次分级 */</span></p> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">/* after 伪元素在元素之前添加内容*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.y:before{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:120px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); </font><span style="margin: 0px; padding: 0px; color: rgb(75, 75, 75); font-family: "Courier New";">/* skew 逆时针倾斜*/</span></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:20px; top:10px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> </div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">/* after 伪元素在元素之后添加内容*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.y:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:120px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333; </font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:-2px;top:130px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.a:before{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:240px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-webkit-transform: skew(-20deg); -moz-transform: skew(-20deg); -o-transform: skew(-20deg); </font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:150px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> </div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.a:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:240px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); </font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:270px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> </div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.n:before{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:240px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:400px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> </div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.n:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:240px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-webkit-transform: skew(20deg); -moz-transform: skew(20deg); -o-transform: skew(20deg); </font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:470px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> </div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.n1{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:60px; height:240px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:540px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.g:before{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width: 250px; height: 250px;-moz-border-radius: 125px; -webkit-border-radius: 125px; border-radius: 125px; /* radius 圆半�?*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:650px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.g:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width: 160px; height: 160px;-moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 80px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#fff;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:700px; top:67px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.g1:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width: 100px; height: 140px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#fff;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:810px; top:75px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.g2:before{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width: 110px; height: 50px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:769px; top:115px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.g2:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width: 57px; height: 80px;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#333;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:822px; top:135px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> </div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">/* after 伪元素在元素之前添加内容*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.heart:before{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">border-radius:80px 80px 0 0;/* 正方形的内切圆的半径等于正方形边长的一�?*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:160px; height:240px;/* 长方�?*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#e15782;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-moz-transform: rotate(-45deg);/* 逆时针旋�?5°*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-ms-transform: rotate(-45deg);</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-o-transform: rotate(-45deg);</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-webkit-transform: rotate(-45deg);</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:940px; top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">.heart:after{</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">content:" ";</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">border-radius:80px 80px 0 0;/* 正方形的内切圆的半径等于正方形边长的一�?*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">width:160px; height:240px;/* 长方�?*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">background:#e15782;</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-moz-transform: rotate(45deg);/* 顺时针旋�?5°*/</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-ms-transform: rotate(45deg);</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-o-transform: rotate(45deg);</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">-webkit-transform: rotate(45deg);</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">position:absolute;/* absolute(绝对定位) 脱离文档流，通过 top,bottom,left,right 定位 */</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <font color="#4b4b4b" face="Courier New" style="margin: 0px; padding: 0px;">left:998px;top:20px}</font></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <strong style="margin: 0px; padding: 0px;">DIV�?/strong></div> <div class="cnblogs_code_toolbar" style="margin: 5px 0px 0px; padding: 0px;"> <img alt="学习用css3画博客网站logo图标" src="https://www.yangqq.com/upload/news/month_1304/201304162349388475.png" style="margin: auto; padding: 0px; border: 0px; display: block; max-width: 100%; height: auto !important;" /></div> </div> <br /> <div class="share"><img src="/skin/img/wxgzh.jpg"> <p>扫描关注冰之雪微信公众号，第一时间获取网站模板更新动�?/p> <p>本文地址�?a href="/" target="_blank">http://www.bingzhixue98.com</a></p> </div> <p><span class="diggit"> <a href="" onclick="javascript:postDigg('good',29)"> 很赞哦！ </a>(0 <script language="javascript" type="text/javascript">getDigg(29);</script> )</span></p> <div class="nextinfo"> <p>上一篇：上一篇：<a href='/a/gerenwangzhanmoban/CSS3_Html5/28.html'>三步实现滚动条触动css动画效果</a> </p> <p>下一篇：下一篇：没有�?</p> </div> </div> </div> <div class="ad whitebg"><a href='/'> <img src='/skin/img/8793672fca8dae2ce093aa46546f8e22.jpg'> </a></div> <div class="whitebg"> <h2 class="htitle">相关文章</h2> <ul class="otherlink"> </ul> </div>  </div>   <div class="whitebg paihang"> <h2 class="htitle">点击排行</h2> <ul> </ul> </div> <div class="whitebg tuijian"> <h2 class="htitle">本栏推荐</h2> <ul> </ul> </div> <div class="ad whitebg imgscale"> <ul> <a href='/' target=_blank><img src='/skin/img/9b68673aa2d35ee182119945eb2ef498.png'></a> </ul> </div> <div class="whitebg cloud"> <h2 class="htitle">标签�?/h2> <ul> <a href="/a/TAGsxinxi/wangzhanjianshe/" target="_blank">网站建设</a> <a href="/a/TAGsxinxi/qiyemenhuwangzhan/" target="_blank">企业门户网站</a> <a href="/a/TAGsxinxi/baojia/" target="_blank">报价</a> <a href="/a/TAGsxinxi/qiyewangzhanzhizuo/" target="_blank">企业网站制作</a> <a href="/a/TAGsxinxi/jiage/" target="_blank">价格</a> <a href="/a/TAGsxinxi/gerenwangzhanjianshe/" target="_blank">个人网站建设</a> <a href="/a/TAGsxinxi/qiyewangzhanjianshejiage/" target="_blank">企业网站建设价格</a> <a href="/a/TAGsxinxi/qiyewangzhanpaiming/" target="_blank">企业网站排名</a> <a href="/a/TAGsxinxi/wangzhanzhizuojiage/" target="_blank">网站制作价格</a> <a href="/a/TAGsxinxi/wangzhanjiansheduoshaoqian/" target="_blank">网站建设多少�?/a> <a href="/a/TAGsxinxi/qiyewangzhanjiansheqiyewangzhanjianshe/" target="_blank">企业网站建设企业网站建设价格</a> <a href="/a/TAGsxinxi/dingwei/" target="_blank">定位</a> <a href="/a/TAGsxinxi/duoshaoqian/" target="_blank">多少�?/a> <a href="/a/TAGsxinxi/qiyewangzhanjianshe/" target="_blank">企业网站建设</a> <a href="/a/TAGsxinxi/mobanjianzhan/" target="_blank">模板建站</a> <a href="/a/TAGsxinxi/SEOyouhua/" target="_blank">SEO优化</a> <a href="/a/TAGsxinxi/hunqing/" target="_blank">婚庆</a> </ul> </div> <div class="whitebg wenzi"> <h2 class="htitle">猜你喜欢</h2> <ul> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/12.html">6条网页设计配色原�?让你秒变�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/10.html">十条设计原则教你学会如何设计�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/28.html">三步实现滚动条触动css动画效果</a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/9.html">别让这些闹心的套路，毁了你的�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/29.html">学习用css3画博客网站logo图标</a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/8.html">网页中图片属性固定宽度，如何�?/a></li> <li><a target="_blank" href="/a/gerenwangzhanmoban/CSS3_Html5/11.html">用js+css3来写一个手机栏目导�?/a></li> </ul> </div> <div class="ad whitebg imgscale"> <ul> <a href='/' target=_blank><img src='/skin/img/9b643a3237daadb5f5e6d08964afe571.jpg'></a> </ul> </div>  </div> </article>  <footer> <div class="box"> <div class="wxbox"> <ul> <li><img src="/skin/img/wx.png"><span>微信公众�?/span></li> <li><img src="/skin/img/wx.png"><span>我的微信</span></li> </ul> </div> <div class="endnav"> <p><b>站点声明�?/b></p> <p>1、本站个人博客模板，均为冰之雪本人设计，个人可以使用，但是未经许可不得用于任何商业目的�?/p> <p>2、所有文章未经授权禁止转载、摘编、复制或建立镜像，如有违反，追究法律责任。举报邮箱：<a href="/" target="_blank">396585662@qq.com</a></p> <a href=http://www.dedecms.com target='_blank'>Power by DedeCms</a> <p>Copyright © <a href="/" target="_blank">www.bingzhixue.top</a> All Rights Reserved. 备案号：<a href="http://beian.miit.gov.cn/" target="_blank">ICP备案号：湘ICP�?9011697号�?</a> <a href="/" target="_blank">网络营销推广</a></p> </div> </div> <a href="#"> <div class="top"></div> </a> </footer> <!--左浮�?-> <div class="kf"> <h2><span id="closed"></span>客服在线</h2> <ul> <li><a href="tencent://Message/?Uin=396585662&websiteName=q-zone.qq.com&Menu=yes" target="_blank" class="qqservice_list_link">QQ客服</a></li> </ul> <ul class="kfdh"> <p class="kftext">客服微信扫码</p> <p class="kfnum"><img src="/skin/img/wx.png"></p> </ul> <p class="kftext">服务时间</p> <p class="kftime">周一至周�?9:00-21:00</p> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f655f558c510211e38805f6b586e6b15"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </body> </html>