django学习入门系列之第三点《案例小米商城头标》

最新推荐文章于 2024-06-28 00:02:45 发布

铁匠匠匠

最新推荐文章于 2024-06-28 00:02:45 发布

阅读量1k

点赞数 13

分类专栏： django 文章标签： django 学习 python 开源前端前端框架笔记

本文链接：https://blog.csdn.net/qq_62548908/article/details/139909190

版权

django 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

文章目录

阴影
案例小米商城头标
往期回顾

阴影

设置阴影

box-shadow:水平方向垂直方向模糊距离颜色

box-shadow: 5px 5px 5px #aaa;

在这里插入图片描述

案例小米商城头标

目标样式：
在这里插入图片描述

CSS中的代码

/*使外边距等于0，即让边框与界面贴合*/
body{
        margin: 0;
}

/*控制父级边框*/
.header{
        background: #333;
      }

/*控制子级边框*/
.container{
        width: 1226px;
        margin: 0 auto;
}

/*控制子级边框下的左边菜单栏*/
.header .menu{
        float: left;
      }

/*控制子级边框下的右边菜单栏*/
.header .account{
        float: right;
        color: #b0b0b0;
}

/*控制子级边框下的菜单栏中的span标签*/
.header span{
        color: #b0b0b0;
        line-height: 40px;
        display: inline-block;
        font-size: 12px;
        margin-right: 15px;
}

Html的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米商城</title>
  <link rel="stylesheet" href="/static/command.css">
</head>


<body>

<div class="header">
    <div class="container">
        <div class="menu">
            <span>小米官网</span>
            <span>小米商城</span>
            <span>MIUI</span>
            <span>loT</span>
            <span>云服务</span>
            <span>天星数科</span>
            <span>有品</span>
            <span>小爱开放平台</span>
            <span>企业团购</span>
            <span>资质证照</span>
            <span>规则协议</span>
            <span>下载APP</span>
        </div>

        <div class="account">
            <span>登录</span>
            <span>注册</span>
            <span>消息通知</span>
            <span>购物车</span>
        </div>
        <div style="clear: both"></div>
    </div>
</div>

</body>
</html>

Python的代码

from flask import Flask,render_template

app = Flask(__name__)

# 创建了网址 /nima和函数index的对应关系
# 以后用户在浏览器上访问/nima自动运行函数
@app.route("/nima")
def index():
    """
    return "小米商城”
    Flask内部会自动打开这个文件并读取内容，返回给用户
    默认：去当前项目目录的templates文件夹中找
    """
    return render_template("text.html")


if __name__ == '__main__':
    app.run()