很久都没有在博客园上发表一些自己学的新东西了，只是在有空的时候逛一逛博客园而已，看来我不是一个真正的程序员，哈哈！
但是今天非常想和大家分享一个小东西，那是前两天在一个网页上看到了这个东西
我好奇中间那个是怎么做出来的就F12看了一下它的html页面代码，我看到了这个标签circle，当时就比较好奇了，因为我好像没见过这个标签，果然不是一个真正的程序员，我这段时间都在干嘛了呢？哈哈！
没关系，一般不懂的话我都去问度娘，因为别人靠不住，只能靠自己，当自己也靠不住的时候就去靠度娘，好想配上一个笑哭的表情，怎么没有表情呢哈哈！
然后就去百度了，
这不是我想要的结果，哈哈！不开玩笑了然后就懂得了circle是SVG（ 意为可缩放矢量图形）的一个标签，然后就去简单看了关于SVG的写法与用法，
具体的大家想学习的话可以去百度找找，通过简单的学习和自己实践（其实还不是太懂），自己开始不太喜欢去看那些字面的解释，都是实践的多，所以理论知识感觉似乎不懂。
不多说了，反正我就做出了一个简单可爱的页面，效果图如下图：
太阳、草坪、花朵、房子等都是用SVG做出来的，可能看起来是一个比较幼稚的画面，但没办法，少女心，哈哈！
废话那么多能有几位朋友能看到这里呢？或是有些朋友直接跳到代码，不管怎么样能到这里的朋友都是我的荣幸，谢谢大家，接下来上代码吧，希望不让大家失望。
HTML部分： <body> <div class="box"> <!--圆形太阳--> <svg width="200" height="200" viewBox="0 0 1000 1000" class="sun"> <circle cx="500" cy="500" r="280" stroke="none" fill="#f77722"></circle> <circle cx="500" cy="500" r="400" stroke-width="50" stroke="#f77722" fill="none" stroke-dasharray="20 120"></circle> <circle cx="400" cy="400" r="20" fill="#000"></circle> <circle cx="600" cy="400" r="20" fill="#000"></circle> <circle cx="500" cy="550" r="100" fill="none" stroke="#000" stroke-width="10" stroke-dasharray="300 700"></circle> </svg> <!--椭圆形草坪--> <div class="sod"> <svg width="100%" height="100%"> <ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="#269b13" /> </svg> </div> <!--花朵--> <div class="floret"> <svg width="100%" height="100%"> <line x1="280" y1="0" x2="300" y2="300" stroke-width="2" stroke="#269b13" /> <line x1="195" y1="5" x2="300" y2="300" stroke-width="2" stroke="#269b13" /> </svg> <svg width="100" height="100" viewBox="0 0 100 100" class="floret1"> <circle cx="50" cy="50" r="8" fill="red"></circle> <circle cx="50" cy="50" r="20" fill="none" stroke-width="10" stroke="#f77722" stroke-dasharray="10 10 15 15"></circle> </svg> <svg width="100" height="100" viewBox="0 0 100 100" class="floret2"> <circle cx="50" cy="50" r="8" fill="red"></circle> <circle cx="50" cy="50" r="20" fill="none" stroke-width="10" stroke="#f77722" stroke-dasharray="10 10 15 15"></circle> </svg> <svg width="100" height="100" viewBox="0 0 100 100" class="leaf1"> <ellipse cx="10%" cy="50%" rx="8%" ry="50%" fill="#269b13" /> </svg> <svg width="100" height="100" viewBox="0 0 100 100" class="leaf2"> <ellipse cx="10%" cy="50%" rx="8%" ry="50%" fill="#269b13" /> </svg> </div> <!--房子--> <div class="house"> <!--屋顶--> <svg class="roof"> <polygon points="0,150 200,0 400,150" fill="#ccc" stroke="#000" stroke-width="1" /> </svg> <!--房子--> <svg class="house1"> <rect width="300" height="200" fill="#fff" stroke-width="2" stroke="#000" /> </svg> <!--窗户--> <svg class="window"> <rect width="60" height="60" fill="#fff" stroke-width="2" stroke="#000" /> <line x1="30" y1="0" x2="30" y2="60" stroke-width="2" stroke="#000" /> <line x1="0" y1="30" x2="60" y2="30" stroke-width="2" stroke="#000" /> </svg> <!--门口--> <svg class="house2"> <rect width="80" height="100" fill="#fff" stroke-width="2" stroke="#000" /> <line x1="40" y1="0" x2="40" y2="100" stroke-width="2" stroke="#000" /> <line x1="30" y1="60" x2="50" y2="60" stroke-width="2" stroke="#000" /> <circle cx="16%" cy="42%" r="5" fill="#000"></circle> </svg> <!--烟囱--> <svg class="stack"> <rect width="25" height="80" fill="none" stroke="#000" stroke-width="2" /> </svg> <!--烟--> <svg class="cigarette1"> <ellipse cx="4%" cy="4%" rx="4%" ry="4%" fill="none" stroke="#000" stroke-width="1" /> </svg> <svg class="cigarette2"> <ellipse cx="6%" cy="6%" rx="6%" ry="6%" fill="none" stroke="#000" stroke-width="1" /> </svg> </div> <div class="bird"> <img src="img/bird.png" /> </div> <div class="bird bird2"> <img src="img/bird.png" /> </div> <!--淡入淡出轮播图--> <div class="line"> <img src="img/4b90f603738da977506b270cba51f8198618e355.png" /> </div> <div class="banner"> <ul> <li> <img src="img/banner8.jpg" /> </li> <li> <img src="img/banner2.jpg" /> </li> <li> <img src="img/banner3.jpg" /> </li> <li> <img src="img/banner4.jpg" /> </li> <li> <img src="img/banner5.jpg" /> </li> <li> <img src="img/banner6.jpg" /> </li> <li> <img src="img/banner7.jpg" /> </li> <li> <img src="img/banner1.jpg" /> </li> </ul> </div> <!--文字滚动--> <div id="sdmsg"> <marquee direction="up" scrollamount="1" behavior="scroll" contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" onmouseover=" this.stop(); " onmouseout="this.start();"> <p> 万两黄金容易得,知音一个也难求。 孤帆远影碧空尽，惟见长江天际流。 势利交怀势利心，斯文谁复念知音！伯牙不作钟期逝，千古令人说破琴。 采葵莫伤根，伤根葵不生。结交莫羞贫，羞贫友不成。 隔山隔水不隔心，友谊不管远与近，好花真想季季开，朋友真想天天在。 若知四海皆兄弟，何处相逢非故人。 劝君更进一杯酒，西出阳关无故人。 人生结交在终始，莫为升沉中路分。 不知其人，视其友。 真实的十分理智的友谊是人生最美好的无价之宝。 换我心，为你心，始知相忆深。 君子之交淡若水,小人之交甘若醴.君子淡以亲,小人甘以绝。 翻手作云覆手雨，纷纷轻薄何须数。君不见管鲍贫时交，此道今人弃如土。 今日乐相乐，别后莫相忘。 朋友总是心连心，真正朋友值千金，灯光之下思贤友，时刻勿忘朋友心。 </p> </marquee> </div> <!--音乐播放--> <div class="music"> <audio src="img/薛凯琪、陈意涵、杨子姗 - 一起老去.mp3 " autoplay="autoplay " loop="-1 " controls="controls "></audio> </div> </div> </body>
CSS部分： * { margin: 0px; padding: 0px; } ul, li { list-style: none; } /*最外层盒子*/ .box { min-height: 680px; height: 100%; position: relative; } /*草坪*/ .sod { min-width: 1300px; width: 100%; position: absolute; bottom: 0%; } /*花朵*/ .floret { min-width: 1300px; width: 100%; position: absolute; bottom: 10%; } .floret1 { /*border: 1px solid red;*/ position: absolute; top: -50%; left: 16.5%; } .floret2 { position: absolute; top: -40%; left: 10%; } .leaf1 { position: absolute; top: 10%; left: 21%; } .leaf2 { position: absolute; top: 10%; left: 17%; } /*房子*/ .house { min-width: 1300px; width: 100%; height: 250px; position: absolute; bottom: 15%; } .house1 { position: absolute; bottom: 0%; left: 40%; z-index: 10; } .house2 { position: absolute; bottom: -20%; left: 54%; z-index: 10; } /*屋顶*/ .roof { position: absolute; left: 36%; width: 400px; top: -20%; height: 150px; } /*窗口*/ .window { position: absolute; bottom: -20%; left: 44%; z-index: 10; } /*烟囱*/ .stack { position: absolute; top: -10%; left: 58%; z-index: -10; } /*烟*/ .cigarette1 { position: absolute; top: -20%; left: 58%; } .cigarette2 { position: absolute; top: -30%; left: 59%; } /*淡入淡出轮播图*/ .banner { width: 180px; height: 300px; position: absolute; top: 100px; left: 300px; -webkit-transform: rotate(30deg); -moz-transform: rotate(30deg); transform: rotate(30deg); } .banner ul, li, img { display: block; width: 180px; height: 300px; } li { position: absolute; top: 0px; left: 0px; } .bird { width: 100px; height: 80px; position: absolute; top: 60px; left: 700px; } .bird2 { top: 70px; left: 800px; } .bird img { display: block; width: 100%; height: 100%; } .line { width: 400px; height: 80px; position: absolute; top: 20px; left: 195px; z-index: 100; } .line img { display: block; width: 100%; height: 100%; } #sdmsg { width: 350px; height: 400px; position: absolute; left: 950px; top: 100px; z-index: 200; background: url(../img/bg.png) no-repeat; } #sdmsg marquee { display: block; width: 100%; height: 100%; line-height: 30px; color: #000; font-weight: bold; font-size: 20px; font-family: "腾祥铁山楷书繁", "楷体","微软雅黑"; } .music { position: absolute; left: 950px; top: 50px; }
jq部分：（实现的是图片的淡入淡出） $(function() { // 图片淡入淡出 var i = 0; var img = $(".banner ul li"); img.eq(0).show().siblings().hide(); //先显示第一张 setInterval(function() { i++; if(i > img.length) { i = 0; } $(".banner ul li").eq(i).fadeIn().siblings().fadeOut(); }, 10000); });
代码就是这样的，可能会写得很乱，大家不要介意，毕竟我不是一个真正的程序员，哈哈哈！大家也可以在我的基础上做出简化版来，样式我都是通过定位写死的，所以页面没有什么扩展性。因为只是想单纯做出一个可爱的页面而已，希望大家能够喜欢。看来以后要多分享分享自己学到的新东西，哈哈哈！今天就到这咯。
