CSS3+HTML5学习笔记一-绘制遨游浏览器Logo-CSDN博客

最近开始学习前段开发的一些知识，当然少不了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>