仿新版百度首页，99%还原真实百度首页。

来源：互联网发布：淘宝女式中老年运动服编辑：程序博客网时间：2024/05/11 02:29

老规矩，首先上效果图

效果还可以吧，

接下来我们要做的第一步就是编写百度首页的HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <title>百度一下，你就知道</title>    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />    <link rel="stylesheet" type="text/css" href="css/baidu.css">    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>    <script type="text/javascript" src="js/baidu.js"></script></head><body>    <div class="top">        <a href="http://news.baidu.com/"><span>新闻</span></a>        <a href="http://www.hao123.com/"><span>hao123</span></a>        <a href="http://map.baidu.com/"><span>地图</span></a>        <a href="http://v.baidu.com/i"><span>视频</span></a>        <a href="http://tieba.baidu.com/"><span>贴吧</span></a>        <a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F">登录</a>        <a href="#" class="below">设置</a>        <button class="more">更多产品</button>        <div class="menu">            <div class="inner">                <span class="memo">搜索设置</span>                <span class="memo">高级搜索</span>                <span class="memo">关闭预测</span>                <span class="memo">搜索历史</span>            </div>        </div>    </div>    <div class="main">        <div class="midden">            <img src="img/logo.png" alt="百度LOGO">        </div>        <div class="count">            <input type="text" id="text" onFocus="style=" border: #3385FF"" onBlur="" onkeydown="keydown()" />            <input type="submit" class="btn" value="百度一下" onclick="message()" />        </div>    </div>    <div class="footing">        <div class="about">            <a href="https://www.baidu.com/cache/sethelp/help.html">把百度设为主页</a>             <a href="http://home.baidu.com">关于百度</a>             <a href="http://ir.baidu.com">About Baidu</a>        </div>        <div class="info">            <span class="copyright">&copy;2015 Baidu</span>            <a href="http://www.baidu.com/duty/" class="copyright">使用百度必读</a>            <a href="http://jianyi.baidu.com/" class="copyright">意见反馈</a>            <span class="copyright">鲁ICP证666666号</span>            <img src="img/img1.png" class="img1" alt="下方小img">        </div>    </div></body></html>

是不是感觉代码量有点少，

在夸你非常聪明的同时我想说：

我们毕竟没有100%还原百度首页，效果上也有所差别。

是不是你已经复制过去查看效果了，结果一看什么也不是。。。。

不要急嘛，让人家先去洗个澡收拾一下嘛，

一。。。。。。这。。。吐舌头

不要想歪了，码这些代码有点热而已，仅此而已

把手拿上来放到键盘上，来看一下CCS代码吧：

body {    margin: 0;    padding: 0;}.top {    margin-top: 20px;    text-align: right;}.top a {    color: #333;    font-size: 13px;    margin-right: 10px;}.top a span {    font-weight: bold;}/*.top a:nth-child(1) {    font-weight: bold;}.top a:nth-child(2) {    font-weight: bold;}.top a:nth-child(3) {    font-weight: bold;}.top a:nth-child(4) {    font-weight: bold;}.top a:nth-child(5) {    font-weight: bold;}*/.top a:hover {    color: #0909F7;}.menu {    display: none;    background-color: red;    margin-left: 90.5%;    margin-top: .5%;    font-size: 15px;    position: relative;    float: right;    left: -66px;    top: -7px;    width: 80px;    height: 115px;    background-image: url(img/memu.png);}.inner {    position: relative;    left: -15px;    top: 15px;}.more {    height: 30px;    width: 75px;    background-color: #3385FF;    font-size: 12px;    color: #FFF;    border: solid;}.midden {    margin-top: 7%;    text-align: center;}.midden img {    width: 270px;    height: 129px;}.count {    margin-top: 20px;    text-align: center;}#text {    width: 540px;    height: 30px;    font-size: 16px;}.btn {    height: 44px;    width: 100px;    background-color: #3385FF;    font-size: 15px;    color: #FFF;    border: solid;    margin-left: -10px;    border-style: none\9;    height: 36px\9;}.btn:hover {    cursor: pointer;}.footing {    text-align: center;    margin-top: 20%;}.about a {    color: #0909F7;    font-size: 13px;}.info {    margin-top: 10px;}.copyright {    color: #575151;    font-size: 12px;    font-family: "Î¢ÈíÑÅºÚ";}.img1 {    margin-left: -6px;    margin-bottom: -4px;}

到这里基本大功告成了，

我们再来添加一个文本框焦点的获取和简单的搜索功能。

window.onload = function() {    document.getElementById('text').focus();}function keydown(){if(event.keyCode==13){document.getElementById('btn').click();return false;}}function message() {    // $("#text").val();    // alert($("#text").val());    location.href = "http://www.baidu.com/s?wd=" + $("#text").val() + "&ie=UTF-8";}

好了到这里我们的百度首页已经完成了，

是不是有的同学还久久不能平复内心的鸡动。

1 0