day04

Pupilla

于 2019-09-08 12:06:36 发布

阅读量162

点赞数

分类专栏： work 文章标签： work

本文链接：https://blog.csdn.net/Pupilla/article/details/100624075

版权

work 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container {
            height: 960px;
            position: relative;
        }

        .container > div {
            float: left;

        }

        .left-box {
            width: 538px;
            height: 34px;
            /*background-color: greenyellow;*/
            border: 1px solid #3385ff;

        }

        .right-box {
            height: 36px;
            width: 100px;
            background-color: cornflowerblue;
            text-align: center;
            line-height: 36px;
            color: #fff;

        }
        input {
            outline: none;
            border: 0;
            height: 32px;
            width: 500px;
            margin-left: 5px;
        }
        .img_pho {
            position: absolute;
            top: 5px;
            right: 880px;
        }
        .img_logo {
            width: 101px;
            height: 33px;
            float: left;
        }
        a {
            margin-left: 15px;
            text-decoration: none;
            color: #000;
        }

        .div_nav {
            width: 100%;
            position: absolute;
            left: 90px;
            top: 50px;
            background-color: cornsilk;
        }
        .news {
            border-left: 1px solid black;
            position: absolute;
            top: 75px;
            right: 0px;
            height: 700px;
            width: 750px;
        }
        .result {

            border:1px solid white;
            position: absolute;

            left: 100px;
            top: 75px;
        }

    </style>
</head>
<body>
<div class="container">
    <img src="bd_logo1.png" alt="" class="img_logo"/>
    <div class="left-box">
        <input type="text">
        <img src="photographer.JPG" alt="" class="img_pho"/>
    </div>
    <div class="right-box">百度一下</div>
    <div style="position: absolute;top: 8px; right: 8px;">
        <a href="">百度首页</a>
        <a href="">设置</a>
        <a href="">登录</a>
    </div>
    <div class="div_nav">
            <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>
            <a href="">更多>></a>
    </div>
    <div class="result">
        <span style="font-size: 10px">百度为您找到相关结果约100，000，000个</span>
        <span style="font-size: 10px;margin-left:70px">搜索工具</span><br>
        <span style="margin-top:10px">
            <span style="color:red;">百度</span>
            <span style="color: blue;">一下，你就知道</span>
        </span>
        <span style="margin-top: 4px;margin-left: 115px;">
            <img src="gw.JPG" alt="" height="16px" width="36px" />
        </span><br/>
        <span style="float: left;"><img src="lg.JPG" width="121px" height="75px"/></span>
        <span style="font-size: 5px;float: left;margin-left: 15px;margin-top:5px;">
            全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所<br>
            求。<em style="color: red;">百度</em>超过千亿的中文网页数据库，可以瞬间找到相关的搜索结<br>果。<br>
            <span><img src="dz.JPG" height="14px" width="250px"/></span>

        </span>
    </div>
    <div class="news">
        <span>百度高管</span>
        <span style="color: blue;margin-left: 300px">展开</span><br/>
        <span style="margin-top: 10px"><img src="ceo.JPG"/></span>
    </div>
</div>
</body>
</html>