html css 仿作百度页面

20岁扶墙码农

已于 2022-05-16 17:17:03 修改

阅读量172

点赞数

文章标签： css html webview

于 2022-05-16 17:13:51 首次发布

本文链接：https://blog.csdn.net/m0_63706031/article/details/124803749

版权

<!DOCTYPE html>
<html lang="zh-CN">
<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>Document</title>
    <style>
        .tou {
            font-size: 13px;
            padding-left: 24px;
        }
        .tou a {
            text-decoration: none;
            color: #222;
            padding: 20px;
            display: inline-block;
        }
         .tou a:hover {
            color: blue;
        }
        .tupian {
            text-align: center;
        }
        #sousuo {
            width: 512px;
            height: 40px;
        }
        .text {
            text-align: center;
        }
        #baidu {
            height: 44px;
            width: 108px;
            background-color: #4e6ef2;
            color:white;
        }
        .bottom {
            text-align: center;
            height: 50px;
        }
        #resou {
            font-family: 宋体;
        }
        .diyilie {
            display: inline-block;
        }
        .diyilie a,.dierlie a {
            text-decoration: none;
            color:#222;
        }

        .kong {
            width: 420px;
            display: inline-block;
        }
        .dierlie {
            display: inline-block;
        }
        .diyilie a:hover,.dierlie a:hover {
            color: blue;
        }
        .niu {
            display: inline-block;
            width: 200px;
        }
        .nav {
            width:680px;
            margin: 0 auto;
        }
        li {
            margin:15px;
            list-style: none;
        }

    </style>
</head>
<body>
    <div class="tou">
        <a href="http://news.baidu.com" target="_blank">新闻</a>
        <a href="http://www.hao123.com" target="_blank">hao123</a>
        <a href="http://map.baidu.com" target="_blank">地图</a>
        <a href="http://tieba.baidu.com" target="_blank">贴吧</a>
        <a href="http://haokan.baidu.com" target="_blank">视频</a>
        <a href="http://image.baidu.com" target="_blank">图片</a>
        <a href="http://pan.baidu.com" target="_blank">网盘</a>
        <a href="http://www.baidu.com" target="_blank">更多</a>
    </div>
    <div>
    <div class="tupian"><img src="图片材料/baidu.png"></div>
    <div class="text">
    <span><input type="text" name="sousuok" id="sousuo" ></span><span><input type="submit" name="baiduyixia" id="baidu" value="百度一下"></span>
    </div>
    <div class="nav">
        <ul class="diyilie">
            <li>
                <a href="https://top.baidu.com/board?platform=pc&sa=pcindex_entry" id="resou">百度热搜</a>
                <img src="图片材料/biaoqian1.png">
            </li>
            <li>
                <image src="图片材料/biaoqian.png">
               <a href="#">重要之年看开年</a> 
            </li>
            <li>
                <a href="#">1 全国疫情整体继续呈现下降态势</a>
            </li>
            <li>
                <a href="#">2 上海新增本土194+1487 死亡1例</a>
            </li>
        </ul>
        <ul class="dierlie">
            <li>
                <span class="niu"></span>
                <span>
                    <img src="图片材料/biaoqian2.png" >
                    <a href="#">换一换</a>
                </span>
            </li>
            <li>
                <a href="#">3 全国疫情整体继续呈现下降态势</a>
                热
            </li>
            <li>
                <a href="#">4 清华大学：今起校门不进不出</a>
            </li>
            <li>
                <a href="#">5 国产大飞机C919首飞成功</a>
            </li>
        </ul>
    </div>
</body>
</html>

以上为代码区，

效果图如下：