2. 程式人生 > >Flask大標題下設定小標題（再加一個線）【html Css】

Flask大標題下設定小標題（再加一個線）【html Css】

阿新 • • 發佈：2018-12-13

簡述

參考：
https://getbootstrap.com/docs/4.1/content/typography/
https://blog.csdn.net/think2me/article/details/7419028

在這裡插入圖片描述

核心程式碼

		<h1>
            Fancy display heading
            <small class="text-muted">With faded secondary text</small>
        </h1>
        <div style
 
="height:1px; background:#E0E0E0;"></div>

完全程式碼

  • templates/index.html
<!doctype html>
<html lang="zh">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"
 
>

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
          integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title
 
>
</head>
<body>
<div class="row">
    <div class="col-md-12 col-sm-12 col-xs-12">
        <h3>
            Fancy display heading
            <small class="text-muted">With faded secondary text</small>
        </h3>
        <div style="height:1px; background:#E0E0E0;"></div>
        <h2>
            Fancy display heading
            <small class="text-muted">With faded secondary text</small>
        </h2>
        <div style="height:1px; background:#E0E0E0;"></div>
        <h1>
            Fancy display heading
            <small class="text-muted">With faded secondary text</small>
        </h1>
        <div style="height:1px; background:#E0E0E0;"></div>
    </div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
        integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
        integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
        crossorigin="anonymous"></script>
</body>
</html>

from flask import Flask, render_template

app = Flask(__name__)


@app.route('/')
def hello_world():
    return render_template('index.html')


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

效果圖就是簡述上的。

相關推薦

Flask大標題下設定小標題（再加一個線）【html Css】

簡述 參考： https://getbootstrap.com/docs/4.1/content/typography/ https://blog.csdn.net/think2me/article/details/7419028 核心程式碼 <

Spring Cloud（八）：配置中心（服務化與高可用）【Finchley 版】

outer get btn discovery ofo DC master 配置 兩個 Spring Cloud（八）：配置中心（服務化與高可用）【Finchley 版】 發表於 2018-04-19 | 更新於 2018-04-26 | 本文接之前的《Spring

洛谷 P1251 餐巾計劃問題（線性規劃網絡優化）【費用流】

spfa n) blank ini 網絡優化 DC for sca .org （題外話：心塞...大部分時間都在debug，拆點忘記加N，總邊數算錯，數據類型標錯，字母寫錯......） 題目鏈接：https://www.luogu.org/problemnew/show

【HTML+CSS】日歷備忘錄（靜態）

caption ica -s round width 實現 height html+css enter 需求：實現日歷備忘錄（靜態） <!DOCTYPE html> <html> <head> <meta charset=

【劍指offer】陣列中的逆序對（校正書上錯誤）【歸併排序】

題目描述 在陣列中的兩個數字，如果前面一個數字大於後面的數字，則這兩個數字組成一個逆序對。輸入一個數組,求出這個陣列中的逆序對的總數P。並將P對1000000007取模的結果輸出。 即輸出P%1000000007 題目保證輸入的陣列中沒有的相同的數字 資料範圍：

SpringCloud進擊 | 五淺出：配置中心（Git配置與更新）【Finchley版本】

1.前言 在本文，我們將構建一個基於 Git 版儲存的分散式配置中心，並對客戶端進行改造，其能夠從遠端配置中心獲取配置資訊，並繫結到程式碼中的 Spring Cloud 配置中心模組。 Spring Cloud Config Spring Cloud 團隊建立的一個

SpringCloud進擊 | 七淺出：配置中心（Git配置與更新）【Finchley版本】

1.前言 在本文，我們將構建一個基於 Git 版儲存的分散式配置中心，並對客戶端進行改造，其能夠從遠端配置中心獲取配置資訊，並繫結到程式碼中的 Spring Cloud Config 配置中心模組。 Spring Cloud Config Spring Cloud

APP內開啟另一個APP（URL Scheme與openURL）【iOS開發】

目標 平常我們做iOS開發，會經常遇到開啟其他的APP的功能。本篇文章講的就是開啟別人的APP的一些知識。我們的目標是： 開啟別人的APP讓別人開啟我們的APPiOS9的適配問題使用URL Schemes傳遞資料 準備工作 建立一個名為OpenApp的工作空間，用來存放

確認過眼神，這三種潛力幣你值得pick（上篇之Chainlink）【說幣】

近日，Youtube上最具權威性的虛擬貨幣分析節目Datadash釋出了一段視訊，在視訊中指出了“最被低估的三種加密貨幣”，引起了熊小貓的注意。熊小貓去研究了一番，覺得這幾個專案確實很有特點，值得關注。這裡與大家一起分享。因為篇幅較長，分為上下兩篇連續推送，敬請期待。一、Ch

【前端】【html/css】前端學習之路（五）：標籤顯示模式（display）

標籤的型別(顯示模式)    HTML標籤一般分為塊標籤和行內標籤兩種型別，它們也稱塊元素和行內元素。1.塊級元素（block-level）    每個塊元素通常都會獨自佔據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用於網頁佈局和網頁結構的搭建。總而言之就是比較霸

【前端】【html/css】前端學習之路（十四）（製作京東專案心得）（完）

1.事前準備 （1）工具使用的是 Webstrom的最新版 和  Fireworks 8 作為切圖的輔助工具。 （2）準備CSS Reset類庫（normalize.css），為跨瀏覽器相容做準備（也可以直接使用京東網站的初始化）  normalize.css

iOS 大批量彈幕小論（粒子彈幕）

etime 朋友 ios 模式 任務 監測 strong nts tab 一、現狀 如今直播類、視頻播放器等基本都有彈幕模式。 為了保持性能和內存可控，基本是在初始化的時候生成一個Pool（Pool的容量是設定好的）, 也就是利用重用機制（可以想象一下UITableView

yxy和志願者小姐姐番外篇之大寶寶123追番記（補題，淘汰賽）

1264: yxy和志願者小姐姐番外篇之大寶寶123追番記                                  

JS 求一組陣列中的最大值，最小值（不包括0）。

<body> <script type="text/javascript"> var arr=[]; do{ var num=prompt("請輸入一個整數：") if(num!=0){

windows下自動更改IP的小工具（bat批處理檔案）

每次上線，都要先上灰度環境再上到正式環境。在上到灰度環境時，訪問灰度環境通過自動獲取IP和更改指定dns來實現。具體如何實現，大家可自行百度。 新建一個文字文件，將其後綴改為bat，開啟該檔案，拷貝一下程式碼： @echo off :start echo ============請輸

【HDU3530】【單調佇列（雙）】Subsequence 【長度為n的數列，求最長子區間的長度，使得區間的最大值與最小值的差滿足一個範圍】

描述： Subsequence Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submission(s): 6143    Accep

大資料下的Distinct Count（二）：Bitmap篇

在前一篇中介紹了使用API做Distinct Count，但是精確計算的API都較慢，那有沒有能更快的優化解決方案呢？ 1. Bitmap介紹 《程式設計珠璣》上是這樣介紹bitmap的： Bitmap是一個十分有用的資料結構。所謂的Bitmap就是用一個bit位來標記某個元素對應的Value，而

Android關於小米相簿懸浮標題欄、凍結標題欄的實現方式（巢狀型RecycleView）

效果圖如下： 網上完全查詢不到關於凍結標題欄的實現方式，經過幾天的摸索嘗試，終於實現了這種效果；當然在過程中遇到了很多問題拖延了進度，關鍵是沒有摸清思路。 本文的實現方式已經盡了本人最大的能力進行簡化，並解決了快速滑動造成的錯亂問題，具體思路如下：

線段樹（區間和，最大值，最小值，區間動態更新查詢）

//=========================================== //segment tree //final version //by kevin_samuel(fenice) //本模板為轉載模板，後面的註釋和主函式的驗證為Alei新增 #in

linux下Nginx配置檔案(nginx.conf)配置設定詳解（windows用phpstudy整合）

linux備份nginx.conf檔案舉例: cp /usr/local/nginx/nginx.conf /usr/local/nginx/nginx.conf-20171111(日期) 在程序列表裡 面找master程序,它的編號就是主程序號。 ps -ef | g