CSS 星星評分器效果 #web前端

天給大家帶來的是一個評分的效果，大家可以看我把它放大一下，當然簡單。

·首先在vivo水土容器里面放了五顆星，剛好只有五顆。我用的開發工具是hb的x開發uni up的，主要要看css樣式部分。大家可以看到vivo這里是聽特別簡單。

·下面就是css部分，首先方式是背景顏色，這大家應該都知道。整體的效果的移動，為了方便我就把它給放到了中間位置給移一下。這句話也不對框就是單選，大家可以看到每顆星都是一個輸入框，有一樣式的。

·然后進行隱藏當做單選，進行了向右的對齊，默認的顏色，這也包括這個都有。

·還有一個就是講過了，下面就是buffer尾顏色。

·最后就進行了鼠標懸浮移動，進行顏色的改變，過渡的效果。

其實就幾個，大家可以看一下就很少，但是很多地方都可以用到文章的評分、打新之類的，感興趣的可以動手自己去寫一下。

喜歡的可以轉發點贊收藏一下，想要不想寫，想要元代碼的可以找我嘮嗑進行獲取就行，因為今天先講到這里。

.圖片標簽img

2.h標題系列（有6個級別）

3.分段標簽p

4.換行標簽br

5.分割線標簽hr

6.特殊字符

<— — 小于號

>— —大于號

&nbsp；— —空格

&— —&符號

"— —雙引號

7.a標簽做超鏈接

8.a作為錨點

9.div標簽和span標簽

div是塊級元素，Span是行元素

天給大家帶來的是模板項目實戰，先給大家看一下效果圖

說明：

點擊圖片后會跳轉到對應的詳情頁面
數據：

movies = [
    {
        'id': '34532',
        'title': u'胖子行動隊',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp',
        'rating': u'7.6',
        'comment_count': 39450,
        'authors': u'寶貝兒 / 李成敏 Clara Lee / 文章 Zhang Wen'
    },
    {
        'id': '394558',
        'title': u'李茶的姑媽',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp',
        'rating': u'6.3',
        'comment_count': 38409,
        'authors': u'錢晨光 / 吳瑾蓉 / 黃才倫'
    },
    {
        'id': '26921827',
        'title': u'找到你',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp',
        'rating': u'4.3',
        'comment_count': 682,
        'authors': u'姚晨 / 馬伊琍 / 袁文康'
    },
    {
        'id': '26287884',
        'title': u'悲傷逆流成河',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'趙英博 / 任敏 / 辛云來'
    },
    {
        'id': '26287884',
        'title': u'嗝嗝老師',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    }
]

# 電視劇
tvs = [
    {
        'id': '235434',
        'title': u'如懿傳',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg',
        'rating': u'7.4',
        'comment_count': 49328,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    },
    {
        'id': '48373095',
        'title': u'奇葩說第五季',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg',
        'rating': u'8.4',
        'comment_count': 2483,
        'authors': u'伊藤沙莉 / 中川大志 / 上原實矩 / 森繪梨佳 / 櫻田通 /'
    },

    {
        'id': '27005982',
        'title': u'最親愛的你',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg',
        'rating': u'7.6',
        'comment_count': 25532,
        'authors': u'杰西·普萊蒙 / 莫莉·香儂 / 布萊德利·惠特福德 / Maude Apatow / 麥迪遜·貝蒂 /'
    },
    {
        'id': '30290917',
        'title': u'我們無法成為野獸',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg',
        'rating': u'3.7',
        'comment_count': 8493,
        'authors': u'鐘漢良 / 楊穎 / 甘婷婷 / 孫藝洲 / 亓航 /'
    },
    {
        'id': '292843',
        'title': u'奇遇人生',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg',
        'rating': u'8.2',
        'comment_count': 23456,
        'authors': u'托馬斯·哈登·丘奇 / 泰倫斯·霍華德 / 波伊德·霍布魯克 / 瑞斯·維克菲爾德 / 馬爾洛·托馬斯 /'
    }
]

說明

頁面只顯示三個
下面淺藍色為背景色。

我們先來完成首頁的功能

大家可以先自己試著做一下，然后再看船長的代碼：

先新建一個項目microPro：

app.py

# coding: utf-8

from flask import Flask
import flask

app = Flask(__name__)  # type: Flask
app.debug = True

# 電影
movies = [
    {
        'id': '34532',
        'title': u'胖子行動隊',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2526215398.webp',
        'rating': u'7.6',
        'comment_count': 39450,
        'authors': u'寶貝兒 / 李成敏 Clara Lee / 文章 Zhang Wen'
    },
    {
        'id': '394558',
        'title': u'李茶的姑媽',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2533384240.webp',
        'rating': u'6.3',
        'comment_count': 38409,
        'authors': u'錢晨光 / 吳瑾蓉 / 黃才倫'
    },
    {
        'id': '26921827',
        'title': u'找到你',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2534471408.webp',
        'rating': u'4.3',
        'comment_count': 682,
        'authors': u'姚晨 / 馬伊琍 / 袁文康'
    },
    {
        'id': '26287884',
        'title': u'悲傷逆流成河',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2529701498.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'趙英博 / 任敏 / 辛云來'
    },
    {
        'id': '26287884',
        'title': u'嗝嗝老師',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2535365481.webp',
        'rating': u'7.5',
        'comment_count': 33060,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    }
]

# 電視劇
tvs = [
    {
        'id': '235434',
        'title': u'如懿傳',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2460165077.jpg',
        'rating': u'7.4',
        'comment_count': 49328,
        'authors': u'拉妮·瑪克赫吉 / 內拉吉·卡比 / 薩欽'
    },
    {
        'id': '48373095',
        'title': u'奇葩說第五季',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2534020405.jpg',
        'rating': u'8.4',
        'comment_count': 2483,
        'authors': u'伊藤沙莉 / 中川大志 / 上原實矩 / 森繪梨佳 / 櫻田通 /'
    },

    {
        'id': '27005982',
        'title': u'最親愛的你',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2508399162.jpg',
        'rating': u'7.6',
        'comment_count': 25532,
        'authors': u'杰西·普萊蒙 / 莫莉·香儂 / 布萊德利·惠特福德 / Maude Apatow / 麥迪遜·貝蒂 /'
    },
    {
        'id': '30290917',
        'title': u'我們無法成為野獸',
        'thumbnail': u'https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2537556934.jpg',
        'rating': u'3.7',
        'comment_count': 8493,
        'authors': u'鐘漢良 / 楊穎 / 甘婷婷 / 孫藝洲 / 亓航 /'
    },
    {
        'id': '292843',
        'title': u'奇遇人生',
        'thumbnail': u'https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2533929218.jpg',
        'rating': u'8.2',
        'comment_count': 23456,
        'authors': u'托馬斯·哈登·丘奇 / 泰倫斯·霍華德 / 波伊德·霍布魯克 / 瑞斯·維克菲爾德 / 馬爾洛·托馬斯 /'
    }
]

@app.route('/')
def hello_world():
    context = {
        "movies": movies,
        "tvs": tvs
    }
    return flask.render_template('index.html', **context)

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

這里只需要渲染數據即可，即將**context傳給模板。

index.html

<!DOCTYPE html> <html lang="en"> <head>      <meta charset="UTF-8">      <title>首頁</title>      <style>         *{             padding: 0;                          margin: 0;             list-style: none;                          text-decoration: none;             font-family: "Microsoft Ya Hei";          }         .page{             width: 375px;             height: 667px;                          background: #d1fcff;          }         .page .searich-group{             padding: 14px 8px;             background: #41b357;          }         .page .searich-group .search-input{             {# 塊級元素 #}             display: block;             height: 30px;                          width: 100%;                          background: #fff;             {# 與盒子整體匹配 #}                          box-sizing: border-box;             {# 搜索框不顯示 #}             border: none;             {# 鼠標點擊搜索框后不顯示邊框 #}             outline: none;             {# 邊框圓角 #}             border-radius: 5px;          }                    .list-group{             background: #fff;             padding: 17px 18px;          }                    .list-group .group-top{             font-size: 18px;             {# 獲取浮動元素 #}             overflow: hidden;          }                    .group-top .group-title{             float: left;             color: #000;          }                    .group-top .more-btn{             float: right;          }                    .any-group{             margin-top: 20px;             overflow: hidden;          }          .any-group .item-group{             width: 100px;             float: left;             margin-right: 8px;          }                    .item-group .thumbnail{             width: 100%;             height: 140px;          }                    .item-group .item-title{             text-align: center;             margin-top: 12px;          }          .item-group .item-rating{             color: #acacac;             text-align: center;             font-size: 12px;          }                    .item-rating img{             width: 10px;             height: 10px;          }      </style> </head> <body>      <div class="page">      {# 搜索框 #}      <div class="searich-group">          <input class="search-input" type="text" placeholder="請輸入查詢條件">      </div>      {# 電影 #}      <div class="list-group">          <div class="group-top">              <span class="group-title">電影</span>              <a href="#" class="more-btn">更多</a>          </div>          <div class="any-group">              {% for movie in movies[0:3] %}                  <div class="item-group">                      <img src="{{ movie.thumbnail }}" class="thumbnail" alt="">                      <p class="item-title">{{ movie.title }}</p>                      <p class="item-rating">                      {# 確定整星個數 #}                      {% set lights = ((movie.rating|int)/2)|int %}                      {# 確定半個星個數 #}                      {% set halfs = ((movie.rating|int)%2) %}                      {# 灰色星星個數 #}                      {% set grays = 5 - lights - halfs %}                      {# 渲染高亮星星 #}                      {% for light in range(0, lights) %}                          <img src="{{ url_for('static', filename='img/rate_light.png') }}">                      {% endfor %}                      {# 渲染半高亮星星 #}                      {% for light in range(0, halfs) %}                          <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">                      {% endfor %}                      {# 渲染灰色星星 #}                      {% for light in range(0, grays) %}                          <img src="{{ url_for('static', filename='img/rate_gray.png') }}">                      {% endfor %}                      {{ movie.rating }}                      </p>                  </div>              {% endfor %}          </div>      </div>      {# 電視劇 #}               <div class="list-group">                   <div class="group-top">                       <span class="group-title">電視劇</span>                             <a href="#" class="more-btn">更多</a>                   </div>                       <div class="any-group">                        {% for tv in tvs[0:3] %}                                    <div class="item-group">                                  <img src="{{ tv.thumbnail }}" class="thumbnail" alt="">                                <p class="item-title">{{ tv.title }}</p>                                 <p class="item-rating">                                    {# 確定整星個數 #}                                    {% set lights = ((tv.rating|int)/2)|int %}                                     {# 確定半個星個數 #}                                    {% set halfs = ((tv.rating|int)%2) %}                                    {# 灰色星星個數 #}                                    {% set grays = 5 - lights - halfs %}                                    {# 渲染高亮星星 #}                                    {% for light in range(0, lights) %}                                        <img src="{{ url_for('static', filename='img/rate_light.png') }}">                                    {% endfor %}                                    {# 渲染半高亮星星 #}                                    {% for light in range(0, halfs) %}                                        <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">                                    {% endfor %}                                    {# 渲染灰色星星 #}                                    {% for light in range(0, grays) %}                                        <img src="{{ url_for('static', filename='img/rate_gray.png') }}">                                    {% endfor %}                                    {{ tv.rating }}                                </p>                            </div>                     {% endfor %}                 </div>             </div>          </div>      </body> </html>

上面代碼綜合了之前學過的知識，包括：flask for 循環、set模板賦值其余都是前端的內容，這里不做過多的闡述。

分析優化

觀察index.html中設置星星顯示數量代碼，我們發現在電影和電視劇兩部分的代碼是大體一致的，遇到重復代碼就要想到優化，這里就可以用到我們學過的宏來簡化上面的代碼：

<div class="list-group">    <div class="group-top">    <span class="group-title">電影</span>    <a href="#" class="more-btn">更多</a></div><div class="any-group">    {% for movie in movies[0:3] %}        <div class="item-group">            <img src="{{ movie.thumbnail }}" class="thumbnail" alt="">            <p class="item-title">{{ movie.title }}</p>            <p class="item-rating">                {# 確定整星個數 #}                {% set lights = ((movie.rating|int)/2)|int %}                {# 確定半個星個數 #}                {% set halfs = ((movie.rating|int)%2) %}                {# 灰色星星個數 #}                {% set grays = 5 - lights - halfs %}                {# 渲染高亮星星 #}                {% for light in range(0, lights) %}                    <img src="{{ url_for('static', filename='img/rate_light.png') }}">                {% endfor %}                {# 渲染半高亮星星 #}                {% for light in range(0, halfs) %}                    <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">                {% endfor %}                {# 渲染灰色星星 #}                {% for light in range(0, grays) %}                    <img src="{{ url_for('static', filename='img/rate_gray.png') }}">                {% endfor %}                {{ movie.rating }}            </p>        </div>    {% endfor %}</div>

將以上代碼提取出來作為宏，我們發現變化的只有兩個——電影/電視劇、movies/tvs，其余都一樣，所以我們可以將這兩個作為變量傳入：

第一次優化——宏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
            font-family: "Microsoft Ya Hei";

        }
        .page{
            width: 375px;
            height: 667px;
            background: #d1fcff;
        }
        .page .searich-group{
            padding: 14px 8px;
            background: #41b357;
        }
        .page .searich-group .search-input{
        {# 塊級元素 #}
            display: block;
            height: 30px;
            width: 100%;
            background: #fff;
        {# 與盒子整體匹配 #}
            box-sizing: border-box;
        {# 搜索框不顯示 #}
            border: none;
        {# 鼠標點擊搜索框后不顯示邊框 #}
            outline: none;
        {# 邊框圓角 #}
            border-radius: 5px;
        }
        .list-group{
            background: #fff;
            padding: 17px 18px;
        }
        .list-group .group-top{
            font-size: 18px;
        {# 獲取浮動元素 #}
            overflow: hidden;
        }
        .group-top .group-title{
            float: left;
            color: #000;
        }
        .group-top .more-btn{
            float: right;
        }
        .any-group{
            margin-top: 20px;
            overflow: hidden;
        }
        .any-group .item-group{
            width: 100px;
            float: left;
            margin-right: 8px;
        }
        .item-group .thumbnail{
            width: 100%;
            height: 140px;
        }
        .item-group .item-title{
            text-align: center;
            margin-top: 12px;
        }
        .item-group .item-rating{
            color: #acacac;
            text-align: center;
            font-size: 12px;
        }
        .item-rating img{
            width: 10px;
            height: 10px;
        }
    </style>
</head>
<body>
    {% macro listGroup(category, items) %}
        <div class="list-group">
            <div class="group-top">
                <span class="group-title">{{ category }}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="any-group">
                {% for item in items[0:3] %}
                    <div class="item-group">
                    <img src="{{ item.thumbnail }}" class="thumbnail" alt="">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-rating">
                        {# 確定整星個數 #}
                        {% set lights = ((item.rating|int)/2)|int %}
                        {# 確定半個星個數 #}
                        {% set halfs = ((item.rating|int)%2) %}
                        {# 灰色星星個數 #}
                        {% set grays = 5 - lights - halfs %}
                        {# 渲染高亮星星 #}
                        {% for light in range(0, lights) %}
                            <img src="{{ url_for('static', filename='img/rate_light.png') }}">
                        {% endfor %}
                        {# 渲染半高亮星星 #}
                        {% for light in range(0, halfs) %}
                            <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">
                        {% endfor %}
                        {# 渲染灰色星星 #}
                        {% for light in range(0, grays) %}
                            <img src="{{ url_for('static', filename='img/rate_gray.png') }}">
                        {% endfor %}

                        {{ item.rating }}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
    {% endmacro %}
    <div class="page">
        {# 搜索框 #}
        <div class="searich-group">
            <input class="search-input" type="text" placeholder="請輸入查詢條件">
        </div>
        {# 電影 #}
        {{ listGroup('電影', movies) }}
        {# 電視劇 #}
        {{ listGroup('電視劇', tvs) }}
    </div>
</body>
</html>

上面我們利用宏將首頁代碼進行了第一次優化。如果我們現在還有其他頁面，試想一下，首頁上面的搜索框

以及頁面背景

是否可以提取為公用的，其他頁面在應用到的時候通過繼承來實現呢？答案是肯定的。

所以我們現在新建base.html文件，并且將頁面布局代碼，提出，再想一下，既然名為公用也就意味著其他代碼也可以繼承這個base.html，那么頁面內容：

這部分代碼是不是就不可以再在base.html里了【答：是】，但是我們又要往base.html這里面插入上圖部分代碼，那要用什么呀？block對吧。此外，按照習慣，我們同樣將樣式style以文件的形式提取出來，此時頭部搜索樣式與內容部分樣式肯定是不能提取在一個文件里的，因為在一個文件里每次都會加載所有的代碼，這樣在head中就沒必要加載內容的樣式，所以我們把樣式分別提取成css文件，一個是搜索欄和頁面背景，命名為base.css：

*{    padding: 0;    margin: 0;    list-style: none;        text-decoration: none;        font-family: "Microsoft Ya Hei";}.page{    width: 375px;        height: 667px;    background: #d1fcff;}.page .searich-group{    padding: 14px 8px;    background: #41b357;}.page .searich-group .search-input{    /* {# 塊級元素 #} */
    display: block;    height: 30px;        width: 100%;        background: #fff;    /* {# 與盒子整體匹配 #} */
    box-sizing: border-box;    /* {# 搜索框不顯示 #} */
    border: none;    /* {# 鼠標點擊搜索框后不顯示邊框 #} */
    outline: none;    /* {# 邊框圓角 #} */
    border-radius: 5px;}

另一個是頁面樣式，命名為index_page.css：

.list-group{    background: #fff;    padding: 17px 18px;}.list-group .group-top{    font-size: 18px;    /* {# 獲取浮動元素 #} */
    overflow: hidden;}.group-top .group-title{    float: left;    color: #000;}.group-top .more-btn{    float: right;}.any-group{    margin-top: 20px;    overflow: hidden;}.any-group .item-group{    width: 100px;        float: left;        margin-right: 8px;}.item-group .thumbnail{    width: 100%;        height: 140px;}.item-group .item-title{    text-align: center;    margin-top: 12px;}.item-group .item-rating{    color: #acacac;    text-align: center;        font-size: 12px;}.item-rating img{    width: 10px;        height: 10px;}

在static文件夾下新建css文件夾，然后分別新建以上兩個文件：

綜上，我們最后base.html文件代碼應該如下：

base.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首頁</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/base.css') }}">
    {% block head %}{% endblock %}
</head>
<body>
    <div class="page">
        {# 搜索框 #}
        <div class="searich-group">
            <input class="search-input" type="text" placeholder="請輸入查詢條件">
        </div>
        {% block content %}{% endblock %}
    </div>
</body>
</html>

其中block head填充的是內容部分的樣式代碼。現在公用部分已經提取好，回到index.html，我們發現要做的工作只需要

1.繼承`base.html`

2\. 填充`block`

即可。

index.html

{% extends 'base.html' %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/index_page.css') }}">
{% endblock %}
{% block content %}
    {% macro listGroup(category, items) %}
        <div class="list-group">
            <div class="group-top">
                <span class="group-title">{{ category }}</span>
                <a href="#" class="more-btn">更多</a>
            </div>
            <div class="any-group">
                {% for item in items[0:3] %}
                    <div class="item-group">
                    <img src="{{ item.thumbnail }}" class="thumbnail" alt="">
                    <p class="item-title">{{ item.title }}</p>
                    <p class="item-rating">
                        {# 確定整星個數 #}
                        {% set lights = ((item.rating|int)/2)|int %}
                        {# 確定半個星個數 #}
                        {% set halfs = ((item.rating|int)%2) %}
                        {# 灰色星星個數 #}
                        {% set grays = 5 - lights - halfs %}
                        {# 渲染高亮星星 #}
                        {% for light in range(0, lights) %}
                            <img src="{{ url_for('static', filename='img/rate_light.png') }}">
                        {% endfor %}
                        {# 渲染半高亮星星 #}
                        {% for light in range(0, halfs) %}
                            <img src="{{ url_for('static', filename='img/rate_half.jpg') }}">
                        {% endfor %}
                        {# 渲染灰色星星 #}
                        {% for light in range(0, grays) %}
                            <img src="{{ url_for('static', filename='img/rate_gray.png') }}">
                        {% endfor %}

                        {{ item.rating }}
                    </p>
                </div>
                {% endfor %}
            </div>
        </div>
    {% endmacro %}

    {# 電影 #}
    {{ listGroup('電影', movies) }}
    {# 電視劇 #}
    {{ listGroup('電視劇', tvs) }}
{% endblock %}

執行文件，頁面顯示不變。

接著我們來完成更多的模塊，點擊更多后頁面顯示效果如上圖。

我們先來分析上面這個頁面，我們發現除了搜索欄下面的圖片區域有些變化以外，其余都是base.html的布局，所以我們首先想到可以繼承base.html，而圖片顯示規則則和我們前面定義過的宏完全一致，我們就可以導入寫好的宏。所以我們先在templates文件夾下新建moreList.html文件：

我們已經在base.html中保留了block，所以頁面新的布局只需要通過block進行插入即可：

moreList.html

{% extends 'base.html' %}
{% from 'macros/macros.html' import itemGroup %}

{% block head %}
    <link rel="stylesheet" href="{{ url_for('static', filename='css/item.css') }}">
    <style>
        .content{
            padding: 25px 10px;
        }
    </style>
{% endblock %}

{% block content %}
    <div class="content">
        {% for item in items %}
            {{ itemGroup(item) }}
        {% endfor %}
    </div>
{% endblock %}

當然，我們還要將更多加上鏈接，我們先定義函數：

@app.route('/list/<int:category>/')def itemList(category):
    # 如果category等于1：返回電影
    # 如果category等于2：返回電視劇
    # 否則返回空數組
    items = []    if category == 1:
        items = movies    elif category == 2:
        items = tvs    else:
        items = []    return flask.render_template('moreList.html', items=items)

這里我們新加了一個整型的category參數，方便我們對進入的頁面到底是電影還是電視劇進行分辨，在macros.html文件中需要加上更多的鏈接：

<a href="{{ url_for('itemList', category=category) }}" class="more-btn">更多</a>

這樣就會完成點擊更多后的頁面跳轉和跳轉后的頁面布局了。以上就是一個完整的一個項目實戰實操。

如果對接口、性能、自動化測試、面試經驗交流等感興趣的，可以關注我的頭條號，我會不定期的發放免費的資料，這些資料都是從各個技術網站搜集、整理出來的，如果你有好的學習資料可以私聊發我，我會注明出處之后分享給大家。歡迎分享，歡迎評論，歡迎轉發。需要資料的同學可以關注小編+轉發文章+私信【測試資料】

在線咨詢

上一篇：零寬空格等控制字符的作用和代碼處理
下一篇：JavaScript 初學者手冊

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

CSS 星星評分器效果 #web前端

您的項目需求