freeCodeCamp 响应式网页设计的认证课程第七章。排版是将文本样式设置为易于阅读并适合其目的的艺术。在通过建立营养标签来学习排版的课程中,你将使用排版来构建营养标签网页。你将学习如何使用 CSS 设置文本样式、调整行高和定位文本。以下为我在学习和实战练习过程中所做的笔记,可供参考。
一、重点 HTML 代码
head:
1 2 3 4 5 6
| <head> <meta charset="UTF-8"> <title>Nutrition Label</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet"> <link href="styles.css" rel="stylesheet"> </head>
|
body:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| <body> <div class="label"> <header> <h1 class="bold">Nutrition Facts</h1> <div class="divider"></div> <p>8 servings per container</p> <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p> </header> <div class="divider lg"></div> <div class="calories-info"> <p class="bold sm-text">Amount per serving</p> <h1>Calories <span class="right">230</span></h1> </div> <div class="divider md"></div> <div class="daily-value sm-text"> <p class="right bold no-divider">% Daily Value *</p> <div class="divider"></div> <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p> <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p> <div class="divider"></div> <p class="indent no-divider"><i>Trans</i> Fat 0g</p> <div class="divider"></div> <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p> <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p> <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p> <p class="indent no-divider">Dietary Fiber 4g</p> <div class="divider"></div> <p class="indent no-divider">Total Sugars 12g</p> <div class="divider dbl-indent"></div> <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span> <div class="divider"></div> <p class="no-divider"><span class="bold">Protein</span> 3g</p> <div class="divider lg"></div> <p>Vitamin D 2mcg <span class="right">10%</span></p> <p>Calcium 260mg <span class="right">20%</span></p> <p>Iron 8mg <span class="right">45%</span></p> <p class="no-divider">Potassium 235mg <span class="right">6%</span></p> </div> <div class="divider md"></div> <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p> </div> </body>
|
二、重点 CSS 代码
box-sizing 属性:
1 2 3 4 5 6 7 8 9 10 11
| * { box-sizing: border-box; }
html { font-size: 16px; }
body { font-family: 'Open Sans', sans-serif; }
|
letter-spacing 属性:
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| .label { border: 2px solid black; width: 270px; margin: 20px auto; padding: 0 7px; } header h1 { text-align: center; margin: -4px 0; letter-spacing: 0.15px } p { margin: 0; }
|
divider 分隔栏:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
| .divider { border-bottom: 1px solid #888989; margin: 2px 0; clear: right; } .bold { font-weight: 800; } .right { float: right; } .lg { height: 10px; } .lg, .md { background-color: black; border: 0; } .md { height: 5px; }
|
calories-info:
1 2 3 4 5 6 7 8 9 10 11
| .sm-text { font-size: 0.85rem; } .calories-info h1 { margin: -5px -2px; overflow: hidden; } .calories-info span { font-size: 1.2em; margin-top: -7px; }
|
indent 缩进:
1 2 3 4 5 6 7 8 9 10 11 12
| .indent { margin-left: 1em; } .dbl-indent { margin-left: 2em; } .note { font-size: 0.6rem; margin: 5px 0; padding: 0 8px; text-indent: -8px; }
|
:not
pseudo-selector:
1 2 3
| .daily-value p:not(.no-divider) { border-bottom: 1px solid #888989; }
|
三、页面展示