简单百度首页-html代码_百度搜索代码-CSDN博客

本文链接：https://blog.csdn.net/2301_79679684/article/details/144816210
部分代码参考了别人怎么写的，还参考了百度首页部分源码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>百度一下，你就知道</title>
    <link rel="shortcut icon" href="https://www.baidu.com/favicon.ico" type="image/x-icon" />
    <style>
        #d1 {
            position: absolute;
            left: 10px;
        }
        #d1 ul {
            list-style: none;
        }
        #d1 a {
            font-family: "微软雅黑";
            color: black;
            font-size: 13px;
        }
        #d1 li {
            float: left;
            margin-left: 18px;
            text-align: center;
        }
        #d1 input[type="button"] {
            background-color: #3388FF;
            border: none;
            color: white;
        }
        #d1 input[type="button"]:hover {
            cursor: pointer;
        }
        #d2 {
            position: relative;
            text-align: center;
            top: 100px;
        }
        #d2 input[type="text"] {
            width: 541px;
            height: 32px;
            margin-top: 41px;
            font-size: 20px;
            border-width: 1px;
            background: url(img/照相机.png) no-repeat 510px;
        }
        #d2 input[type="submit"] {
            height: 36px;
            width: 100px;
            background-color: #3388FF;
            border-width: 0px;
            font-size: 15px;
            color: white;
            margin-left: -5px;
        }
        #d2 input[type="submit"]:hover {
            cursor: pointer;
        }
        #d3 {
            top: 280px;
            position: relative;
        }
        #d4 {
            position: relative;
            top: 290px;
            text-align: center;
            color: #999999;
        }
        #d4 a {
            font-family: "微软雅黑";
            color: #999999;
            font-size: 4px;
        }
        #d4 ul {
            list-style: none;
        }
        #d4 li {
            float: left;
            margin-left: 15px;
        }
        #a1 {
            margin-bottom: 100px;
        }
        .s {
            font-weight: bold;
        }
        #t:active {
            border-color: #3388FF;
        }
        .main {
            clear: both;
        }
        .main .search_r:hover {
            background-color: #4662d9;
        }
        .main input:hover {
            border-color: #a7aab5;
        }
        .main table {
            margin: 200px 440px;
            width: 670px;
            height: 180px;
            font-size: 15px;
        }
        .main #hhh {
            padding-left: 254px;
            color: #a6a9b4;
        }
        ._new {
            display: inline-block;
            background-color: #ff455b;
            width: 14px;
            height: 19px;
            color: #fff;
            padding: 0 2px;
            border-radius: 5px;
        }
        ._hot {
            display: inline-block;
            background-color: #ff9812;
            width: 14px;
            height: 19px;
            color: #fff;
            padding: 0 2px;
            border-radius: 5px;
        }
        a {
            text-decoration: none;
            padding-left: 12px;
        }
        a:hover {
            color: #4e71f2;
        }
        li {
            list-style: none;
        }
        .footer {
            width: 100%;
            height: 40px;
            position: fixed;
            bottom: 0;
            background-color: #fbfbfb;
            line-height: 40px;
            font-size: 12px;
        }
        .footer_l li a {
            float: left;
            padding-left: 14px;
            color: #9195a3;
        }
        .footer_l li a:hover {
            color: #222;
        }
        .footer_r li a {
            float: right;
            font-size: 16px;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <div id="d1">
        <div align="center">
            <ul>
                <li><a href="http://news.baidu.com/" class="s">新闻</a></li>
                <li><a href="https://www.hao123.com/" class="s">hao123</a></li>
                <li><a href="http://map.baidu.com/" class="s">地图</a></li>
                <li><a href="http://v.baidu.com/" class="s">视频</a></li>
                <li><a href="http://tieba.baidu.com/" class="s">贴吧</a></li>
                <li><a href="http://xueshu.baidu.com/" class="s">学术</a></li>
                <li><a href="https://passport.baidu.com/v2/?login&tpl=mn&u=http%3A%2F%2Fwww.baidu.com%2F&sms=5">登录</a></li>
                <li><a href="http://www.baidu.com/gaoji/preferences.html">设置</a></li>
                <li><input type="button" value="更多产品"></li>
            </ul>
        </div>
    </div>
    <div id="d2">
        <a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=SE_PclogoS_8whnvm25&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs" id="a1">
            <img src="https://www.baidu.com/img/baidu_resultlogo@2.png">
        </a><br />
        <form action="http://www.baidu.com/s">
            <div>
                <input type="text" name="wd">
                <input type="submit" value="百度一下">
            </div>
        </form>
    </div> 

    <!--中间部分开始-->
    <div class="main">
        <table  >
                <tr class="news_type">
                    <td style="padding-left:14px;padding-top:3px;">百度热榜</td>
                    <td style="width: 300px;"><a id="hhh">换一换</a></td>
                </tr>
                <tr class="news_type">
                    <td ><a href=""><span style="color:#fe2d46;">1</span>&nbsp&nbsp充分感受塔中两国间的真挚友谊&nbsp&nbsp<span class="_new">新</span></a></td>
                    <td><a href=""><span style="color:#9b9fac;">4</span>&nbsp&nbsp各地重点工程项目加速推进</a></td>
                </tr>
                <tr class="news_type">
                    <td><a href=""><span style="color:#ff6600">2</span>&nbsp&nbsp美国前总统吉米·卡特逝世</a></td>
                    <td><a href=""><span style="color:#9b9fac;">5</span>&nbsp&nbsp韩国科技事故遇难者DNA已全部采集</a></td>
                </tr>
                <tr class="news_type">
                    <td><a href=""><span style="color:#faa90e;">3</span>&nbsp&nbsp雷军千万年薪挖角95后AI天才少女&nbsp&nbsp<span class="_hot">热</span></a></td>
                    <td><a href=""><span style="color:#9b9fac;">6</span>&nbsp&nbsp70位租客北房东要求10天内搬离</a></td>
                </tr>
    
        </table>
    </div>
    
    </div>
    <!--中间部分结束-->

    <div class="footer">
        <div class="footer_l">
            <ul >
                <li><a href="">设为首页</a></li>
                <li><a href="">关于百度</a></li>
                <li><a href=""> About Baidu</a></li>
                <li><a href="">百度营销</a></li>
                <li><a href="">使用百度前必读</a></li>
                <li><a href="">意见反馈</a></li>
                <li><a href="">帮助中心</a></li>
            </ul>
        </div>
        <div class="footer_r">
            <ul >
                <li><a href="">普通学生</a></li>
                <li><a href="">软件工程</a></li>
                <li><a href="">超厉害的学校</a></li>
            </ul>
        </div>
        <img href="images/erweima">
    
    </div>
</body>
</html>