HTML5+CSS3實例教程:繪制遨游浏覽器Logo
編輯：HTML和Xhtml
最近開始學習前段開發的一些知識，當然少不了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>
以上代碼運行結果如下：
以上代碼參考了網上的代碼，參考的網址為：http://www.html5cn.org/forum.php?mod=viewthread&tid=2471。
總結：這個logo起始繪制起來很簡單，主要是利用了css的圓角。靈活運用可以繪制出更復雜的圖形。
小編推薦
熱門推薦