類似百度首頁搜索靜態圖
阿新 • • 發佈：2017-07-21
link org nav top vlog arch text art ack
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title></title> 6 <link href="css/demo.css" rel="stylesheet" /> 7 </head> 8 <body> 9 <div id="header">10 <div id="art_navtext"> 11 <ul> 12 <li><a href="#">39健康網首頁</a></li> 13 <li><a href="#">藥品通</a></li> 14 <li><a href="#">疾病百科</a></li> 15 <li><a href="#">就醫助手</a></li>16 </ul> 17 </div> 18 <div id="navlogin"> 19 <div id="login"><a href="#">登錄</a></div> 20 <div id="reg"><a href="#">註冊</a></div> 21 </div> 22 </div> 23 <div id="mainbody">24 <div id="logo"></div> 25 <div id="searchpart"> 26 <div id="keyword"><input type="text"/></div> 27 <div id="btn"><input type="button"/></div> 28 </div> 29 <div id="keys"> 30 <span>熱門搜索：</span> 31 <ul> 32 <li><a href="#">子宮腫瘤</a></li> 33 <li><a href="#">乳腺癌</a></li> 34 <li><a href="#">糖尿病</a></li> 35 <li><a href="#">艾滋病</a></li> 36 <li><a href="#">宮頸糜爛</a></li> 37 <li><a href="#">腹瀉</a></li> 38 </ul> 39 </div> 40 </div> 41 <div class="footer"> 42 <p> 43 <a href="#" target="_self" name="homepage" title="">將39so設為首頁</a> 44 | 45 <a href="#" title="">關註39健康微信號</a> 46 </p> 47 <p> 48 <a href="#">39健康網</a> 49 -中國健康門戶網站 Copyright ?2000-2013 50 <a href="#">未經授權請勿轉載</a> 51 </p> 52 </div> 53 </body> 54 </html>
1 body { 2 font-size:14px; 3 font-family:"微軟雅黑"; 4 padding:0px; 5 margin:0px; 6 } 7 a{ 8 text-decoration:none; 9 } 10 ul{ 11 list-style-type:none; 12 padding:0px; 13 margin:0px; 14 } 15 #header{ 16 height:36px; 17 line-height:36px; 18 background-color:#0096a5; 19 } 20 #art_navtext li{ 21 float:left; 22 background-image:url(../image/bg_1.png); 23 background-repeat:no-repeat; 24 background-position:0px 12px; 25 } 26 #art_navtext li a{ 27 color:#fff; 28 display:block; 29 padding-left:7px; 30 padding-right:7px; 31 } 32 #art_navtext li a:hover{ 33 background-color:#008c9b; 34 } 35 #navlogin{ 36 float:right; 37 } 38 #login,#reg{ 39 float:left; 40 width:35px; 41 background-position:0px 10px; 42 padding-left:15px; 43 } 44 #navlogin a{ 45 color:#fff; 46 } 47 #login{ 48 background-image:url(../image/bg_2.png); 49 background-repeat:no-repeat; 50 } 51 #reg{ 52 background-image:url(../image/bg_3.png); 53 background-repeat:no-repeat; 54 } 55 #mainbody{ 56 width:696px; 57 margin:0px auto; 58 margin-top:130px; 59 } 60 #logo{ 61 background-image:url(../image/bg_4.png); 62 background-repeat:no-repeat; 63 width:331px; 64 height:68px; 65 margin:0px auto; 66 } 67 #searchpart{ 68 height:50px; 69 margin-top:50px; 70 padding-left:12px; 71 margin-bottom:10px; 72 } 73 #keyword,#btn{ 74 float:left; 75 } 76 #keyword input{ 77 width:540px; 78 height:36px; 79 } 80 #btn input{ 81 background-image:url(../image/bg_5.png); 82 width:129px; 83 height:42px; 84 border-width:0px; 85 } 86 #keys{ 87 height:26px; 88 color:#666; 89 font-size:15px; 90 margin-left:10px; 91 } 92 #keys span{ 93 float:left; 94 font-weight:bold; 95 line-height:26px; 96 } 97 #keys li{ 98 float:left; 99 line-height:26px; 100 } 101 #keys li a{ 102 margin-right:20px; 103 color:#666; 104 } 105 .footer{ 106 width:100%; 107 height:90px; 108 padding-top:10px; 109 border-top:1px solid #E9E9E9; 110 background:#fff; 111 position:absolute; 112 left:0; 113 bottom:0; 114 } 115 .footer p{ 116 width:100%; 117 text-align:center; 118 line-height:16px; 119 color:#666; 120 } 121 .footer p a{ 122 color:#666; 123 }
類似百度首頁搜索靜態圖