1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <style type="text/css"> 7 .part-one{ 8 width: 500px; 9 height: 60px; 10 font-size: 14px; 11 position: relative; 12 top:2px; 13 } 14 .part-one span{ 15 margin-left:31px; 16 } 17 .part-one span:hover{ 18 color:royalblue ; 19 cursor: pointer; 20 } 21 a{ 22 text-decoration: none; 23 color:black; 24 } 25 .part-two{ 26 float:right; 27 width: 500px; 28 height: 60px; 29 font-size: 14px; 30 position: relative; 31 top:-57px; 32 left:387px; 33 34 } 35 .part-two span{ 36 margin-right: 32px; 37 } 38 .part-two span:hover{ 39 cursor: pointer; 40 color: royalblue; 41 } 42 .part-three{ 43 width: 654px; 44 margin: 0 auto; 45 position: relative; 46 left: 177px; 47 } 48 .part-five{ 49 width: 600px; 50 height: 60px; 51 margin: 0 auto; 52 53 } 54 .part-four{ 55 width: 408px; 56 height: 34px; 57 font-size: 16px; 58 border-radius: 10px 0 0 10px; 59 border: 2px solid #c4c7ce; 60 position: relative; 61 top:10px; 62 63 } 64 .part-six{ 65 width: 108px; 66 height: 40px; 67 background-color: #4e6ef2; 68 position:relative; 69 left:-78px; 70 top:10px; 71 border-radius: 0px 10px 10px 0; 72 color:#fff; 73 border:none; 74 float:right; 75 } 76 .part-seven{ 77 width: 654px; 78 height: 24px; 79 margin: 0 auto; 80 } 81 .part-eight{ 82 float:right; 83 position: relative; 84 left:-110px; 85 top:-20px; 86 } 87 .part-nine{ 88 height: 110px; 89 width: 800px; 90 margin: 0 auto; 91 } 92 ul li{ 93 list-style-type: none; 94 } 95 .part-nine li{ 96 float:left; 97 margin-left: 25px; 98 margin-top: 30px; 99 } 100 .part-nine li:hover{ 101 cursor: pointer; 102 text-decoration: underline; 103 } 104 .part-nine span { 105 color: #0000FF; 106 } 107 </style> 108 </head> 109 <body> 110 <div> 111 <div class="part-one"> 112 <a href="http://news.baidu.com" target="_blank"><span>新闻</span></a> 113 <a href="http://www.hao123.com" target="_blank"><span>hao123</span></a> 114 <a href="http://map.baidu.com" target="_blank"><span>地图</span></a> 115 <a href="http://live.baidu.com" target="_blank"><span>直播</span></a> 116 <a href="http://haokan.baidu.com" target="_blank"><span>视频</span></a> 117 <a href="http://tieba.baidu.com" target="_blank"><span>贴吧</span></a> 118 <a href="http://xueshu.baidu.com" target="_blank"><span>学术</span></a> 119 </div> 120 <div class="part-two"> 121 <span>设置</span> 122 <span>登录</span> 123 </div> 124 </div> 125 <div> 126 <div class="part-three"> 127 <a href="https://www.baidu.com/s?wd=%E7%99%BE%E5%BA%A6%E7%83%AD%E6%90%9C&sa=ire_dl_gh_logo_texing&rsv_dl=igh_logo_pcs" target="_blank"><img src="../CSS/baidu.png"></a> 128 </div> 129 </div> 130 <div> 131 <form class="part-five"> 132 <input class="part-four" type="text"> 133 <input class="part-six" type="submit" value="百度一下"/> 134 </form> 135 </div> 136 <div class="part-seven"> 137 <div> 138 <span>百度热搜</span> 139 </div> 140 <div class="part-eight"> 141 <strong>换一换</strong> 142 </div> 143 </div> 144 <div class="part-nine"> 145 <ul> 146 <li><span>1:</span>十九届六中全会决议中的十个明确</li> 147 <li>2:十九届六中全会决议中的十个明确</li> 148 <li>3:十九届六中全会决议中的十个明确</li> 149 <li>4:十九届六中全会决议中的十个明确</li> 150 <li>5:十九届六中全会决议中的十个明确</li> 151 <li>6:十九届六中全会决议中的十个明确</li> 152 </ul> 153 </div> 154 </body> 155 </html>