• html和css制作百度界面


    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>百度</title>
    <link rel="stylesheet" href="baidu.css">
    </head>

    <body>
    <header>
    <div class="header">
    &nbsp;&nbsp;成都: 28℃&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;良&nbsp;&nbsp;53&nbsp;&nbsp;|&nbsp;&nbsp;<u>换肤</u>&nbsp;&nbsp;&nbsp;&nbsp;<u>消息</u>&nbsp;&nbsp;&nbsp;&nbsp;<u>显示频道</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>新闻</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>hao123</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>地图</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>视频</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>贴吧</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u><b>学术</b></u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u>设置</u>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
    <div class="gd"><b>&nbsp;更多产品</b></div>
    </header>
    <section>
    <div class="tp">
    <img class="tutu" src="baidu.png">
    </div>
    <div class="section">
    <div class="srk">
    <div class="baidu">百度一下</div>
    <div class="png">
    <img src="camera.png">
    </div>
    </div>
    </div>
    </section>
    <footer>
    <div class="footer">
    <div class="sy"><u>设为首页</u>&nbsp;&nbsp;©2019&nbsp;Baidu&nbsp;<u>使用百度前必读</u>&nbsp;<u>意见反馈</u>&nbsp;京ICP证030173号
    <br>京公网安备11000002000001号</div>
    </div>
    </footer>
    </body>

    </html>
     
    .header{
    background-color: #ffffff;
    color: #435862;
    font-size: 10px;
    border-bottom: 1px solid #ebebeb;
    border-left: 1px solid #ebebeb;
    border-right: 1px solid #ebebeb;
    line-height: 20px;
    }

    .tutu{
    margin: auto;
    display: block;
    padding-top: 151px;
    170px;
    height: 55px;
    }
    .tp{
    100%;
    }
    .section{
    100%;
    }
    .srk{
    margin: auto;
    display: block;
    margin-top: 30px;
    border: 1px solid #b7b7b7;
    line-height: 35px;
    530px;
    height: 29px;
    }
    .baidu{
    color: white;
    background-color: #3389ff;
    100px;
    height: 31px;
    text-align: center;
    float: right;
    margin-top: -1px;
    margin-right: -1px;
    margin-bottom: 2px;
    }
    .png{
    float: right;
    padding-right: 10px;
    padding-top: 1px;
    }
    .footer{
    100%;
    }
    .sy{
    margin: auto;
    display: block;
    margin-top: 300px;
    position: absolute;
    left: 620px;
    font-size: 10px;
    color: #b7b7b7;
    text-align: center;
    line-height: 20px;
    }
    .gd{
    line-height: 20px;
    font-size: 11px;
    color: white;
    background-color: #3389ff;
    60px;
    height: 24px;
    position: absolute;
    right: 5px;
    top: 0;
    padding-top: 5px;
    padding-left: 5px;
    }
  • 相关阅读:
    HDU 1018.Big Number-Stirling(斯特林)公式 取N阶乘近似值
    牛客网 Wannafly挑战赛9 C.列一列-sscanf()函数
    牛客网 Wannafly挑战赛9 A.找一找-数据处理
    Codeforces 919 C. Seat Arrangements
    Codeforces Round #374 (Div. 2) D. Maxim and Array 线段树+贪心
    Codeforces Round #283 (Div. 2) A ,B ,C 暴力,暴力,暴力
    Codeforces Round #283 (Div. 2) E. Distributing Parts 贪心+set二分
    Codeforces Round #280 (Div. 2) E. Vanya and Field 数学
    Codeforces Round #280 (Div. 2) D. Vanya and Computer Game 数学
    Codeforces Round #280 (Div. 2) A , B , C
  • 原文地址:https://www.cnblogs.com/yeyuyuni/p/11242749.html
Copyright © 2020-2023  润新知