基礎網頁框架
阿新 • • 發佈:2017-08-03
side top left round wid news new hidden pre
HTML部分:
1 <!--網頁頭部--> 2 <div class="header"> 3 <div class="logo"> 4 logo 5 </div> 6 <div class="language"> 7 ENGLISH 8 </div> 9 <div class="nav"> 10 nav11 </div> 12 <div class="banner">banner</div> 13 </div> 14 15 <!--網頁內容--> 16 <div class="content"> 17 <div class="sidebar">sidebar</div> 18 <div class="main"> 19 <div class="newsandhots"> 20 <div class="newsbox"> 21 <div class="news1">news1</div> 22 <div class="news2">news2</div> 23 <div class="news3">news3</div> 24 </div> 25 <div class="hots">hots</div> 26 </div> 27 <div class="links">links</div> 28 </div> 29 </div> 30 31 <!--網頁底部--> 32 <div class="footer">footer</div>
CSS部分:
1 <style type="text/css"> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 .header { 7 width: 970px; 8 height: 253px; 9 margin: 0 auto; 10 } 11 .header .logo { 12 float: left; 13 width: 277px; 14 height: 103px; 15 background-color: #ff0000; 16 } 17 .header .language { 18 float: right; 19 width: 137px; 20 height: 49px; 21 margin-bottom: 8px; 22 background-color: #00ff00; 23 } 24 .header .nav { 25 float: right; 26 margin-bottom: 10px; 27 width: 679px; 28 height: 46px; 29 background-color: #00ff00; 30 } 31 .header .banner { 32 overflow: hidden; 33 width: 970px; 34 height: 150px; 35 background-color: #87ceeb; 36 } 37 .content { 38 width: 970px; 39 height: 435px; 40 margin: 0 auto; 41 margin-top: 20px; 42 } 43 .content .sidebar { 44 float: left; 45 width: 310px; 46 height: 435px; 47 background-color: #ffcc00; 48 } 49 .content .main { 50 float: right; 51 width: 650px; 52 height: 435px; 53 } 54 .content .main .newsandhots { 55 width: 650px; 56 height: 401px; 57 } 58 .content .main .links { 59 width: 650px; 60 height: 24px; 61 background-color: #339900; 62 margin-top: 10px; 63 } 64 .content .main .newsandhots .newsbox { 65 float: left; 66 width: 450px; 67 height: 401px; 68 } 69 .content .main .newsandhots .hots { 70 float: right; 71 width: 190px; 72 height: 400px; 73 background-color: #cc3399; 74 } 75 .content .main .newsandhots .newsbox .news1{ 76 height: 240px; 77 background-color: #3399ff; 78 margin-bottom:10px; 79 } 80 .content .main .newsandhots .newsbox .news2{ 81 height: 110px; 82 background-color: #3399ff; 83 margin-bottom:10px; 84 } 85 .content .main .newsandhots .newsbox .news3{ 86 height: 30px; 87 background-color: #3399ff; 88 } 89 .footer { 90 width: 970px; 91 height: 35px; 92 margin: 0 auto; 93 margin-top: 10px; 94 background-color: #000099; 95 } 96 </style>
基礎網頁框架