html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 百度首页 </title>
- <style>
- .top{
- text-align: right;
- }
- a{
- color: #000;
- padding: 10px;
- }
- .span1{
- background-color: blue;
- color: #fff;
- }
- .cTop{
- /*border: 1px solid #000;*/
- text-align: center;
- }
- .cBottom{
- /*border: 1px solid #000;*/
- text-align: center;
- }
- .logo{
- width: 270px;
- height:129px;
- }
- .inputclass{
- width: 570px;
- height: 30px;
- }
- .baiduyixiaclass
- {
- width: 100px;
- height: 30px;
- border: 1px solid #ddd;
- background-color: blue;
- color: white;
- font-size: 18px;
- }
- .center{
- margin: 50px;
- }
- .bottom{
- /*border: 1px solid #000;*/
- margin-top: 430px;
- }
- .img1{
- width: 150px;
- }
- .img2{
- width: 150px;
- }
- .img3{
- width: 300px;
- }
- table{
- margin: 0 auto;
- }
- </style>
- </head>
- <body>
- <div class="top">
- <a href="###"> 糯米 </a>
- <a href="###"> 新闻 </a>
- <a href="###">hao123</a>
- <a href="###"> 地图 </a>
- <a href="###"> 视频 </a>
- <a href="###"> 贴吧 </a>
- <a href="###"> 登录 </a>
- <a href="###"> 设置 </a>
- <span class="span1"> 更多产品 </span>
- </div>
- <br><br><br>
- <div class="center">
- <div class="cTop">
- <img class="logo" src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=3c901ce2a034f21ebe49e3a8b03573a6" alt="">
- </div>
- <div class="cBottom">
- <input class="inputclass" type="text"><input class="baiduyixiaclass" type="submit" value="百度一下">
- </div>
- </div>
- <div class="bottom">
- <table>
- <tr>
- <td><img class="img1" src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=ecb0eee7e290fbf0ae9a3bd2aaf6fb6b" alt=""></td>
- <td><img class="img2" src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=42d6d087609a179db68407a45adbf365
![html 编写静态百度首页](attimg://article/content/picture/201610/17/213928tnlldncunlfftwtz.png)
![html 编写静态百度首页](attimg://article/content/picture/201610/17/213928tnlldncunlfftwtz.png)"alt=""></td>
- <td><img class="img3" src="http://www.w3cfuns.com/misc.php?mod=attach&genre=editor&aid=f7bf1b69b2fefb944f0d192391b6e676" alt=""></td>
- </tr>
- </table>
- </div>
- </body>
- </html>
来源: http://www.qdfuns.com/article/33609/7b9df8010eed6f5f455b983bab9b2021.html