CSS3+HTML5学习笔记一-绘制遨游浏览器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>

 

以上代码运行结果如下:

  

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

以上代码参考了网上的代码,参考的网址为:http://www.html5cn.org/forum.php?mod=viewthread&tid=2471

总结:这个logo起始绘制起来很简单,主要是利用了css的圆角。灵活运用可以绘制出更复杂的图形。

你可能感兴趣的:(html5)