flask_小米商城

74efa5w1f2315qw41f

已于 2023-06-14 14:23:31 修改

阅读量102

点赞数

分类专栏： # python 文章标签： flask django

于 2023-04-09 17:05:56 首次发布

本文链接：https://blog.csdn.net/qq_45972323/article/details/130036534

版权

python 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

小米商城

1、小米顶部
2、二级菜单
3、推荐区域
小米商城

1、小米顶部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        body{
            margin: 0;
        }
        
        <!--  -->
        .c1{
            width:980px;
            background-color:pink;
            height:100px;
            margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
        }

        <!--  -->
        .container{
            width:1226px;
            margin: 0 auto;<!-- 0:上下居中对齐  auto：左右自动居中 -->
        }

        <!--  -->
        .header{
                color: #b0b0b0;
                background: #333;
        }
        .header .menu{
            float:left;
            color: white;
        }
        .header .account{
            float:right;
            color: white;
            height:38px;
            line-height:38px;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right:10px;
        }
    </style>
</head>


<body>

    <div class="header">
        <div class="container">
            <div class="menu">
            <a>小米商城</a>
            <a>MIUI</a>
            <a>云服务</a>
            <a>有品</a>
            <a>开放平台</a>
            </div>
            <div class="account">
            <a>登录</a>
            <a>注册</a>
            <a>消息通知</a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>

    <div class="c1">左边</div>
</body>


</html>

2、二级菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .sub-header{
            z-index: 20;
            height: 100px;
            background-color: #b0b0b0;
        }
        .sub-header .logo{
            width: 234px;
            height: 90px;
            float: left;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            hright: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            line-height:100px;
            float: left;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            width: 234px;
            height: 90px;
            float: right;
            border: 1px solid red;
        }
        .container{
            width:1128px;
            height: 100px;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <div class="sub-header">

        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/">
                    <img src="../static/logo-mi2.png">
                </a>
            </div>

            <div class="menu-list">
                <a href="https://www.mi.com/">小米手机</a>
                <a href="https://www.mi.com/">红米手机</a>
                <a href="https://www.mi.com/">电视</a>
                <a href="https://www.mi.com/">笔记本</a>
                <a href="https://www.mi.com/">平板</a>
            </div>

            <div class="search">3</div>

            <div class="clear:both"></div>
        </div>
    </div>

</body>
</html>

1、a标签是行内标签：高度、内外边距默认无效。
2、垂直方向居中。
文本+line-height
图片+边距
3、a标签默认有下划线。去除
text-decoration: none;
4、某个标签的hover（鼠标放上去后的颜色）

.c:hover{
}

a:hover{
}

3、推荐区域

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

        .item {
            height: 82px;
            width: 76px;
            text-align: center;
        }

        .item a{
            display: inline-block;
            text-decoration: none;
            font-size: 15px;
            padding-top: 18px;
            color:#fff
        }
        .item img{
            height: 24px;
            width: 24px;
            display: block;
            margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
        }
        .sd-img img {
            width: 1226px;
            height: 460px;
            display: block;
            margin: auto;
        }
        .channel {
            width: 234px;
            height: 170px;
            background-color: #5f5750;
            padding: 3px
        }
        .list-item img {
            width: 316px;
            height: 170px;
            display: block;
            margin: auto;
        }
        .left{
            float:left;
        }
    </style>

</head>
<body>

    <div calss="slider">
        <div calss="container">
            <div class="sd-img">
                <img src="../static/b.jpg">
            </div>
        </div>
    </div>


    <div calss="news" style="margin-left:118px">
        <div calss="c1">
            <div class="channel left">
                <div class="item left ">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>保障服务</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>企业团购</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>F码通道</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>米粉卡</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>以旧换新</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>话费充值</span>
                    </a>
                </div>
                <div class="clear:both"></div>
            </div>

            <div class="list-item left" style="margin-left:15px"><img src="../static/c1.jpg"></div>
            <div class="list-item left" style="margin-left:15px"><img src="../static/c2.jpg"></div>
            <div class="list-item left" style="margin-left:15px"><img src="../static/c3.jpg"></div>
            <div class="clear:both"></div>
        </div>
        </div>
    </div>


</body>
</html>

小米商城

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
    <style>
        body{
            margin: 0;
        }
        .container{
            width:1226px;
            margin: 0 auto;<!-- 0:上下居中对齐  auto：左右自动居中 -->
        }
        .c1{
            width:980px;
            background-color:pink;
            height:100px;
            margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
        }


        <!--  -->
        .header{
                color: #b0b0b0;
                background: #333;
        }
        .header .menu{
            float:left;
            color: white;
        }
        .header .account{
            float:right;
            color: white;
            height:38px;
            line-height:38px;
        }
        .header a {
            color: #b0b0b0;
            line-height: 40px;
            display: inline-block;
            font-size: 12px;
            margin-right:10px;
            text-decoration: none;
        }
        .header a:hover{
            color: #ff6700;
        }


        <!--           2、二级菜单                -->
        .sub-header{
            z-index: 20;
            height: 100px;
        }
        .sub-header .logo{
            width: 234px;
            height: 90px;
            float: left;
        }
        .sub-header .logo a{
            margin-top: 22px;
            display: inline-block;
        }
        .sub-header .logo a img{
            hright: 56px;
            width: 56px;
        }
        .sub-header .menu-list{
            line-height:100px;
            float: left;
        }
        .sub-header .menu-list a{
            display: inline-block;
            padding: 0 10px;
            color: #333;
            font-size: 16px;
            text-decoration: none;
        }
        .sub-header .menu-list a:hover{
            color: #ff6700;
        }
        .sub-header .search{
            width: 234px;
            height: 90px;
            float: right;
            border: 1px solid red;
        }



        .item {
            height: 82px;
            width: 76px;
            text-align: center;
        }

        .item a{
            display: inline-block;
            text-decoration: none;
            font-size: 15px;
            padding-top: 18px;
            color:#fff
        }
        .item a:hover{
            color: #ff6700;
        }
        .item img{
            height: 24px;
            width: 24px;
            display: block;
            margin: 0 auto; <!-- 居中对齐 auto：左右自动居中 -->
        }
        .sd-img img {
            width: 1226px;
            height: 460px;
            display: block;
            margin: auto;
        }
        .channel {
            width: 234px;
            height: 170px;
            background-color: #5f5750;
            padding: 3px
        }
        .list-item img {
            width: 316px;
            height: 170px;
            display: block;
            margin: auto;
        }
        .left{
            float:left;
        }

        .back{
            position: fixed;
            width: 60px;
            height: 60px;
            border: 1px solid red;

            right: 0;
            bottom: 0;

        }

        .app{}
        .app .download{
            position: absolute;
            height: 100px;
            width: 100px;
            display:none;
        }
        .app:hover  .download{
            display:block;
        }
    </style>
</head>


<body>

    <div class="header">
        <div class="container">
            <div class="menu">
            <a href="https://www.mi.com/">小米商城</a>
            <a href="https://www.mi.com/">MIUI</a>
            <a href="https://www.mi.com/" class="app">下载APP
                <div class="download">
                    <img src="../static/rwm.png">
                </div>
            </a>
            <a href="https://www.mi.com/">云服务</a>
            <a href="https://www.mi.com/">有品</a>
            <a href="https://www.mi.com/">开放平台</a>
            </div>
            <div class="account">
            <a href="https://www.mi.com/">登录</a>
            <a href="https://www.mi.com/">注册</a>
            <a href="https://www.mi.com/">消息通知</a>
            </div>
            <div style="clear:both"></div>
        </div>
    </div>


    <div class="sub-header">

        <div class="container">
            <div class="logo">
                <a href="https://www.mi.com/">
                    <img src="../static/logo-mi2.png">
                </a>
            </div>

            <div class="menu-list">
                <a href="https://www.mi.com/">小米手机</a>
                <a href="https://www.mi.com/">红米手机</a>
                <a href="https://www.mi.com/">电视</a>
                <a href="https://www.mi.com/">笔记本</a>
                <a href="https://www.mi.com/">平板</a>
            </div>


            <div class="clear:both"></div>
        </div>
    </div>


    <div calss="slider">
        <div calss="container">
            <div class="sd-img">
                <img src="../static/b.jpg">
            </div>
        </div>
    </div>


    <div calss="news" style="margin-left:118px">
        <div calss="c1">
            <div class="channel left">
                <div class="item left ">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>保障服务</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>企业团购</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>F码通道</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>米粉卡</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>以旧换新</span>
                    </a>
                </div>
                <div class="item left">
                    <a href="https://www.mi.com/">
                        <img src="../static/d1.png">
                        <span>话费充值</span>
                    </a>
                </div>
                <div class="clear:both"></div>
            </div>

            <div class="list-item left" style="margin-left:15px"><img src="../static/c1.jpg"></div>
            <div class="list-item left" style="margin-left:15px"><img src="../static/c2.jpg"></div>
            <div class="list-item left" style="margin-left:15px"><img src="../static/c3.jpg"></div>
            <div class="clear:both"></div>
        </div>
        </div>
    </div>


<div style="height: 1000px;background-color: white"></div>
<div class="back"></div>

</body>


</html>