百度.html

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title></title>
  6         <style type="text/css">
  7             *{
  8                 margin: 0;
  9                 padding: 0;
 10             }
 11             .top{
 12                 overflow: hidden;
 13             }
 14             .nav{
 15                 list-style: none;
 16                 overflow: hidden;
 17                 float: right;
 18             }
 19             .nav li{
 20                 float: left;
 21                 margin-top: 20px;
 22                 margin-right: 20px;
 23             }
 24             .more{
 25                 background-color: #38f;
 26                 color: #fff;
 27                 
 28             }
 29             .text{
 30                 text-decoration: none;
 31             }
 32             .picture{
 33                 text-align: center;
 34                 margin-top: 100px;
 35             }
 36             .picture img{
 37                 width: 270px;
 38                 height: 129px;
 39             }
 40             .seach{
 41                 font-size: 0;
 42                 text-align: center;
 43             }
 44             .seach input{
 45                 width: 500px;
 46                 height: 40px;
 47                 vertical-align: middle;
 48             }
 49             .seach button{
 50                 width: 100px;
 51                 height: 44px;
 52                 vertical-align: middle;
 53                 font-size: 14px;
 54                 background-color: #3385ff;
 55                 border: none;
 56                 color: #fff;
 57             }
 58             .photo{
 59                 width: 106px;
 60                 height: 106px;
 61                 padding: 5px;
 62                 margin: 0 auto;
 63                 margin-top: 150px;
 64                 border: 1px solid #f3f3f3;
 65             }
 66             p{
 67                 text-align: center;
 68                 margin-top: 10px;
 69             }
 70         </style>
 71     </head>
 72     <body>
 73         <div class="top">
 74             <ul class="nav">
 75                 <li><a href="http://news.baidu.com/">新闻</a></li>
 76                 <li><a href="">hao123</a> </li>
 77                 <li>地图</li>
 78                 <li>视频</li>
 79                 <li>贴吧</li>
 80                 <li>学术</li>
 81                 <li>登录</li>
 82                 <li>设置</li>
 83                 <li class="more"><a href="" class="text">更多产品</a> </li>
 84             </ul>
 85         </div>
 86         <div class="picture">
 87             <img src="./images/bd_logo1.png"/>
 88         </div>
 89         <div class="seach">
 90             哈哈哈哈
 91             <input type="text"/>
 92             <button>百度一下</button>
 93         </div>
 94         <div class="photo">
 95             <img src="./images/zbios_09b6296.png"/>
 96         </div>
 97         <p>下载百度APP</p>
 98         <p>有事搜一搜  没事看一看</p>
 99         
100     </body>
101 </html>
猜你喜欢
