周末作业

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .head {
            width: 100%;
            height: 50px;

        }
        .head a {
            margin-top: 15px;
        }
        .nav {
            width: 100%;
            height: 50px;
            background-color: #eeeeee;

        }
        .content {
            width: 100%;

        }
        .content .left-box{
            width: 36%;
            margin-left: 6%;
            margin-right: 6%;
            float: left;

        }
        .leftrow {
            width: 100%;
            height: 200px;

        }
        .content .right-box{
            width: 50%;
            border-left: 1px solid gray;
            margin-top: 50px;
            float: right;
            padding-left: 20px;
        }
        .rightrow {
            width: 60%;
            margin-bottom: 30px;
            /*height: 250px;*/
        }
        .rightrow .item {
            width: 20%;
            margin-right: 5%;
            text-align: center;
            float: left;
        }
        .rightrow .item a{
            text-decoration: none;
        }
        .arow {
            height: 40px;
            border-bottom: 1px solid gray;
        }
        .arow a {
            text-decoration: none;
            line-height: 40px;
        }
        .arow span {
            background-color: red;
            width: 20px;
            height: 20px;
            display: inline-block;
            text-align: center;
            line-height: 20px;
        }
        .arow * {
            line-height: 40px;
        }
        #left-box {
            width: 538px;
            height: 35px;
            border: 1px solid blue;
            float: left;
            position: relative;
        }
        #right-box {
            width: 100px;
            height: 37px;
            background-color: blue;
            color: white;
            float: left;
            text-align: center;
            line-height: 37px;
        }
        input {
            height: 35px;
            padding: 0;
            border: 0;
            width: 501px;
            outline: none;
            margin-left: 5px;

        }
        #img {
            position: absolute;
            width:30px;
            height:30px;
            margin-left: 0px;
            right: 0px;
            top: 0px;
        }
        .nav a {
            line-height: 50px;
            margin-left: 20px;
            text-decoration: none;
        }
    </style>
</head>
<body>
<div class="head">
    <img src=".idea/baidu.jpg" width="100px"height="30px" style="float: left">
    <div id="left-box">
        <input type="text" style="float: left;display: inline-block">
        <img src="image/input.png" id="img">
    </div>
    <div id="right-box">百度一下</div>
    <div style="float: right;">
        <a href="">百度首页</a>
        <a href="">消息</a>
        <a href="">设置</a>
        <a href="">安澜宇</a>
    </div>
</div>
<div class="nav">
    <a href="" style="margin-left: 120px">网页</a>
    <a href="">资讯</a>
    <a href="">视频</a>
    <a href="">图片</a>
    <a href="">知道</a>
    <a href="">文库</a>
    <a href="">贴吧</a>
    <a href="">采购</a>
    <a href="">地图</a>
    <a href="">更多»</a>

</div>
<div class="content">
    <div class="left-box">
        <div style="height: 50px;width: 100%">
            <div style="float: left">百度为您找到相关结果约100,000,000个</div>
            <div style="float: right">搜索工具</div>
            <div style="clear: both"></div>
        </div>
        <div class="leftrow">
            <a href="#">百度一下,你就知道</a>
            <br>
            <div style="float: left;width:25%">
                <img src=".idea/baidu.jpg" width="120px" height="80px">

            </div>
            <div style="float: right;width: 75%">
                <p>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息,找到所求。百度超过千亿的中文网页数据库,可以瞬间找到相关的搜索结果。</p>
                <a href="">https://www.baidu.com/</a>-
                <a href="">百度快照</a>-
                <a href="">7616条评价</a>
            </div>

        </div>
        <div class="leftrow">
            <a href="#">百度_百度百科</a>
            <br>
            <div style="float: left;width:25%">
                <img src=".idea/baidu.jpg" width="120px" height="80px">
            </div>
            <div style="float: right;width: 75%">
                <p>百度(纳斯达克:BIDU),全球最大的中文搜索引擎、最大的中文网站。百度愿景是:成为最懂用户,并能帮助人们成长的全球顶级高科技公司。“百度”二字,来自于八百年前南宋词人...</p>
                <a href="">发展简史</a>
                <a href="">公司理念</a>
                <a href="">财报数据</a>
                <a href="">产品手册</a>
                <a href="">多语言化</a>
                <a href="">更多>></a>
                <div style="border: 1px solid gray;width: 250px;height: 30px;border-left: 2px solid blue">
                    关注点:2019百度AI开发者大会
                </div>
                <a href="">
                    baike.baidu.com/
                </a>
            </div>
        </div>
        <div class="leftrow" style="margin-top: 30px">
            <a href="#">百度网盘,让美好永远陪伴</a>
            <div>
                <p>便捷分享 把文件轻松安全的分享给他人 海量存储 您可以把照片、视频、音频等上传到网盘 随时随地查看 轻松查看文档、照片、视频等文件 注册 登录 使用第三方登录 >...</p>
                <a href="">https://pan.baidu.com/</a>-
                <a href="">百度快照</a>-
                <a href="">2019条评价</a>
                <a href="">
                    baike.baidu.com/
                </a>
            </div>
        </div>
        <div class="leftrow">
            <a href="#">百度地图</a>
            <br>
            <div style="float: left;width:25%">
                <img src=".idea/baidu.jpg" width="120px" height="80px">

            </div>
            <div style="float: right;width: 75%">
                <p>浏览地图、搜索地点、查询公交驾车线路、查看实时路况,您的出行指南、生活助手。提供地铁线路图浏览,乘车方案查询,以及准确的票价和时间信息。</p>
                <a href="">https://www.baidu.com/</a>-
                <a href="">百度快照</a>-
                <a href="">7616条评价</a>
            </div>

        </div>
    </div>
    <div class="right-box">
        <div class="rightrow">
            <div style="height: 30px">
                <div style="float: left">百度高管</div>
                <div style="float: right">展开</div>
            </div>
            <div>
                <div class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div  class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div  class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="rightrow">
            <div style="height: 30px">
                <div style="float: left">百度高管</div>
                <div style="float: right">展开</div>
            </div>
            <div>
                <div class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div  class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div  class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div class="rightrow">
            <div style="height: 30px">
                <div style="float: left">百度高管</div>
                <div style="float: right">展开</div>
            </div>
            <div>
                <div class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div  class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div  class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div class="item">
                    <img src=".idea/baidu.jpg" width="100px" height="100px">
                    <a href="">马化腾</a>
                    <p>是我儿</p>
                </div>
                <div style="clear: both"></div>
            </div>
        </div>
        <div style="clear: both"></div>
        <div style="width: 60%">
            <div style="height: 30px">
                <div style="float: left">搜索热度</div>
                <div style="float: right">换一换</div>
                <div style="clear: both"></div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>1</span>
                            马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>2</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>3</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>4</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>5</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>6</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>7</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>8</span>马哥永远是你马哥</a>
                    </div>
                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>9</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
                <div class="arow">
                    <div style="float: left">
                        <a href="#"><span>10</span>马哥永远是你马哥</a>
                    </div>

                    <div style="float: right">1280万</div>
                </div>
            </div>
        </div>

    </div>


</div>

</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值