Task 02 Search Engine Webpage

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:
https://github.com/JasperZhao901/Search-Engine-Webpage
Task 02 Search Engine Webpage

猜你喜欢
