HTML+CSS自制百度页面

最新推荐文章于 2024-07-02 10:52:52 发布

NJR10byh

最新推荐文章于 2024-07-02 10:52:52 发布

阅读量1.3k

点赞数

文章标签： css html

本文链接：https://blog.csdn.net/NJR10byh/article/details/106596703

版权

短时间完成一个百度页面（仅仅是页面，不能搜索！！！）

页面效果:

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>百度一下, 你就知道</title>
  <link rel="shortcut icon" href="baidu.ico" />
  <link rel="stylesheet" href="Baidu.css" type="text/css" />
  <link rel="stylesheet" href="./css/font-awesome.css" type="text/css" />
  <link href="http://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet" type="text/css">
  <script src="vue.js"></script>
  <script src="https://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
  <script src="Baidu.js"></script>
</head>

<body>
  <div class="TOP">
    <a href="#" class="Weather-Location">西安: </a>
    <i class="fa fa-sun-o" aria-hidden="true"></i>
    <a href="#" class="Weather-Temp">18℃</a>
    <a href="#" class="Weather-Air">轻度</a>
    <a href="#" class="Weather-PM">105</a>
    <a href="#" class="Weather-1">|</a>
    <a href="#" class="Skin">换肤</a>
    <a href="#" class="Info">消息</a>
    <a href="#" class="Card">显示卡片</a>
    <a href="#" class="Setting">设置</a>
    <a href="#" class="Feizhai">包宇豪</a>
    <a class="Xueshu" href="http://xueshu.baidu.com" target="_blank">学术</a>
    <a class="Tieba" href="http://tieba.baidu.com" target="_blank">贴吧</a>
    <a class="Shipin" href="http://v.baidu.com" target="_blank">视频</a>
    <a class="Map" href="http://map.baidu.com" target="_blank">地图</a>
    <a class="Hao123" href="https://www.hao123.com" target="_blank">hao123</a>
    <a class="News" href="http://news.baidu.com" target="_blank">新闻</a>
    <a class="COVID" href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_pc_1"
      target="_blank">抗击肺炎</a>
  </div>
  <div>
    <a href="#" class="More">更多产品</a>
  </div>
  <div class="Baidu">
    <a href="https://baidu.com">
      <img src="baidu.png" class="Baidu-Logo" id="Baidu-Logo">
    </a>
  </div>
  <div class="Search">
    <div class="Left">
      <input type="text" class="text" style="font-size: 16px; padding-left: 8px;" placeholder="NJR10byh" id="txt" />
    </div>
    <div class="Right">
      <a href="#" class="Right-1" id="search">百度一下</a>
    </div>
  </div>

  <footer>
    <a href="#" class="a">设为首页</a>
    <a href="#" class="b">关于百度</a>
    <a href="#" class="c">About Baidu</a>
    <a href="#" class="b">百度推广</a>
    <a href="#" class="b">使用百度前必读</a>
    <a href="#" class="b">意见反馈</a>
    <a href="#" class="b">帮助中心</a>
    <i class="fa fa-angle-up" class="d" aria-hidden="true" style="margin-left: 88px;"></i>
    <a href="#" class="d">显示卡片</a>
    <span class="e">©2020 Baidu</span>
    <span class="f">(京)-经营性-2017-0020</span>
    <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank"
      class="g">京公网安备11000002000001号</a>
    <span class="h">京ICP证030173号</span>
  </footer>

</body>
</html>

CSS部分：

* {
  margin: 0;
  padding: 0;
}

body {
  height: 750px;
}

.TOP {
  /*顶部div*/
  width: 93%;
  height: 20px;
  float: left;
  padding: 6px 1px;
  border-bottom: 1px solid rgb(235, 233, 233);
}

.TOP i {
  color: #999;
  margin-left: 4px;
}

.TOP .Weather-Location {
  font-size: 12px;
  color: #555;
  margin-left: 14px;
  position: relative;
  text-decoration: none;
}

.TOP .Weather-Temp {
  font-size: 12px;
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 5px;
  text-decoration: none;
}

.TOP .Weather-Air {
  font-size: 12px;
  font-weight: bold;
  margin-left: 7px;
  color: rgb(176, 221, 85);
  text-decoration: none;
}

.TOP .Weather-PM {
  font-size: 12px;
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 3px;
  text-decoration: none;
}

.TOP .Weather-1 {
  font-size: 12px;
  color: #555;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 3px;
  text-decoration: none;
}

.TOP .Skin {
  font-size: 12px;
  color: #555;
  margin-left: 7px;
}

.TOP .Info {
  font-size: 12px;
  color: #555;
  margin-left: 14px;
}

.TOP .Card {
  font-size: 12px;
  color: #555;
  margin-left: 14px;
}

.TOP .Setting {
  font-size: 13px;
  color: #555;
  margin-right: 16px;
  float: right;
}

.TOP .Feizhai {
  font-size: 13px;
  color: #555;
  margin-right: 19px;
  float: right;
}

.TOP .Xueshu {
  font-size: 13px;
  color: #555;
  margin-right: 21px;
  float: right;
  font-weight: bold;
}

.TOP .Tieba {
  font-size: 13px;
  color: #555;
  margin-right: 19px;
  float: right;
  font-weight: bold;
}

.TOP .Shipin {
  font-size: 13px;
  color: #555;
  margin-right: 19px;
  float: right;
  font-weight: bold;
}

.TOP .Map {
  font-size: 13px;
  color: #555;
  margin-right: 19px;
  float: right;
  font-weight: bold;
}

.TOP .Hao123 {
  font-size: 13px;
  color: #555;
  margin-top: 2px;
  margin-right: 19px;
  float: right;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.TOP .News {
  font-size: 13px;
  color: #555;
  margin-right: 19px;
  float: right;
  font-weight: bold;
}

.TOP .COVID {
  font-size: 13px;
  color: red;
  margin-right: 19px;
  float: right;
  font-weight: bold;
}

.More {
  background-color: #398bfb;
  color: white;
  height: 26.8px;
  width: 6.8%;
  float: right;
  font-size: 13px;
  text-decoration: none;
  padding-top: 6.2px;
  text-align: center;

}

.Baidu {
  margin: 0 auto;
  width: 209px;
  height: 50px;
}

.Baidu-Logo {
  margin-top: 120px;
  width: 209px;
  height: 68px;
}

.Search {
  margin: 203.5px auto;
  width: 640px;
  height: 38px;
  display: none;
}

.Search .Left {
  width: 82.6%;
  height: 100%;
  float: left;
  border-radius: 10px 0px 0px 10px;
}

.Search .Left .text {
  width: 100%;
  height: 100%;
  float: left;
  font-size: 13px;
  border: 0;
  background: url(Camera.png) no-repeat;
  background-position: 495px;
  border-bottom: 1px solid rgb(209, 204, 204);
  border-top: 1px solid rgb(209, 204, 204);
  border-left: 1px solid rgb(209, 204, 204);
}

.Search .Right {
  width: 16.3%;
  height: 83%;
  float: right;
  background-color: #398bfb;
  padding-top: 8px;
  text-align: center;
  border-radius: 0px 10px 10px 0px;
  transition: 0.5s;
}

.Search .Right:hover {
  background-color: blue;
  transition: 0.5s;
}

.Search .Right .Right-1 {
  color: white;
  text-decoration: none;
}

footer {
  width: 100%;
  clear: both;
  background-color: #fafafa;
  color: #bbb;
  position: fixed;
  bottom: 0;
  height: 30px;
  padding-top: 10px;
}

footer a {
  text-decoration: none;
}

.a {
  font-size: 12px;
  margin-left: 30px;
  color: #999;
}

.a:hover {
  color: black;
}

.b {
  font-size: 12px;
  margin-left: 16px;
  color: #999;
}

.b:hover {
  color: black;
}

.c {
  font-size: 12px;
  margin-left: 16px;
  color: #999;
  font-family: Arial, Helvcetica, sans-serif;
}

.c:hover {
  color: black;
}

.d {
  font-size: 12px;
  margin-left: 5px;
  color: #999;
}

.d:hover {
  color: black;
}

.e {
  font-size: 12px;
  margin-left: 16px;
  color: #bbb;
  font-family: Arial, Helvetica, sans-serif;
}

.f {
  font-size: 12px;
  margin-left: 18px;
  color: #bbb;
  font-family: Arial, Helvetica, sans-serif;
}

.g {
  font-size: 12px;
  margin-left: 17px;
  color: #bbb;
  font-family: Arial, Helvetica, sans-serif;
}

.g:hover {
  color: black;
}

.h {
  font-size: 12px;
  margin-left: 16px;
  color: #bbb;
  font-family: Arial, Helvetica, sans-serif;
}

JS部分：

少量的JS用来增加一些行为 (单纯的为了让我的百度页面独特一些)

window.onload = function () {
    alert("欢迎“NJR10byh版”百度");
    $(function () {
        $("img").addClass('animated swing');
        $(".Search").fadeToggle(1500);
    });
    var city = document.getElementById("txt");
    var btn = document.getElementById("search");
    btn.onclick = function () {
        if (city.value) {
            alert(txt.value);
        } else {
            alert("请输入要查询的内容！");
        }
    }
}

NJR10byh

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
2
评论
HTML+CSS自制百度页面

短时间完成一个百度页面（仅仅是页面，不能搜索！！！）HTML部分：<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title>百度一下, 你就知道</title> <link rel="shortcut icon" href="baidu.ico" /> <link rel="stylesheet" href="Baidu.css" t
复制链接

扫一扫