学习flask框架一段时间了，后续进行盗版豆瓣评分网页的开发功能 包含的内容1.css文件传参数表示网页结构 2.静态图片的加载（不再采用静态图片，网络图片被采用） 3.HTML：宏使用 4.include set 5.模板的继承 6.参数传递 等等 python文件内主要定义了相关参数 HTML文件中主要定义了网页的具体内容，css定义了网页的相关渲染，js记录了网页中的相关操作，可以通过HTML调用相关的图片，进行渲染，图片的来源可以来自本地或者网上图片 初版程序：显示单张图片和图片下的星星： （在完成该任务的时候，出现了问题：显示的图片无法缩小，总是以原画的方式显示，经过确认才发现我用的不是chrome,这个就很尴尬，写的是双核浏览器，图标和Chrome极其相似，结果不是这样的浏览器，在替换该浏览器后效果不错） 注：初版程序，以下可以进行其他其他方面的优化 程序如下： python程序：
from flask import Flask,render_template app = Flask(__name__) @app.route('/') def hello(): return render_template('index2.html') if __name__ == '__main__': app.run(debug=True)HTML程序(index2.html)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}"> <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}"> </head> <body> <h1>豆瓣小程序评分</h1> <div class="search-group"> <input type="text" class="search-input"> </div> <div class="item-list-group"> <div class="item-list-top"> <span class="module-title">电影</span> <a href="#" class="more-btn">更多</a> </div> <div class="list-group"> <img src = "https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg" alt="" class="thumbnail"> <p class="item-title">全员单恋</p> <p class="item-rating"> {% set rating=7.8 %} <!-- rating = 7.8--> {% set lights=((rating|int)/2)|int %} {% set halflight=(rating|int)%2 %} {% set grays=5-lights-halflight %} {% for light in range(0, lights) %} <img src="{{url_for('static', filename='images/rate_light.png')}}" alt=""> {% endfor %} {% for half in range(0, halflight) %} <img src="{{url_for('static', filename='images/rate_half.jpg')}}" alt=""> {% endfor %} {% for gray in range(0, grays) %} <img src="{{url_for('static', filename='images/rate_gray.png')}}" alt=""> {% endfor %} {{ rating }} </p> </div> </div> </body> </html>css: base.css:
*{ margin: 0; padding: 0; list-style: none; text-decoration: none; } .container{ width: 375px; height: 600px; background: pink; } .search-group{ padding: 14px 8px; background: #41be57; } .search-group .search-input{ background: #fff; display: block; width: 100%; height: 30px; border-radius: 5px; outline: none; border: none; }item.css
.item-list-group .item-list-top{ overflow: hidden; padding: 10px; } .item-list-top .module-title{ float: left; } .item-list-top .more-btn{ float: right; } .list-group{ overflow: hidden; padding: 0 10px; } .item-group{ float: left; margin-right: 10px; } .item-group .thumbnail{ display: block; width: 100px; height: 150px; } .item-group .item-title{ font-size: 12px; text-align: center; } .item-group .item-rating{ font-size: 12px; text-align: center; } .item-rating img{ width: 10px; height: 10px; }运行结果：
其中主要的工作在html文件中，分析如下： 定义输入框
<div class="search-group"> <input type="text" class="search-input"> </div>导入图片与title
<img src = "https://img1.doubanio.com/view/movie_poster_cover/lpst/public/p2367986708.jpg" alt="" class="thumbnail"> <p class="item-title">全员单恋</p>设置星星：
<p class="item-rating"> {% set rating=7.8 %} # 设置分数 # <!-- rating = 7.8--> {% set lights=((rating|int)/2)|int %} # 星个数 # {% set halflight=(rating|int)%2 %} {% set grays=5-lights-halflight %} {% for light in range(0, lights) %} <img src="{{url_for('static', filename='images/rate_light.png')}}" alt=""> {% endfor %} # 显示星星 # {% for half in range(0, halflight) %} <img src="{{url_for('static', filename='images/rate_half.jpg')}}" alt=""> {% endfor %} {% for gray in range(0, grays) %} <img src="{{url_for('static', filename='images/rate_gray.png')}}" alt=""> {% endfor %} {{ rating }} </p>