Python web案例

来源：华佗小知识

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .sub-header{
        height: 100px;
        background-color: pink;
        }
        body{
        margin:0;
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="logo"></div>
            <div class="menu-list"></div>
            <div class="search"></div>
        </div>

    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .sub-header{
            height: 100px;
            background-color: pink;
        }
            body{
            margin:0;
        }
        .container{
            width: 1128px;

            margin:0 auto;
            border-left: 1px solid red
            border-right: 1px solid red
<!--        background-color: red;-->
        }
    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="logo">1</div>
            <div class="menu-list">2</div>
            <div class="search">3</div>
        </div>

    </div>

</body>
</html>

方法1 只写一处即可

方法2 ：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .sub-header{
            height: 100px;
            background-color: pink;
        }
        body{
            margin:0;
        }
        .container{
            width: 1128px;

            margin:0 auto;

        }
        .sub-header .ht{

            height: 45px;
        }
        .sub-header .logo{
            width: 100px;

            float: left;
            border: 1px solid red;
        }
        .sub-header .menu-list{
            float: left;
            width: 100px;

        }
        .sub-header .search{
            width: 100px;

            float: right;
        }

    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">1</div>
            <div class="ht menu-list">2</div>
            <div class="ht search">3</div>
        </div>

    </div>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .sub-header{
            height: 100px;
            background-color: pink;
        }
        body{
            margin:0;
        }
        .container{
            width: 1128px;

            margin:0 auto;

        }
        .sub-header .ht{

            height: 98px;
        }
        .sub-header .logo{
            width: 234px;

            float: left;
            border: 1px solid red;
        }
        .sub-header .menu-list{
            float: left;
            width: 100px;

        }
        .sub-header .search{
            width: 100px;

            float: right;
        }


    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width: 56px;" alt="">
                </a>
            </div>
            <div class="ht menu-list">2</div>
            <div class="ht search">3</div>
        </div>

    </div>

</body>
</html>

图片出不来，不知道为什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .sub-header{
            height: 100px;
            background-color: pink;
        }
        body{
            margin:0;
        }
        .container{
            width: 1128px;

            margin:0 auto;

        }
        .sub-header .ht{

            height: 98px;
        }
        .sub-header .logo{
            width: 234px;

            float: left;

        }
        .sub-header .menu-list{
            float: left;

            line-height: 100px;
            border: 1px solid red;

        }
        .sub-header .menu-list a{
            display: inline-block;

            padding: 0 20px;
            color: #333;
            font-size: 16px;

            text-decoration: none;
        }
        .sub-header .search{
            width: 100px;

            float: right;
        }


    </style>
</head>
<body>
    <div class="sub-header">
        <div class="container">
            <div class="ht logo">
                <a href="https://www.mi.com/" style="margin-top: 22px;display: inline-block">
                    <img src="images/logo-mi2.png" style="height: 56px; width: 56px;" alt="">
                </a>
            </div>
            <div class="ht menu-list">
                <a href="https://www.mi.com/">小米手机</a>
                <a href="https://www.mi.com/">电视</a>
                <a href="https://www.mi.com/">笔记本</a>
            </div>
            <div class="ht search">3</div>
        </div>

    </div>

</body>
</html>

完

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文