前端学习之路02-WTL（实战百度页面）

最新推荐文章于 2024-08-03 20:32:29 发布
whlne
最新推荐文章于 2024-08-03 20:32:29 发布
阅读量518
点赞数 3
本文链接：https://blog.csdn.net/whlne/article/details/124943022
版权
前端学习 elementui
页面成果：
百度官方页面：
代码实现：
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>
        hello beiyi</title>

</head>

<body style="font-family:'小米兰亭'">
    <div>
        <a href="http://news.baidu.com/" traget="blank" class="left">
            新闻</a>

        <a href="https://www.hao123.com/" traget="blank" class="left">
            hao123</a>

        <a href="https://map.baidu.com/" traget="blank" class="left">
            地图</a>

        <a href="http://v.baidu.com//" traget="blank" class="left">
            视频</a>

        <a href="https://tieba.baidu.com/index.html" traget="blank" class="left">
            贴吧</a>

        <a href="http://xueshu.baidu.com/" traget="blank" class="left">
            学术</a>

        <a href="https://www.baidu.com/more/" traget="blank" class="left">
            更多</a>

        <span class="right">
            <div class="dropdown">
                <span>
                    设置</span>

                <div class="dropdown-content">
                    <a target="blank">
                        搜索设置</a>

                    <a target="blank">
                        高级设置</a>

                    <a target="blank">
                        关闭预测</a>

                    <a target="blank">
                        隐私设置</a>

                    <a target="blank">
                        关闭热榜</a>

                </div>

            </div>

            <div class="dropdown-settings">
                <input type="button" id=".loginbutton" value="登录" class="loginbutton button" />

            </div>

        </span>

    </div>

    <div class="box">
        <div class="imges">
            <img src="./3.jpg" alt="百度logo" title="百度一下，你就知道" height="129" width="270" />

        </div>

        <input id=".search" placeholder="请输入内容" class="search" />

        <input type="button" id="searchbutton" value="百度一下" class="searchbutton button" />

    </div>

    <div class="hot-title">
        百度热榜<div class="baiduhot">
            <div class="left-hot">
                <span class="title-content-title top">
                    <span class="top1">
                        1</span>

                    <a href="https://www.baidu.com/s?wd=%E5%85%A8%E5%9B%BD%E7%96%AB%E6%83%85%E6%95%B4%E4%BD%93%E5%91%88%E7%8E%B0%E7%A8%B3%E5%AE%9A%E4%B8%8B%E9%99%8D%E6%80%81%E5%8A%BF&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                        class="five">
                        全国疫情整体呈现稳定下降态势</a>

                </span>

                <span class="title-content-title">
                    <span class="top2">
                        2</span>

                    <a href="https://www.baidu.com/s?wd=31%E7%9C%81%E5%8C%BA%E5%B8%82%E6%96%B0%E5%A2%9E%E6%9C%AC%E5%9C%9F%E2%80%9C141%2B498%E2%80%9D&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                        class="five">
                        31省区市新增本土“141+498”</a>

                </span>

                <span class="title-content-title">
                    <span class="top3">
                        3</span>

                    <a href="https://www.baidu.com/s?wd=%E4%B9%8C%E6%80%BB%E7%BB%9F%E6%BC%94%E8%AE%B2%E5%90%8E%E4%B8%AD%E6%96%B9%E7%A6%BB%E5%9C%BA%EF%BC%9F%E5%A3%B0%E6%98%8E%E6%9D%A5%E4%BA%86&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                        class="five">
                        乌总统演讲后中方离场?声明来了</a>

                </span>

            </div>

            <div class="right-hot">
                <span class="title-content-title1">
                    <span class="other-top">
                        4</span>

                    <a
                        href="https://www.baidu.com/s?wd=33%E9%A1%B9%E6%8E%AA%E6%96%BD%E7%A8%B3%E7%BB%8F%E6%B5%8E%EF%BC%81%E6%9C%80%E6%96%B0%E9%83%A8%E7%BD%B2%E6%9D%A5%E4%BA%86&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">
                        33项措施稳经济!最新部署来了</a>

                </span>

                <span class="title-content-title1">
                    <span class="other-top">
                        5</span>

                    <a
                        href="https://www.baidu.com/s?wd=%E2%80%9C%E7%8E%8B%E5%BF%83%E5%87%8C%E6%A6%82%E5%BF%B5%E8%82%A1%E2%80%9D%E5%B8%82%E5%80%BC%E8%92%B8%E5%8F%91%E5%8D%83%E4%BA%BF&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">
                        王心凌概念股 市值蒸发千亿</a>

                </span>

                <span class="title-content-title1">
                    <span class="other-top">
                        6</span>

                    <a
                        href="https://www.baidu.com/s?wd=%E2%80%9C%E9%B8%BF%E8%92%99%E4%B9%8B%E7%88%B6%E2%80%9D%E7%8E%8B%E6%88%90%E5%BD%95%E7%A6%BB%E5%BC%80%E5%8D%8E%E4%B8%BA&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1">
                        “鸿蒙之父”王成录离开华为</a>

                </span>

            </div>

        </div>

    </div>

    <div class="bottom">
        <a href="https://home.baidu.com/" target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;关于百度</a>

        <a href="https://ir.baidu.com/" target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;About Baidu</a>

        <a href="https://www.baidu.com/duty/" target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;使用百度前必读</a>

        <a href="https://help.baidu.com/" target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;帮助中心</a>

        <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京公网安备11000002000001号</a>

        <a href="https://beian.miit.gov.cn/#/Integrated/index" target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;京ICP证030173号</a>

        <a target="blank">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;@2022 Baidu</a>

        <a>
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;互联网药品信息服务资格证书 (京)-经营性-2017-0020</a>

        <a href="https://www.baidu.com/licence/">
            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信息网络传播视听节目许可证0110516</a>

    </div>

    <style type="text/css">
        a {
            color: black
        }

        a:link {
            text-decoration: none
        }

        a:visited {
            text-decoration: none
        }

        a:hover {
            color: #4e6ef2;
            text-decoration: none
        }

        a:active {
            text-decoration: none
        }

        .left {
            line-height: 22px;
            font-size: 15px;
            text-align: center;
            margin: 22px 0px 22px 0px;
            margin-left: 30px
        }

        .right {
            position: absolute;
            right: 0px;
            width: 150px
        }

        .dropdown {
            position: relative;
            display: inline-block;
            text-align: center;
            padding-right: 23px
        }

        .dropdown-content {
            list-style: none;
            position: absolute;
            display: none;
            background-color: #f9f9f9;
            min-width: 61px;
            box-shadow: 0 8 16 0 rgba(0, 0, 0, 0.2);
            padding: 12px 16px;
            line-height: 30px;
            z-index: 10px;
            font-size: 15px
        }

        .dropdown:hover .dropdown-content {
            display: block
        }

        .dropdown-settings {
            position: relative;
            display: inline-block
        }

        .loginbutton {
            position: relative;
            left: 13;
            background-color: #4e71f2;
            color: #fff;
            border-radius: 5px;
            font-size: 12px;
            width: 50px;
            height: 25px;
            display: inline-block
        }

        .searchbutton {
            height: 45px;
            width: 100px;
            border: none;
            color: white;
            box-sizing: border-box;
            background-color: #4e6ef2;
            position: absolute;
            left: 550px;
            border-radius: 0px 10px 10px 0px;
            font-size: 15px
        }

        .imges {
            position: absolute;
            top: -140px;
            left: 180px
        }

        .box {
            width: 650px;
            height: 0px;
            margin: 200px auto 100px;
            position: relative
        }

        .search {
            outline: none;
            border: 2px solid #a7aab5;
            height: 45px;
            width: 550px;
            box-sizing: border-box;
            text-indent: 6;
            font-size: 16px;
            border-radius: 10px 0px 0px 10px
        }

        .hot-title {
            width: 654px;
            position: relative;
            margin: 45px 435px 0px
        }

        .title-content-title {
            margin: 10px 0px 0px;
            float: left;
            height: 32px;
            line-height: 32px
        }

        .title-content-title1 {
            margin: 10px 0px 0px;
            margin-left: 90px;
            float: left;
            height: 32px;
            line-height: 32px
        }

        .baiduhot div {
            width: 50%;
            overflow: hidden;
            float: left;
            line-height: 32px
        }

        .top1 {
            color: #fe2d46
        }

        .top2 {
            color: #f60
        }

        .top3 {
            color: #faa90e
        }

        .other-top {
            background: 0 0;
            color: #9195a3
        }

        .right-hot {
            float: right;
            line-height: 20px
        }

        .bottom {
            text-align: center;
            padding-left: 30px;
            position: fixed;
            bottom: 0;
            left: 0;
            height: 40px;
            line-height: 40px;
            font-size: 10px;
            background-color: #fbfbfb
        }
    </style>

</body>

</html>
whlne
关注
3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端学习之路02-WTL（实战百度页面）

页面成果：百度官方页面：代码实现：<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> hello beiyi</title></head><body style="font-family:'小米兰亭'..
复制链接

扫一扫