HTML 百度网页制作 

  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>

 

posted @ 2021-12-17 07:55  芸小宇  阅读(985)  评论(0)    收藏  举报