HTML5+CSS3实例教程:绘制遨游浏览器Logo

2012-06-03 00:56:37  来源:念在三角湖畔 

网页制作Webjx文章简介:最近开始学习前段开发的一些知识,当然少不了Html5和Css3,作为我的第一课,我参照别人的例子,自己动手,用Css3绘制了一个遨游的Logo。

最近开始学习前段开发的一些知识,当然少不了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的圆角。灵活运用可以绘制出更复杂的图形。

更多