当前位置：首页 > article >正文

HTML前端页面设计静态网站-仿百度

article 2024/11/5 18:58:18

浅浅分享一下前端作业，大佬轻喷~

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>百度（伪）</title>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .top-bar {
      display: flex;
      justify-content: space-between;
      padding: 10px;
    }

    .center-content {
      text-align: center;
      margin-top: 20px;
    }

    input[type="text"] {
      width: 500px;
      height: 30px;
      margin-top: 10px;
    }

    button {
      height: 35px;
    }

    .bottom-links {
      text-align: center;
      margin-top: 20px;
    }

    .footer-info {
      text-align: center;
      margin-top: 10px;
      font-size: 12px;
    }

    .logo-img {
      display: block;
      margin: 0 auto;
    }

    .right-links {
      text-align: right;
    }
  </style>
</head>

<body>
  <div class="top-bar">
    <div></div>
    <div class="right-links">
      <a href="#">新闻</a>
      <a href="#">hao123</a>
      <a href="#">地图</a>
      <a href="#">视频</a>
      <a href="#">贴吧</a>
      <a href="#">学术</a>
      <a href="#">登录</a>
      <a href="#">设置</a>
    </div>
  </div>
  <div class="center-content">
    <img src="百度logo.png" alt="Baidu" class="logo-img">
    <input type="text">
    <button>百度一下</button>
  </div>
  <div class="bottom-links">
    <a href="#">把百度作为首页</a>
    <a href="#">关于百度</a>
    <a href="#">百度推广</a>
  </div>
  <div class="footer-info">
    2019Baidu 使用百度前必读意反馈****证*********号 KC 制作 h 号
  </div>
</body>

</html>