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

2024-09-05 07:18:43

字体：大中小

来源：转载

供稿：网友

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>以上代码运行结果如下：