tornado 相关说明

使用  Bootstrap 前端框架

可以在 bootCDN 这里找 jquery ,poppe.js 文件

美化项目

twittel 的开源项目,

在 static 目录下,创建两个文件夹 ,css, js

把下载好的文件解包,放入:

bootstrap.css

bootstrap.js

jquery.js 连接:https://cdn.bootcss.com/jquery/3.3.1/core.js

poppe.js 连接:https://cdn.bootcss.com/popper.js/1.14.7/umd/popper-utils.js

预先配置 -- HTML 模板

<meta name="viewport" content="width=device-width, initial-scale=1.0">
  • Width=device-width => 表示页面宽度是设备屏幕的宽度;确保网页能被不同屏幕分辨率的设备正确呈现;

  • user-scalable=no => 是否可以调整缩放比例(yes/no);

  • initial-scale=1.0 => 表示初始的缩放比例 ,以 1:1 的比例呈现,不会有任何的缩放;minimum-scale=0.5:最小允许的缩放比例;

  • maximum-scale=2.0:最大允许的缩放比例;

如果maximum-scale=1.0 与 user-scalable=no 一起使用。这样禁用缩放功能后,用户只能滚动屏幕,就能让您的网站看上去更像原生应用的感觉。 这样设置后,图片或元素也设置style=”width:100%”,那么图片看起来也是全屏的了。

示例代码 -- 引入文件

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="/stylesheets/bootstrap.min.css">


<!-- jQuery文件 -->
<script src="/scripts/jquery.min.js"></script>
<!-- Popper文件 -->
<script src="/scripts/popper.min.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="/scripts/bootstrap.min.js"></script>

示例代码 -- 栅格布局

<div class="container">
   <div class="row">
       <div class="col-md-8"></div>
       <div class="col-md-4"></div>
   </div>
   <div class="row">
       <div class="col-md-8 col-sm-6 col-lg-4"></div>
   </div>
</div>

处理静态文件

  • 模板配置 extra block

  • CDN 加速

相关资源

作业

潭州课堂25班:Ph201805201 tornado 项目 第七课 界面美化和静态文件处理(课堂笔记)的更多相关文章

  1. 潭州课堂25班:Ph201805201 tornado 项目 第五课 增加用户系统-用户中心(课堂笔记)

    tornado 相关说明 在 users 表中创建记录,做测试 在项目根目录下创建 test.py # -*- coding: utf-8 -*- # 斌彬电脑 # @Time : 2019/2/27 ...

  2. 潭州课堂25班:Ph201805201 tornado 项目 第八课 增加喜欢功能(课堂笔记)

    tornado 相关说明 新增一个页面,用来做图片收藏, 还要在 account.py 创建一个数据库表,记录用户喜欢的图片,哪些图片用户疯狂传奇 cd 到 项目目录下,执行数据库更新 alembic ...

  3. 潭州课堂25班:Ph201805201 tornado 项目 第四课 增加用户注册登录(课堂笔记)

    tornado 相关说明 在 handlers 中创建个 auth.py 用来做用户登录,在这文件中创建个类,并逐步完善 在 tornado 中创建 login.html 文件,是个登录页面 {% e ...

  4. 潭州课堂25班:Ph201805201 tornado 项目 第十一课 项目改进和优化(课堂笔记)

    使用  Bootstrap 前端框架 可以在 bootCDN 这里找 jquery ,poppe.js 文件 当聊天室发来一第图片链接时,自动保存图片到服务器,并保存相关信息到数据库,系统向该用户发出 ...

  5. 潭州课堂25班:Ph201805201 tornado 项目 第十课 深入应用异步和协程(课堂笔记)

    tornado 相关说明 需求: 增加 /save 的 handler,实现异步保存指定 URL 图片的功能 从网页上得到一张图片地址,由这个地址将图片保存到服务器,并将相关数据保存到数据库 impo ...

  6. 潭州课堂25班:Ph201805201 tornado 项目 第六课 用户和图片分享的集成(课堂笔记)

    tornado 相关说明 改善图片上传功能 ,生成唯一的 ID ,与路径拼接,生成 URL, 这里引用 uuid 的 python 库 在 photo.py 中创建个类,用来  辅助用户上传的图片,生 ...

  7. 潭州课堂25班:Ph201805201 tornado 项目 第三课 项目 图片上传,展示 (课堂笔记)

    tornado 相关说明 f增加图片上传功能, 在 main.py ,文件中创建个  UploadHandler 类,用来处理图片上传 上传图片之前,要先渲染这个页面,所以定个 get 方法,把这个页 ...

  8. 潭州课堂25班:Ph201805201 django 项目 第二十一课 文章主页 新闻列表页面功能 (课堂笔记)

    新闻列表页功能 1.分析 业务处理流程: 判断前端传的标签分类id是否为空,是否为整数.是否超过范围 判断前端传的当前文章页数是否为空,是否为整数.是否超过范围 请求方法:GET url定义:/new ...

  9. 潭州课堂25班:Ph201805201 django 项目 第十三课 短信验证码后台的实现 (课堂笔记)

    d 发送短信验证码之前,后台要得到三个参数 : 1,用户手机吗,, 2,用户输入的图片验证文本, 3,前台的 uuid , 在60秒内是否有发送短信的记录 只有用户输入的手机号,文本信息与 uudi ...

随机推荐

  1. Linux基本命令总结(四)

    接上篇: 16,locate 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中了 ...

  2. Dubbo2.6.5+Nacos注册中心(代替Zookeeper)

    在上一节的小栗子的基础上,只需要更改两个地方 第一个:父工程的pom依赖增加 <!-- Dubbo Nacos registry dependency --> <dependency ...

  3. 你可能不知道的 Mac 技巧 - 文本操作

    找不到 Mac 上的 Home,End,PageUp?想截图还得打开 QQ?不知道 Mac 如何剪切文件?找不到全屏窗口的按钮?找不到隐藏文件夹?不知道如何向后删除?想少用鼠标,多用键盘?…… 希望我 ...

  4. SMB(Server Message Block) Protocal Research

    catalogue . 什么是SMB . 基础SMB协议 . SMB Clients and Servers 1. 什么是SMB 全世界有很多的客户端和服务端软件实现了SMB协议,全部windows工 ...

  5. 调用腾讯、百度翻译API,实现游戏机翻通用程序

    最近玩了款steam独立游戏,没中文,只能自己汉化了,用腾讯跟百度的API实现了一个通用的机翻程序(只需要导入JSON文本), 同样,比较懒,还没写,先占坑

  6. luogu 2154 离散化+杨辉三角+树状数组

    将纵向固定,每次在横向找两个点,计算其中间墓地的贡献答案,离散化后同一行的预处理个数, 树状数组内存储C[up[i]][k] * C[down[i][k] 的值,每次更新时 down[横坐标]++; ...

  7. 2.7 if应用:猜拳游戏

    应用:猜拳游戏 <1>运行效果: <2>参考代码: import random player = input('请输入:剪刀(0) 石头(1) 布(2):') player = ...

  8. Python3:字符串的大小写和镜像字符串(swapcase()函数,chr(),ord(),translate()函数)

    题目: 请编程实现字符串的转换:1. 将"adsdsfdndsdsdfsfdsdASDSDEDSFE18754"字符串大写变小写,小写变大写:2. 并且将字符串变为镜像字符串,例如 ...

  9. js将时间戳转换为日期类型

    function getLocalTime(nS) {       var date = new Date(nS);    Y = date.getFullYear() + '年';    M = ( ...

  10. decltype类型指示符

    C++11新标准引入第二种类型说明符decltype,它的作用是选择并返回操作数的数据类型. 编译器分析表达式并得到它的类型,却不实际计算表达式的值: decltype(f()) sum = x;// ...