改过后的百度页面

最新推荐文章于 2022-07-25 17:40:31 发布

蜡笔小心眼儿!

最新推荐文章于 2022-07-25 17:40:31 发布

阅读量637

点赞数 2

文章标签： webview css html

本文链接：https://blog.csdn.net/m0_63893191/article/details/124975152

版权

HTML：

<!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>
    <link rel="stylesheet" href="baidu.css">
</head>

<body>

    <div class="header">
        <ul class="left">
            <li class="li1"><a href="http://news.baidu.com" target="_blank">新闻</a></li>
            <li class="li1"><a href="https://www.hao123.com?src=from_pc" target="_blank">hao123</a></li>
            <li class="li1"><a href="http://map.baidu.com" target="_blank">地图</a></li>
            <li class="li1"><a href="http://tieba.baidu.com/" target="_blank">贴吧</a></li>
            <li class="li1"><a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank">视频</a></li>
            <li class="li1"><a href="http://image.baidu.com/" target="_blank">图片</a></li>
            <li class="li1"><a href="https://pan.baidu.com?from=1026962h" target="_blank">网盘</a></li>
            <li class="li1" id="more_list">
                <div id="toubu"> <a href="http://www.baidu.com/more/" target="_blank">更多</a>
                    <div id="more_box">
                        <ul>

                            <li class="xiaoli">
                                <img src="fy.png" alt="">
                                <div class="tag_more">翻译</div>
                            </li>
                            <li class="xiaoli">
                                <img src="xs.png" alt="">
                                <div class="tag_more">学术</div>
                            </li>
                            <li class="xiaoli">
                                <img src="w.png" alt="">
                                <div class="tag_more">文库</div>
                            </li>
                            <li class="xiaoli">
                                <img src="bk.png" alt="">
                                <div class="tag_more">百科</div>
                            </li>
                            <li class="xiaoli"><img src="zd.png" alt="">
                                <div class="tag_more">知到</div>
                            </li>
                            <li class="xiaoli">
                                <img src="jk.png" alt="">
                                <div class="tag_more">健康</div>
                            </li>
                            <li class="xiaoli">
                                <img src="ss.png" alt="">
                                <div class="tag_more">营销推广</div>
                            </li>
                            <li class="xiaoli">
                                <img src="zp.png" alt="">
                                <div class="tag_more">直播</div>
                            </li>


                            <li class="xiaoli">
                                <img src="d.png" alt="">
                                <div class="tag_more">音乐</div>
                            </li>

                        </ul>
                    </div>
                </div>
            </li>
        </ul>
        <div class="right">
            <div id="xiaoli">
                <span class="r_btn1"><a href="">设置</a></span>
                <div id="more_menu">
                    <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>
            </div>
            <a class="r_btn2" href="">登录</a>
        </div>
    </div>

    <div class="box">
        <div>
            <div>
                <img src="baidu.png" alt="百度logo" title="百度一下，你就知道" class="imges">
            </div>
            <form action="http://www.baidu.com/" target="_blank">
                <span>
                    <input type="text"></input>
                    <input type="submit" id="submit_size" value="百度一下" /></input>
                </span>
            </form>

            <div class="isindex-wrap">
                <div class="hotandchange">
                    <div class="hotserch">
                        百度热搜
                        <span class="r">></span>
                    </div>
                    <div class="change">
                        <span><img src="yyy.png" class="changeimg"></span>
                        <span><a href="" class="changeA">换一换</a></span>
                    </div>
                </div>
            </div>
        </div>

        <div>
            <div class="baiduhot">
                <div class="left-hot">
                    <ul>
                        <li class="title-content-title">
                            <span class="top1">1</span>
                            <a href="https://www.baidu.com/s?wd=%E4%B8%AD%E5%9B%BD%E5%A6%87%E5%A5%B3%E6%8A%A5%E8%AF%8416%E5%B2%81%E5%88%9D%E4%B8%AD%E7%94%9F%E5%9C%A8%E6%A0%A1%E5%88%86%E5%A8%A9&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                                target="_blank">中国妇女评报16岁初中生在校分娩</a>
                            <span class="re">热</span>
                        </li>
                        <li class="title-content-title">
                            <span class="top2">2</span>
                            <a href="https://www.baidu.com/s?wd=520&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1" target="_blank">拜登：得州小学枪击是场“大屠杀”</a>
                            <span class="xin">热</span>
                        </li>
                        <li class="title-content-title">
                            <span class="top3">3</span>
                            <a class="title-content c-link c-font-medium c-line-clamp1 tag-width" href="https://www.baidu.com/s?wd=%E5%AE%98%E6%96%B9%EF%BC%9A%E6%A0%B8%E9%85%B8%E6%A3%80%E6%B5%8B%E5%8D%95%E4%BA%BA%E5%8D%95%E6%A3%80%E4%B8%8D%E9%AB%98%E4%BA%8E16%E5%85%83&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                                target="_blank">官方：核酸检测单人单检不高于16元</a>
                            <span class="re">热</span>
                        </li>
                    </ul>
                </div>
                <div class="right-hot">
                    <ul>
                        <li class="title-content-title1">
                            <span class="other-top">4</span>
                            <a href="" target="https://www.baidu.com/s?wd=%E5%9B%BD%E9%98%B2%E9%83%A8%EF%BC%9A%E4%B8%AD%E4%BF%84%E6%88%98%E7%95%A5%E5%B7%A1%E8%88%AA%E4%B8%8D%E9%92%88%E5%AF%B9%E7%AC%AC%E4%B8%89%E6%96%B9&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1_blank">国防部：中俄战略巡航不针对第三方</a>
                            <span class="xin">新</span>
                        </li>
                        <li class="title-content-title1">
                            <span class="other-top">5</span>
                            <a href="https://www.baidu.com/s?wd=%E6%96%B0%E5%86%A0%E6%84%9F%E6%9F%93%E5%90%8E%E4%BC%9A%E9%97%B4%E6%AD%87%E6%80%A7%E6%8E%92%E6%AF%92%EF%BC%9F%E4%B8%93%E5%AE%B6%E5%9B%9E%E5%BA%94&sa=fyb_n_homepage&rsv_dl=fyb_n_homepage&from=super&cl=3&tn=baidutop10&fr=top1000&rsv_idx=2&hisfilter=1"
                                target="_blank">新冠感染后会间歇性排毒？专家回应</a>
                            <span class="re">热</span>
                        </li>
                        <li class="title-content-title1">
                            <span class="other-top">6</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"
                                target="_blank">33项措施稳经济！最新部署来了</a>
                            <span class="re">热</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="bottom">
        <div class="bottomss">
            <ul>
                <li><a href="https://home.baidu.com/" target="_blank">关于百度</a></li>
                <li><a href="http://ir.baidu.com" target="_blank">About Baidu</a></li>
                <li><a href="https://www.baidu.com/duty" target="_blank">使用百度前必读</a></li>
                <li><a href="https://help.baidu.com/" target="_blank">帮助中心</a></li>
                <li><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" target="_blank">京公网安备11000002000001号</a></li>
                <li><a href="https://beian.miit.gov.cn" target="_blank">京ICP证030173号</a></li>
                <li><span>©2022Baidu</span></li>
                <li><span>互联网药品信息服务资格证书 (京)-经营性-2017-0020</span></li>
                <li><a href="http://www.baidu.com/licence/" target="_blank">信息网络传播视听节目许可证 0110516</li>
            </ul>
        </div>
    </div>
  
</body>
 
</html>

CSS：

* {
    padding: 0;
    margin: 0;
    color: #222;
}

a {
    text-decoration: none;
}

a:hover {
    color: #4e71f2;
}

li {
    list-style: none;
}

.header {
    height: 60px;
    line-height: 60px;
    text-align: center;
}

.header .left {
    float: left;
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 100;
    padding-left: 24px;
}

.header .li1 {
    float: left;
    font: 13px/23px Arial, sans-serif;
    color: #222;
    position: relative;
    margin-right: 24px;
    margin-top: 19px;
    /* display: inline-block; */
}

.header .right {
    position: absolute;
    right: 0px;
    top: 0px;
    z-index: 100;
    height: 60px;
    padding-right: 24px;
    padding-left: 200px;
    float: right;
}

.right #xiaoli {
    color: #222;
    position: relative;
    margin-right: 24px;
    display: inline-block;
    font-size: 13px;
}

.header .right .r_btn1 {
    display: inline-block;
    vertical-align: top;
    cursor: pointer;
}

.right #more_menu {
    display: none;
    position: absolute;
    top: 48px;
    width: 84px;
    line-height: 23px;
    text-align: center;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .15);
    border-radius: 12px;
}

.right #more_menu li {
    margin-top: 9px;
}

#xiaoli:hover #more_menu {
    display: block;
}

.header .right .r_btn2 {
    display: inline-block;
    margin-top: 19px;
    background-color: #4e71f2;
    padding-left: 2px;
    font-size: 14px;
    height: 24px;
    width: 48px;
    color: #fff;
    line-height: 24px;
    border-radius: 6px;
}

#toubu {
    position: relative;
    display: block;
}

#more_box {
    display: none;
    position: absolute;
    right: -12px;
    top: 30px;
    width: 300px;
    height: 300px;
    line-height: 15px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    background-color: #fff;
    /*box-shadow: 10 10;*/
}

#more_box li {
    margin-left: 18px;
}

#more_list:hover #more_box {
    display: block;
}

#more_box img {
    height: 42px;
    width: 42px;
    border: 1px solid rgba(0, 0, 0, .03);
    border-radius: 12px;
}

.tag_more {
    width: 42px;
    text-align: center;
}

.xiaoli {
    float: left;
    line-height: 24px;
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 16px;
}

.box {
    width: 654px;
    height: 44px;
    margin: 200px auto 100px;
    position: relative;
}

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

input:focus {
    color: #000;
    background-color: #fff;
    border-color: #4e6ef2 !important;
    height: 90px;
    border-radius: 10px 0 10px 10px;
}

#submit_size {
    height: 44px;
    width: 108px;
    border: none;
    color: white;
    box-sizing: border-box;
    background-color: #4e6ef2;
    position: absolute;
    left: 550px;
    border-radius: 0 10px 10px 0;
    cursor: pointer;
}

.imges {
    text-align: center;
    display: inline-block;
    width: 270px;
    height: 129px;
    margin-left: -135px;
    position: absolute;
    top: -140px;
    left: 327px;
}

.isindex-wrap {
    width: 654px;
    height: 24px;
    margin-top: 45px;
    position: relative;
    text-align: left;
}

.hotandchange {
    font-size: 14px;
    width: 654px;
    height: 24px;
    text-align: left;
}

.hotserch {
    position: relative;
    float: left;
    font-weight: bold;
    line-height: 24px;
}

.hotserch a:hover {
    color: #4e71f2;
}

.r {
    color: #8a8a8a;
}

.r a:hover {
    color: #4e71f2;
}

.changeimg {
    color: #8a8a8a;
    width: 16px;
    height: 16px;
}

.change {
    position: relative;
    color: #8a8a8a;
    float: right;
}

.changeA {
    color: #8a8a8a;
}

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

.title-content-title {
    margin-right: 20px;
    float: left;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}

.title-content-title1 {
    margin-left: 20px;
    float: left;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
}

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

.top1 {
    color: #fe2d46;
}

.top2 {
    color: #f60;
}

.top3 {
    color: #faa90e;
}

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

.re {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: rgb(255, 102, 0);
    color: aliceblue;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    line-height: 16px;
}

.xin {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: rgb(255, 69, 91);
    color: aliceblue;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    line-height: 16px;
}

.shang {
    background-color: rgba(38, 90, 246, 0.84);
    display: inline-block;
    width: 16px;
    height: 16px;
    color: aliceblue;
    font-size: 12px;
    text-align: center;
    border-radius: 4px;
    line-height: 16px;
}

.bottom {
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background-color: #fbfbfb;
    line-height: 40px;
    font-size: 12px;
}

.bottomss li a {
    float: left;
    padding-left: 14px;
    color: #9195a3;
}

.bottomss li a:hover {
    color: #222;
}

.bottomss li span {
    float: left;
    padding-left: 50px;
    color: #9195a3;
}

图例：

蜡笔小心眼儿!

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
改过后的百度页面

HTML：<!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"> <tit
复制链接

扫一扫