前端day04-CSDN博客

本文链接：https://blog.csdn.net/MRZ17/article/details/100638703
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        .container {
            width: 1400px;
            background-color: pink;
        }

        .container > div {
            float: left;
            height: 36px;
        }

        .container1 {
            width: 1400px;
            background-color: pink;
        }

        .container1 > div {
            float: left;
            height: 36px;
        }

        .left-box {
            width: 125px;
            height: 34px;

        }

        .left-box1 {
            width: 540px;
            height: 34px;
            background-color: white;
            border: 1px solid #3385ff;
        }


        .right-box {
            width: 100px;
            height: 36px;
            background-color: blue;
            color: white;
            text-align: center;
            line-height: 36px;


        }

        input {
            outline: none;
            border: 0;
            height: 34px;
            width: 500px;
            margin-left: 5px;
        }

        #left-box2 {
            width: 1400px;
            height: 36px;
            background-color: #f8f8f8;
            margin-top: 10px;
            padding-left: 125px;
            line-height: 36px;;
        }

        #left-box2 > a {
            text-decoration: none;
            color: #666;
        }

        #left-box3 {
            width: 1400px;
            height: 1000px;
            background-color: white;
            padding-left: 125px;


        }

        .container3 {
            width: 1400px;
            height: 100%;
            padding-top: 80px;

        }

        #left-box3-1 {
            width: 713px;
            height: 100%;
            background-color: white;
            float: left;
        }

        #left-box3-2 {
            width: 538px;
            height: 36px;
            background-color: white;
        }

        #left-box3-2 > a {
            text-decoration: none;
            color: #666;
        }

        #left-box3-3 {
            width: 661px;
            height: 24px;
            background-color: white;
            margin-top: 10px;
        }

        #left-box3-4 {
            width: 661px;
            height: 75px;
            background-color: white;
            margin-top: 10px;
        }

        #left-box3-5 {
            width: 661px;
            height: 24px;
            background-color: white;
            margin-top: 10px;
        }

        #left-box3-6 {
            width: 661px;
            height: 121px;
            background-color: white;
            margin-top: 10px;
        }

        #left-box3-7 {
            width: 661px;
            height: 24px;
            float: left;
            background-color: white;
            margin-top: 10px;
        }

        #left-box3-8 {
            width: 661px;
            height: 140px;
            background-color: white;
            margin-top: 10px;
        }

        #right-box1 {
            width: 2px;
            height: 50%;
            background-color: #cccccc;
            float: left;
            margin-top: 36px;
        }

        #right-box2 {
            width: 400px;
            height: 100%;
            background-color: white;
            float: left;
            margin-top: 36px;
        }

        #right-box2-1 {
            width: 400px;
            height: 36px;
            background-color: white;
            padding-left: 10px;
        }

        #right-box3-1 {
            width: 400px;
            height: 140px;
            background-color: white;
            padding-left: 10px;
            float: left;
        }

        #right-box3-1-1 {
            width: 90px;
            height: 140px;
            background-color: white;
            padding-left: 10px;
            float: left;
        }

        #right-box3-1-2 {
            width: 90px;
            height: 140px;
            background-color: white;
            padding-left: 10px;
            float: left;
        }

        #right-box3-1-3 {
            width: 90px;
            height: 140px;
            background-color: white;
            padding-left: 10px;
            float: left;
        }

        #right-box3-1-4 {
            width: 90px;
            height: 140px;
            background-color: white;
            padding-left: 10px;
            float: left;
        }


    </style>
</head>
<body>
<div class="container">
    <div class="left-box" style="position:relative;">
        <img src="CAMERA.jpg" alt="" style="position: absolute">
    </div>
    <div class="left-box1" style="position:relative;">
        <input type="text">
        <img src="CAMERA.png" alt="" style="position:absolute; width: 30px; height: 34px">

    </div>
    <div class="right-box">
        百度一下
    </div>
    <div style="float: right;font-size: 10px ;line-height: 36px">
        <a href="" style="color: black">百度首页</a>&nbsp; &nbsp;&nbsp;
        <a href="" style="color: black">设置</a>&nbsp; &nbsp;&nbsp;
        <a href="" style="color: black">登陆</a>&nbsp; &nbsp;&nbsp;
    </div>
</div>
<div class="container1">
    <div id="left-box2">
        <a href="">网页</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">咨询</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">视频</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">图片</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">知道</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">文库</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">贴吧</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">采购</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">地图</a>&nbsp;&nbsp;&nbsp;&nbsp;
        <a href="">更多></a>&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</div>
<div class="container3">
    <div id="left-box3">

        <div id="left-box3-1">
            <div id="left-box3-2" style="font-size: 8px ;line-height: 36px ;color: #999"><h2>百度为您找到相关结果约100,000,000个 <a
                    href="" style="float: right;">搜索工具</a></h2>
            </div>
            <div id="left-box3-3">
                <a href="">百度一下，你就知道</a>
            </div>
            <div id="left-box3-4">
                <div style="float: left"><img src="logo.png" alt=""></div>
                <div style="font-size: 16px;padding-left: 150px">
                    全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结果。
                    <a href="">https://www.baidu.com/</a><a href=""
                                                            style="font-size: 10px ;padding-left: 200px;color: #666666">
                    百度快照 - 7616条评价</a></div>
            </div>
            <div id="left-box3-5">
                <a href="" style="float: left">百度-百度百科</a>
            </div>
            <div id="left-box3-6">
                <div style="float: left"><img src="baiduyixia.png" alt=""></div>
                <div style="font-size: 16px;padding-left: 150px">
                    百度（纳斯达克：BIDU），全球最大的中文搜索引擎、最大的中文网站。百度愿景是：成为最懂用户，并能帮助人们成长的全球顶级高科技公司。“百度”二字，来自于八百年前南宋词人...
                </div>
                <a href="" style="padding-left: 30px; font-size: 13px">发展简史 公司理念 财报数据 产品手册 多语言化 更多>></a>
                <br><a href="" style="padding-left: 30px">baike.baidu.com/ </a>

            </div>
            <div id="left-box3-7">
                <a href="">百度地图</a>
            </div>
            <div id="left-box3-8">
                <div style="float: left"><img src="baiduditu.jpg" alt=""></div>
                <div style="font-size: 16px;padding-left: 150px;margin-right: 120px">
                    浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。
                </div>
                <a href="" style="padding-left: 30px">https://map.baidu.com/</a><a href=""
                                                                                   style="font-size: 10px ;padding-left: 220px;color: #666666">
                百度快照 - 3417条评价</a></div>
        </div>
        <div id="right-box1">
        </div>
        <div id="right-box2">
            <div id="right-box2-1">百度高管 <a href="" style="float: right">展开</a></div>
            <div id="right-box3-1">
                <div id="right-box3-1-1"><img src="1.png" alt=""><a href=""
                                                                    style="padding-left: 20px ; font-size: 15px">444</a>
                    <p style="font-size: 13px;color: #cccccc">百度创始人董 事长CEO</p></div>
                <div id="right-box3-1-2"><img src="2.png" alt=""><a href=""
                                                                    style="padding-left: 20px ; font-size: 15px">333</a>
                    <p style="font-size: 13px;color: #cccccc">百度集团首席 财务官</p></div>
                <div id="right-box3-1-3"><img src="3.png" alt=""><a href=""
                                                                    style="padding-left: 20px ; font-size: 15px">222</a>
                    <p style="font-size: 13px;color: #cccccc">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;百度总裁</p></div>
                <div id="right-box3-1-4"><img src="4.png" alt=""><a href=""
                                                                    style="padding-left: 20px ; font-size: 15px">111</a>
                    <p style="font-size: 13px;color: #cccccc">百度集团首席 技术官</p></div>
            </div>
        </div>
    </div>

</div>
</div>

</body>
</html>