Css3 + HTML5 learning notes 1-drawing the logo of a browser

I recently started to learn some of the development knowledge in the previous section. Of course, HTML5 and css3 are indispensable. As my first lesson, I drew a travel logo using css3 by referring to other people's examples. Record the following:

 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 > 

 

AboveCodeThe running result is as follows:

The above code reference the online code, the Reference URL is: http://www.html5cn.org/forum.php? MoD = viewthread & tid = 2471.

Conclusion: The logo is easy to draw at the beginning, mainly using the CSS rounded corner. Flexible Use allows you to draw more complex images.