简易百度首页

最新推荐文章于 2024-08-14 13:47:12 发布

山楂不甜

最新推荐文章于 2024-08-14 13:47:12 发布

阅读量183

点赞数

分类专栏： css html 文章标签：百度 css html5 前端

原文链接：https://blog.youkuaiyun.com/LIUCHUANQI12345/article/details/109358215

版权

css 同时被 2 个专栏收录

31 篇文章

订阅专栏

html

17 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>32-百度首页</title>
  <style>
      body{
          font-size: 14px;
          color: #666666;
          font-family: "宋体";
      }
      div{
          text-align: center;
      }
    .header{
      height: 200px;
    }
    .content{
      height: 250px;
      /*background: pink;*/
    }
    .footer{
      height: 200px;
      /*background: green;*/
    }
    .logo{
        height: 150px;
    }
    input[type=text]{
        width: 400px;
        height: 30px;
    }
    input[type=submit]{
        width: 100px;
        height: 30px;
    }
    .search{
        /*background-color: #ffca77;*/
        height: 60px;
    }
    .bk{
        /*background-color: #4245ff;*/
        height: 120px;
    }
    .aq{
        height: 40px;
    }
    .tg{
        height: 40px;
    }
  </style>
</head>
<body>
<div class="header">
<!--把行内块级放入块级元素当中，它就会独占一行-->
    <div class="logo">
        <img src="images/bdlogo.gif">
    </div>
    <div class="nav">
        <a href="#">新  闻</a>
        <strong>网  页</strong>
        <a href="#">贴  吧</a>
        <a href="#">知  道</a>
        <a href="#">音  乐</a>
        <a href="#">图  片</a>
        <a href="#">视  频</a>
        <a href="#">地  图</a>
    </div>
</div>
<div class="content">
    <div class="search">
        <input type="text">
        <input type="submit" value="百度一下">
    </div>
    <div class="bk">
        <a href="#">百科</a>
        <a href="#">文库</a>
        <a href="#">hao123</a>
        |
        <a href="#">更多>></a>
    </div>
    <div class="">
        <img src="images/ic.jpg">
        <a href="#">百度地图带你吃喝玩乐，全心全意为人民服务</a>
    </div>
</div>
<div class="footer">
    <div class="aq">
        <a href="#">把百度设为主页</a>
        &nbsp;
        <a href="#">安装百度卫士</a>
    </div>
    <div class="tg">
        <a href="#">加入百度推广</a>
        |
        <a href="#">搜索风云榜</a>
        |
        <a href="#">关于百度</a>
        |
        <a href="#">About Baidu</a>
    </div>
    <div>
       ©2016 Baidu 使用百度前必读 京ICP证666号
    </div>
</div>
</body>
</html>