Outcome:
Code:
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 *{margin: 0; padding: 0; list-style: none;} 8 .topNode{ 9 height: 60px; 10 } 11 .topNode ul{ 12 float: right; height: 100%; line-height: 60px; 13 } 14 .topNode ul li{ 15 float: left; 16 margin: 0 10px; 17 } 18 .topNode ul li a{ 19 font-size: 12px; color: #0f0e0f; 20 } 21 .topNode ul li a:hover{ 22 color: #071ac8; 23 } 24 .topNode .topMore{ 25 width: 60px; height: 24px; text-align: center; line-height: 24px; 26 font-size: 13px; color: white; background: #1076ff; float: right; 27 margin-left: 14px; margin-top: 18px; margin-right: 12px; 28 } 29 .centerNode{ 30 width: 640px; height: 168px; 31 margin: 65px auto 0; 32 text-align: center; 33 } 34 .centerNode .searchNode{ 35 width: 100%; height: 36px; 36 margin-top: 16px; 37 } 38 .centerNode .searchNode .leftNode{ 39 width: 539px; height: 34px; 40 border: 1px solid #3286ff; 41 border-right: none; float: left; 42 } 43 .centerNode .searchNode .leftNode input{ 44 float: left;border: none;height: 100%;width: 460px; 45 outline: none;text-indent: 10px; 46 } 47 .centerNode .searchNode .leftNode .audioNode{ 48 float: left; width: 38px; height: 100%; 49 text-align: center; margin-top: 7px; 50 } 51 .centerNode .searchNode .leftNode .lineNode{ 52 height: 14px; width: 1px; background: #e9e9e9; 53 float: left; margin-top: 10px; 54 } 55 .centerNode .searchNode .leftNode .cameraNode{ 56 width: 40px; 57 } 58 .centerNode .searchNode .rightNode{ 59 width: 100px; height: 100%; float: left; 60 background: #3286ff; text-align: center; 61 line-height: 36px; color: white; 62 cursor: pointer; font-size: 15px; 63 } 64 65 </style> 66 </head> 67 68 <body> 69 <div class="topNode"> 70 <div class="topMore">More</div> 71 <ul> 72 <li><a href="#"><b>News</b></a></li> 73 <li><a href="#"><b>Trend</b></a></li> 74 <li><a href="#"><b>Map</b></a></li> 75 <li><a href="#"><b>Video</b></a></li> 76 <li><a href="#"><b>Reddit</b></a></li> 77 <li><a href="#"><b>Scholar</b></a></li> 78 <li><a href="#"><b>Sign In</b></a></li> 79 <li><a href="#"><b>Settings</b></a></li> 80 </ul> 81 </div> 82 <div class="centerNode"> 83 <a href="#"><img src="image/logo.gif"></a> 84 <div class="searchNode"> 85 <div class="leftNode"> 86 <input name=""> 87 <div class="audioNode"> 88 <a href="#"><img src="image/y_1.gif"></a> 89 </div> 90 <div class="lineNode"></div> 91 <div class="audioNode cameraNode"> 92 <a href="#"><img src="image/y_2.gif"></a> 93 </div> 94 </div> 95 <div class="rightNode">Search it</div> 96 </div> 97 </div> 98 99 </body> 100 </html>
Source: