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

本文主要是介绍django学习入门系列之第三点《案例小米商城头标》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

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

阴影

设置阴影

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

文件结构

在这里插入图片描述

往期回顾

1.【快速开发网站】
2.【浏览器能识别的标签1】
3.【浏览器能识别的标签2】
4.【浏览器能识别的标签3】
5.【浏览器能识别的标签4】
6.【案例1：用户注册】
7.【案例2：用户注册改进】
8.【快速了解 CSS】
9.【常用选择器概念讲解】
10.【CSS基础样式介绍1】
11.【CSS基础样式介绍2】
12.【CSS基础样式介绍3】

这篇关于django学习入门系列之第三点《案例小米商城头标》的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！