2. 程式人生 > 實用技巧 >CF702F T-Shirts(平衡樹)

CF702F T-Shirts(平衡樹)

阿新 • • 發佈：2020-07-13

CSS資料樣式

表格

定製表格

　　我們除了可以使用<table>標籤進行繪製表格，在css3中display也支援進行表格的樣式繪製。

樣式規則說明
table 對應 table
table-caption 對應 caption
table-row 對錶 tr
table-cell 對於th或td
table-row-group 對應 tbody
table-header-group 對應 thead
table-footer-group 對應 tfoot 

<!DOCTYPE html>
<html lang
 
="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css學習.css">
</head>
<body>
    <article>
        <nav>一份表格</
 
nav>
        <section>
            <ul>
                <li>姓名</li>
                <li>性別</li>
                <li>年齡</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>小明</li
 
>
                <li>男</li>
                <li>18</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>小紅</li>
                <li>女</li>
                <li>19</li>
            </ul>
        </section>
        <section>
            <ul>
                <li>小姜</li>
                <li>女</li>
                <li>21</li>
            </ul>
        </section>
    </article>
</body>
</html>
元素表單HTML 

body article {
  display: table;
}
body article nav {
  display: table-caption;
  font-weight: bolder;
  
  text-align: center;
  vertical-align: middle;
}
body article section:nth-of-type(1) {
  display: table-header-group;
}
body article section:nth-of-type(2) {
  display: table-row-group;
  
}
body article section:nth-of-type(3) {
  display: table-row-group;
}
body article section:nth-of-type(4) {
  display: table-footer-group;
  
}
body article section ul {
  display: table-row;
}
body article section ul li {
  display: table-cell;
  border: solid 1px #ddd;
  padding: 10px;
}
元素表單CSS

表格標題

　　我們可以使用caption-side設定表格標題的位置，值可以是top或者bottom。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
​
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
表格標題位置

內容對齊

　　表格中內容對齊方式可以使用text-aligen以及vertical-aligen來進行控制。

　　水平對齊text-aligent。

值描述
left 左對齊
right 右對齊
center 居中對齊

　　垂直對齊vertical-aligen。

屬性說明
top 頂對齊
middle 垂直居中
bottom 底部對齊 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
        }
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
表格內容對齊

顏色設定

　　我們可以為<table>中的任何HTML元素進行顏色設定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花兒</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癩子</td>
                <td>男</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
顏色設定

邊框間距

　　我們可以使用border-spacing來設定邊框的間距。兩個值，一個對應上下，一個對應左右，單位可以是px，em，rem，%等等。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        
        table{
            border-spacing: 5px 10px;
        }
​
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花兒</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癩子</td>
                <td>男</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
邊框間距

邊框合併

　　我們可以看一下上面圖的表格，他們的表格邊框都是由間距的。如果我們想把它設定為單線的可以使用border-collapse: collapse;進行設定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
​
        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
        }
​
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花兒</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癩子</td>
                <td>男</td>
                <td>15</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
邊框合併

隱藏單元格

　　如果想隱藏沒有內容的單元格，可使用empty-cells: hide;進行設定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
​
        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }
​
        table>caption:first-child{
            caption-side: bottom;
            border: solid 1px #ddd;
        }
        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
        }
        table tbody tr:nth-child(odd){
            
        }
        
    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花兒</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癩子</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>未知</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
隱藏單元格

無邊框表格

　　無邊框表格需要用到之前結合的知識，使用很多選擇器進行設定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }

        table>caption:first-child{
            caption-side: top;
            border: solid 1px #ddd;
            border-left: unset;
            border-right: unset;
        }


        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
            vertical-align: middle;
            text-align: center;
        }

        table tbody tr:nth-child(odd){
            background-color: #ddd;
        }
        
        table,table tr th,table tr td:last-child,table tr td:first-child{
            border-left: unset;
            border-right: unset;
        }

    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花兒</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癩子</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>未知</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
無邊框表格

資料表格

　　我們可以利用hover對<tr>進行一些樣式上的調整。比如變色，滑鼠變小手等等，讓使用者知道自己目前滑鼠所在的表格區域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>

        table{
            border-spacing: 5px 10px;
            border-collapse: collapse;
            empty-cells: hide;
        }

        table>caption:first-child{
            caption-side: top;
            border: solid 1px #ddd;
        }


        table tr td{
            /* 垂直與水平居中 */
            vertical-align: middle;
            text-align: center;
            vertical-align: middle;
            text-align: center;
        }

        
        tr:hover{
            /* 滑鼠停留留變色 */
            background-color: #ddd;
            /* 小手 */
            cursor: pointer;
        }

    </style>
</head>
<body>
    <table border="1px">
        <caption>一份表格</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性別</th>
                <th>年齡</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>男</td>
                <td>18</td>
            </tr>
            <tr>
                <td>小紅</td>
                <td>女</td>
                <td>17</td>
            </tr>
            <tr>
                <td>小花兒</td>
                <td>女</td>
                <td>13</td>
            </tr>
            <tr>
                <td>小癩子</td>
                <td>男</td>
                <td>15</td>
            </tr>
            <tr>
                <td>未知</td>
                <td></td>
                <td></td>
            </tr>
        </tbody>
    </table>
</body>
</html>
資料表格

列表

列表符號

　　預設的<ul>標籤都有一個小黑點，我們可以對<ul>進行list-style-type的設定，讓每個<li>都取消掉（繼承性）。也可以自定義我們的列表符號。

值描述
none 無標記。
disc 預設。標記是實心圓。
circle 標記是空心圓。
square 標記是實心方塊。
decimal 標記是數字。
decimal-leading-zero 0開頭的數字標記。(01, 02, 03, 等。)
lower-roman 小寫羅馬數字(i, ii, iii, iv, v, 等。)
upper-roman 大寫羅馬數字(I, II, III, IV, V, 等。)
lower-alpha 小寫英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha 大寫英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek 小寫希臘字母(alpha, beta, gamma, 等。)
lower-latin 小寫拉丁字母(a, b, c, d, e, 等。)
upper-latin 大寫拉丁字母(A, B, C, D, E, 等。)
hebrew 傳統的希伯來編號方式
armenian 傳統的亞美尼亞編號方式
georgian 傳統的喬治亞編號方式(an, ban, gan, 等。)
cjk-ideographic 簡單的表意數字
hiragana 標記是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana 標記是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha 標記是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha 標記是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） 

ul{
    list-style-type: none;
}

　　自定義列表符號可以使用list-style-image。可以是圖片，或者漸變色等等。

ul{
    /* 線性漸變 */
    list-style-image:linear-gradient(45deg, red, black);
}

符號位置

　　我們可以使用list-style-position來定義列表符號的位置。

選項說明
inside 內部
outside 外部 

ul{
    list-style-position: inside;
}

ul{
    list-style-position: outside;
}

組合定義

　　我們可以使用list-style來一次性指定list-style-tpye與list-style-position。

ul{
    list-style:decimal outside;
}

背景符號

　　我們可以為<li>來增加一個背景，然後將它調小作為列表樣式符號。

ul li{
    background: url(huaji.png) no-repeat 0 6px;
    background-size: 10px 10px;
    list-style-position: inside;
    list-style: none;
    /* 文字縮排 */
    text-indent: 1em;

}

　　我們可以為<li>增加多背景，一個背景做列表樣式符號，一個背景做標籤背景。

ul li{

    background: url(./huaji.png) no-repeat 0 6px,url(./bj.jpg) no-repeat;
    background-size: 10px 10px,100%;
    list-style-position: inside;
    list-style: none;
    /* 文字縮排 */
    text-indent: 1em;
    margin-bottom: 10px;

}

追加內容

基本使用

　　我們可以使用偽元素選擇器::after向後追加內容，以及::before向前追加內容。

　　內容放在content中，我們可以將content增加的內容當做一個元素去看待。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }

        a::after{
            content: "<--你就知道";
            color: blue;
        }
        a::before{
            content: "請點選-->";
            color: blue;
        }

    </style>
</head>
<body>
    <a href="http://www.baidu.com/">百度一下</a>
</body>
</html>
基本使用

提取屬性

　　我們可以使用attr()將屬性提取出來。當滑鼠放到連線上時，給予使用者一些提示資訊，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        a{
            text-decoration: none;
        }

        a:hover::before{
            content: "您將訪問:"attr(href);
            background-color: #555;
            color: white;
            position: absolute;
            top: 30px;
            padding: 5px 2px;
            border-radius: 10px;
        }

    </style>
</head>
<body>
    <a href="http://www.baidu.com/">百度一下</a>
</body>
</html>
提取屬性

自定義輸入框

　　原本的表單輸入框實在太醜了，我們可以給他做一些改變。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            padding: 80px;
        }

        .field {
            position: relative;
        }

        input {
            border: none;
            /* 去除輪廓線 */
            outline: none;
            text-align: center;
            vertical-align: middle;
        }

        .field::after {
            content: '';
            /* content的背景為漸變，高度為1px */
            background: linear-gradient(to right, white, red, green, blue, white);
            height: 30px;
            position: relative;
            /* 與輸入框的大小相同 */
            width: 171px;
            height: 1px;
            display: block;
            left: 0px;
            right: 0px;
        }

        .field:hover::before {
            /* data開頭的屬性都是讓我們提取用的....這是一種規範。 */
            content: attr(data-placeholder);
            position: absolute;
            top: -20px;
            left: 0px;
            color: #555;
            font-size: 12px;
        }
</style>
</head>
<body>
    <div class="field" data-placeholder="請輸入少於100字的標題">
        <input type="text" id="name">
    </div>
</body>
</html>
自定義輸入框

相關推薦

CF702F T-Shirts(平衡樹)

CF702F T-Shirts(平衡樹) 題目大意 有 \\(n\\) 種T恤，每種有價格 \\(c_i\\) 和品質 \\(q_i\\)。

CF702F T-Shirts

題面 英文題面 題意： 題解：考慮列舉每個物品，用資料結構來維護人。先將物品按\\(v_i\\)遞減排序，用平衡樹來維護人。設當前列舉到了物品\\(i\\)，那麼所有平衡樹內權值大於等於\\(v_i\\)的節點的權值都要減去\\(

LibreOJ104 - 普通平衡樹 （平衡樹）

Description 這是一道模板題。 您需要寫一種資料結構（可參考題目標題），來維護一個序列，其中需要提供以下操作：

14.非平衡樹的雙旋（左右雙旋和右左雙旋）程式碼實現（JavaScript版）

<!DOCTYPE html> <html lang=\"en\"> <head> <meta charset=\"UTF-8\"> <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">

可持久化平衡樹

資料結構 可持久化平衡樹 自己開的可持久化的坑，自己含著淚也要補完≡(▔﹏▔)≡

文藝平衡樹

#include<iostream> #include<cstring> #include<algorithm> #include<cmath> #include<cstdlib>

『資料結構總結3：平衡樹』

Preface 本文只介紹\\(\\mathrm{Binary\\ Search\\ Tree}\\)和演算法競賽中常用的兩種平衡樹\\(\\mathrm{Split\\ Merge\\ Treap}\\)，\\(\\mathrm{Splay}\\).

普通平衡樹學習筆記之Splay演演算法

前言 今天不容易有一天的自由學習時間，當然要用來“學習”。在此記錄一下今天學到的最基礎的平衡樹。

javaScript實現平衡樹

const Compare ={ LESS_THAN:-1, BIGGER_THAN:1, EQUALS:0 } class Node{ constructor(key){ this.key = key; this.left = null;

LG P1975 【[國家集訓隊]排隊】樹狀陣列套平衡樹

這道題最經典的做法就是樹狀陣列套平衡樹了，做法與動態逆序對比較像 考慮交換兩個數之後產生的貢獻：

平衡樹學習

Splay： 　　像BST（二叉搜尋樹）一樣插入查詢，可以改變樹的形狀，可以區間翻轉，可以實現動態樹，不可持久化。

平衡樹之Treap

二叉搜尋樹 性質：一個節點x左子樹所有點的關鍵字都比x的關鍵字小，右子樹所有點的關鍵字都比x的關鍵字大

[模板] 平衡樹之Treap

正在大力修改程式碼, 先放能AC但顯然讓人迷惑的程式碼 Treap // Treap // 注意我們每一個會影響 Treap 結構的操作完成後都需要更新

【樹狀陣列·進階篇】樹狀陣列實現平衡樹（樹狀陣列上二分）

\\(Preface\\) 餘未曾想到，樹狀陣列居然是一個這麼高階的東西。 從未想到過樹狀陣列上還可以二分，從未想到過樹狀陣列還能實現平衡樹的功能。

P3369 普通平衡樹（Spaly做法）

您需要寫一種資料結構（可參考題目標題），來維護一些數，其中需要提供以下操作：

【模板】文藝平衡樹-BZOJ3223

Description 　　您需要寫一種資料結構（可參考題目標題），來維護一個有序數列，其中需要提供以下操作：翻轉一個區間，例如原有序序列是5 4 3 2 1，翻轉區間是[2,4]的話，結果是5 2 3 4 1

HIT暑期集訓Day7 平衡樹

B HihoCoder 1333 C HihoCoder 1034 D HDU 4680 E 計蒜客 T2009 G LibreOJ 104 模板題，參考了網上的treap模板（我不會寫啊）

【模板】普通平衡樹

【模板】普通平衡樹 平衡樹模板 解析 雖然是平衡樹模板，然而我要寫的是權值線段樹...

關於那些平衡樹的板子

Treap luoguP6136 #include <iostream> #include <cstdio> #include <cstring> #include <algorithm>

演算法初探 - 平衡樹

更新記錄 【1】2020.08.14-17:01 1.完善Splay內容 正文 Splay Splay是一種沒有用隨機數函式的平衡樹，它依靠伸展操作來維持平衡