秤砣小组钟—day04

最新推荐文章于 2019-09-22 20:42:46 发布

@白少爷

最新推荐文章于 2019-09-22 20:42:46 发布

阅读量118

点赞数

本文链接：https://blog.csdn.net/ZMY_King/article/details/100628656

版权

@工商web实战开发软件1722秤砣小组钟—day04

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>day04</title>
<style>
    #head {
         width: 100%;
         height: 40px;
     }
    #head2 {
        width: 100%;
        height: 40px;
        background: whitesmoke;
    }
    #left2{
        margin-left: 8%;
        color: black;
        line-height: 37px;
    }
    #left{
        color: red;
        float: left;
    }
    #right{
        color: black;
        line-height: 37px;
    }
    #left-box {
        width: 538px;
        height: 35px;
        border: 1px solid #b8b8b8;
        float: left;
        position: relative;
    }
    #right-box {
        width: 100px;
        height: 37px;
        background-color: #3385ff;
        float: left;
        text-align: center;
        color: #fff;
        line-height: 37px;
    }
    input {
        padding: 0;
        border: 0;
        width: 501px;
        height: 35px;
        margin-left: 5px;
        outline: none;
    }
    #pic {
        position: absolute;
        right: 10px;
        top: 0px;
    }
    #right-one{
        width: 50%;
        height: 42px;
    }
    #right-two{
        width: 50%;
        height: 40px;
        text-align: right;
        margin-left: 40%;
        line-height: 15px;
    }
    #right-three{
        width: 50%;
        height: 40px;
        float: left;
        color: #b8b8b8;
        margin-left: 16%;
        line-height: 5px;
    }
    #right-four{
        width: 50%;
        margin-left: 6%;
        height: 1000px;
        float: left;
    }
    #right-five{
        width: 50%;
        margin-left: 4%;
        color: dodgerblue;
    }
    #right-six{
        width: 10%;
        margin-left: 4%;
        float: left;
    }
    #right-seven{
        width: 50%;
        margin-left: 25%;
        float: left;

    }
    #right-eight{
        width: 50%;
        height: 100px;
    }
</style>
</head>
<body>
<div id="head" style="">
    <div id="left">
        <img src="img/baiduix.PNG">
    </div>
    <div id="left-box">
        <input type="text">
        <img src="相机.png" alt="" style="margin-top: 10px;" id="pic">
    </div>
    <div id="right-box">
        百度一下
    </div>
    <div id="right" style="text-align: right;">
        <u><a>百度首页</a></u>
         &nbsp;&nbsp;<u><a>消息</a></u>
         &nbsp;&nbsp;<u><a>设置</a></u>
         &nbsp;&nbsp;<u><a>ZMY_King</a></u>
    </div>
    <div style="clear: both;"></div>
</div>
<hr>

<div id="head2">
    <div id="left2">
        <u><a>网页</a></u>
        &nbsp;&nbsp;<a>资讯</a>
        &nbsp;&nbsp;<a>视频</a>
        &nbsp;&nbsp;<a>图片</a>
        &nbsp;&nbsp;<a>知道</a>
        &nbsp;&nbsp;<a>文库</a>
        &nbsp;&nbsp;<a>贴吧</a>
        &nbsp;&nbsp;<a>采购</a>
        &nbsp;&nbsp;<a>地图</a>
        &nbsp;&nbsp;<a>更多>></a>
    </div>
</div>
<div id="right-one">
    <div id="right-three">
        <h5>百度为您找到相关结果约100,000,000个</h5>
    </div>
    <div id="right-two">
        <img src="img/搜索.PNG">
    </div>
</div>
<div id="right-four">
    <div id="right-five">
        <u><h4>百度一下，你就知道     <img src="img/百度官网.PNG"></h4></u>
    </div>
    <div id="right-eight">
    <div id="right-six">
        <img src="img/百度1.PNG">
    </div>
    <div id="right-seven">
     <h5>全球最大的中文搜索引擎、致力于让网民更便捷地获取信息，找到所
        求。百度超过千亿的中文网页数据库，可以瞬间找到相关的搜索结
        果。
        https://wwww.baidu.com/  V3-百度快照-7616条评价
    </h5>
    </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述