最近開始學習前段開發的一些知識，當然少不了Html5和Css3，作為我的第一課，我參照別人的例子，自己動手，用Css3繪制了一個遨游的Logo。現記錄一下嘿嘿：
1 <!DOCTYPE> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <style> 6 header{ 7 font-family:"MicroSoft YaHei"; 8 font-size:30px; 9 color:#990000; 10 } 11 12 .Circle1{ 13 width:240px; 14 height:240px; 15 -moz-border-radius:120px; 16 -webkit-border-radius:120px; 17 border-radius:120px; 18 border:2px solid #789cb6; 19 box-shadow:5px 5px 7px #999; 20 } 21 22 .Circle2{ 23 width:230px; 24 height:230px; 25 -moz-border-radius:115px; 26 -webkit-border-radius:115px; 27 border-radius:115px; 28 background-color:#3b99e3; 29 position:relative; 30 left:5px; 31 top:5px; 32 } 33 .rect1{ 34 width:150px; 35 height:100px; 36 -moz-border-radius:3px 20px 3px 3px; 37 -webkit-border-radius:3px 20px 3px 3px; 38 border-radius:3px 20px 3px 3px; 39 background-color:#FFFFFF; 40 position:relative; 41 left:40px; 42 top:65px; 43 } 44 45 .rect2{ 46 width:35px; 47 height:45px; 48 background-color:#FFFFFF; 49 border:25px solid #3b99e3; 50 position:relative; 51 left:70px; 52 top:-5px; 53 } 54 </style> 55 </head> 56 <body> 57 <header>Lession One</header> 58 <section> 59 <div class="Circle1"> 60 <div class="Circle2"> 61 <div class="rect1"></div> 62 <div class="rect2"></div> 63 </div> 64 </div> 65 </section> 66 </body> 67 </html>
總結：這個logo起始繪制起來很簡單，主要是利用了css的圓角。靈活運用可以繪制出更復雜的圖形。
渝公網安備 50024202000196號
域名注冊知識
虛擬主機知識
網站建設知識
網絡推廣知識
網絡營銷知識
常見技術問題
QQ空間
新浪微博
開心網
人人網