百度首页完整版

于 2023-05-04 22:13:30 发布
阅读量146 收藏
点赞数 1
分类专栏： html 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Wqy0401113/article/details/130496458
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百度一下，你就知道！</title>
    <style>
        header {
            width:100%;
            height: 100%;
            font-size: 12px;
            font-family: Arial,sans-serif;
        }
        a {
            color: black;
            text-decoration: none;
        }
        a:hover {
            color:blue;
        }
        .headerLeft {
            position: absolute;
            height: 60px;
            padding-left: 24px;
            line-height: 30px;
            top: 0;
            z-index: 100;
        }
        .a {
            margin-right: 24px;
            margin-top: 19px;
        }
        .headerRight {
            right: 0;
            top: 0;
            height: 60px;
            line-height: 60px;
            padding-left: 200px;
            position: absolute;
            z-index: 100;
        }
        .setup {
            display: inline-block;
            position: relative;
            margin-right: 24px;
        }
        .login {
            background-color: #4e6ef2;
            color: aliceblue;
            font-family: inherit;
            font-weight: 400;
            border-radius: 6px;
            border: 1px solid #4e6ef2;
        }
        .footer {
            position: absolute;
            width: 100%;
            height: 30px;
            font-size: 12px;
            bottom: 0;
            line-height: 30px;
            margin: 0 17px;
            background-color: #fff;
        }
       .footer a {
            color: darkgray;
            padding: 0 5px;
       }
       .footer a:hover {
            color: #222;
       }
        .baidu {
            cursor: pointer;
            background-color: #4e6ef2;
            border-radius: 0 10px 10px 0;
            font-size: 17px;
            color: #fff;
            box-shadow: none;
            font-weight: 400;
            border: none;
            outline: 0;
        }
        .d {
            font-size: 16px;
            margin: 0;
            vertical-align: top;
            outline: 0;
            box-shadow: none;
            border-radius: 10px 0 0 10px;
            border: 2px solid #c4c7ce;
            background: #fff;
            color: #222;
            overflow: hidden;
            box-sizing: content-box;
        }
        input:hover {
            color: #fff;
        }
        .headerRight #setup-list {
            color: #222;
            position: relative;
            margin-right: 35px;
            display: inline-block;
            font-size: 14px;
        }
        .headerRight .setup {
            display: inline-block;
            vertical-align: top;
            cursor: pointer;
        } 
        .headerRight #list {
            display: none;
            position: absolute;
            top: 28px;
            left: -14px;
            width: 85px;
            height: 165px;
            line-height: 20px;
            text-align: center;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,0.15);
            border-radius: 6px;
            margin-top: 15px;
            float: right;
        }
        .headerRight #list li {
            margin-top: 10px;
            padding-left: 0;
        }
        #setup-list:hover #list {
            display: block;
        }
        li {
            list-style: none;
        }
        ul {
            padding-left: 0;
       }
        img {
            overflow: clip;
            border: 0;
            max-height: 310px;
            text-align: center;
        }
        .headerbottom {
            height: 40%;
            position: relative;
            min-height: 314px;
            max-height: 510px;
            width: 1000px;
            margin: 0  auto;
            text-align: center;
            margin-top: 100px;
        }
        .no-img {
            position: relative;
            width: 654px;
            height: 100%;
            margin: 0 auto;
            text-align: left;
        }    
        .middle {
            height: 100%;
        }
        .search {
            bottom: 0;
        }
        .down {
            display: none;
            position: absolute;
            top: 28px;
            left: -14px;
            width: 85px;
            height: 165px;
            line-height: 20px;
            text-align: center;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,0.15);
            border-radius: 6px;
            margin-top: 15px;
            float: right;
        }
        
        #hot {
            display: flex;
            text-align: left;
            margin-left: 200px;
            width: 100%;
            height: 100px;
        }
        .hot-2 {
            margin-left: 50px;
            margin-top: 0;
        }
        .hot-1 {
            margin-top: 0;
        }
        .match-1 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #fe2d46;
        }
        .match-2 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #f60;
        }
        .match-3 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #faa90e;
        }
        .match-3 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #faa90e;
        }
        .match-4 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #9195a3;
        }
        .match-5 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #9195a3;
        }
        .match-6 {
            font-size: 18px;
            width: 22px;
            height: 36px;
            line-height: 36px;
            background-size: 100% 100%;
            text-align: left;
            margin-right: 4px;
            position: relative;
            top: 1px;
            color: #9195a3;
        }
        .hot-zi {
            margin-left: 8px;
            background-size: 100% 100%;
            position: relative;
            top: -2px;
            background-color: #f60;
            display: inline-block;
            padding: 0 2px;
            text-align: center;
            vertical-align: middle;
            font-style: normal;
            color: #fff;
            overflow: hidden;
            line-height: 16px;
            height: 16px;
            font-size: 12px;
            border-radius: 4px;
            font-weight: 200;
        }
        .camera {
            background: #fff url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/searchbox/nicon-10750f3f7d.png) no-repeat;
            width: 25px;
            height: 20px;
            position: absolute;
            background-position: 0 -51px;
            left: 67%;
            bottom:48%;
        }
        #hot-header {
            display: flex;
            margin-left:200px ;
            margin-top: 20px;
            justify-content: space-between;
            margin-right: 230px;
        }
        .huan {
            font-size: 14px;
            line-height: 14px;
            color: #626675;
        }
        .more {
            display: none;
            position: absolute;
            top: 29px;
            right: -12px;
            width: 228px;
            height: 298px;
            background: #fff;
            box-shadow: 0 2px 10px 0 rgba(0,0,0,.15);
            border-radius: 12px;
        }
        .more-top {
            margin-right: 24px;
            margin-top: 19px;
            display: inline-block;
            position: relative;
        }
        .img-list {
            width: 42px;
            height: 42px;
            margin-top: 8px;
            margin-left: 8px;
            margin-right: 8px;
            border: 1px solid rgba(0,0,0,.03);
            border-radius: 8px;
            display: block;
        }
        .more-list-1 {
            display: flex;
            justify-content: space-around;
            flex-direction: row;
        }
        .more-list-2 {
            display: flex;
            justify-content: space-around;
            flex-direction: row;
        }
        .more-list-3 {
            display: flex;
            justify-content: space-around;
            flex-direction: row;
        }
        .z {
            font: 13px/23px Arial,sans-serif;
            width: 60px;
            text-align: center;
            margin-top: 3px;
        }
        .zi-1 {
            color: #9195a3;
            font: 13px/23px Arial,sans-serif;
            text-decoration: none;
            text-align: center;
            margin-top: 20px;
        }
        form input[type=text]:focus{
            border-color: #4e6ef2;
            color: #222;
        }
        #hot li a:hover {
            text-decoration: underline;
        }
        @font-face {
            font-family: baiduIconfont;
            src: url(https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-fa013548a9.woff2);
        }
        .icon{
            font-family: baiduIconfont;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <header>
 <div class="headerTop">
    <div class="headerLeft">
        <div id="setup-list">
        <a class="a" href="http://news.baidu.com">新闻</a>
        <a class="a" href="https://www.hao123.com?src=from_pc_logon">hao123</a>
        <a class="a" href="http://map.baidu.com">地图</a>
        <a class="a" href="http://map.baidu.com">贴吧</a>
        <a class="a" href="http://haokan.baidu.com">视频</a>
        <a class="a" href="http://image.baidu.com">图片</a>
        <a class="a" href="http://pan.baidu.com?form=1026962h">网盘</a>
        <div class="more-top" id="setup-list">
        <a class="a" href="http://pan.baidu.com?form=1026962h" class="setup">更多</a>
        <div class="more" id="list" >
            <div class="more-list-1">
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newfanyi-da0cea8f7e.png" alt="">
                    <div class="z">翻译</div></a>
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newxueshuicon-a5314d5c83.png" alt="">
                    <div class="z">学术</div></a>
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newwenku-d8c9b7b0fb.png" alt="">
                    <div class="z">文库</div></a>
            </div>
            <div class="more-list-2">
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newbaike-889054f349.png" alt="">
                    <div class="z">百科</div></a>
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newzhidao-da1cf444b0.png" alt="">
                    <div class="z">知道</div></a>
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newjiankang-f03b804b4b.png" alt="">
                    <div class="z">健康</div></a>
            </div>
            <div class="more-list-3">
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yingxiaoicon-612169cc36.png" alt="">
                    <div class="z">营销推广</div></a>
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newzhibo-a6a0831ecd.png" alt="">
                    <div class="z">直播</div></a>
                <a href=""><img class="img-list" src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/newyinyue-03ecd1e9b9.png" alt="">
                    <div class="z">音乐</div></a>
            </div>
            <div class="zi-1">
                <a href="">查看全部百度产品></a>
            </div>
        </div>
    </div>
</div>
    </div>
    <div class="headerRight">
        <div id="setup-list">
            <span class="setup"><a href="">设置</a></span>
            <div id="list">
                <ul>
                    <li><a href="">搜索设置</a></li>
                    <li><a href="">高级搜索</a></li>
                    <li><a href="">关闭预测</a></li>
                    <li><a href="">隐私设置</a></li>
                    <li><a href="">关闭热搜</a></li>
                </ul>
            </div>
            <input type="submit" value="登录" class="login">
        </div>
    </div>
</div>
    </header>
    <section>
    <div class="headerbottom">
        <div class="no-img"></div>
        <div class="middle">
            <div class="img">
                <img title="百度一下，你就知道！" src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" style="width:
                270px;height:129px">
            </div>
            <div class="search">
                <form>
                    <span class="camera"></span><input class="d" type="text" style="width:500px;height:40px"><input class="baidu" type="submit" value="百度一下" style="height:45px;width:100px;">
                </form>
            </div>
        </div>

        <div id="hot-header">
            <div class="baidu-hot"><strong>百度热搜></strong></div>
            <div class="huan">
                <span class="icon">&#xe619;</span>
                换一换
            </div>
        </div>
        <div id="hot">
            
            <ul class="hot-1">
                <li><a href="https://www.baidu.com"><span class="match-1">1</span><span>外国政要密集访华 他们为何而来</span><span class="hot-zi">热</span></a></li>
                <li><a href="https://www.baidu.com"><span class="match-3">3</span><span>3分钟回顾环台岛演习第二天热</span><span class="hot-zi">热</span></a></li>
                <li><a href="https://www.baidu.com"><span class="match-5">5</span><span>成都升温千足虫满街爬热</span></a></li>
            </ul>
            <ul class="hot-2">
                <li><a href="https://www.baidu.com"><span class="match-2">2</span><span>旅游专列来啦</span></a></li>
                <li><a href="https://www.baidu.com"><span class="match-4">4</span><span>省委书记不打招呼直奔事故现场</span></a></li>
                <li><a href="https://www.baidu.com"><span class="match-6">6</span><span>黑在美国30多年的上海大爷拿低保了</span></a></li>
            </ul>
        </div>
    </div>
    </section>
    <footer>
        <div class="footer">
            <div style="float:left;">
                <a class="c" href="https://home.baidu.com/">关于百度</a>
                <a class="c" href="http://ir.baidu.com/">About Baidu</a>
                <a class="c" href="https://www.baidu.com/duty/">使用百度前必读</a>
                <a class="c" href="https://help.baidu.com/newadd?prod_id=1&category=4">意见反馈</a>
                <a class="c" href="https://help.baidu.com/newadd?prod_id=1&category=4">帮助中心</a>
                <a class="c" href="http://e.baidu.com/ebaidu/home?refer=888">企业推广</a>
                <a class="c" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">
                    京公网安备11000002000001
                </a>
                <a class="c">&nbsp京ICP030173号&nbsp&nbsp</a>
                <a class="c">信息网络传播视听节目许可证 0110516</a>
                <a class="c">互联网宗教信息服务许可证编号：京（2022）0000043</a>
    
            </div>
        </div>
    </footer>
</body>
</html>

 

 

小白写代码，仅供参考！！！ 

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值