每日汇报第五周第四天 CSS弹性盒子模型和html排版

qmz-znv2 / 2023-07-26 / 原文

今日学习：

　　CSS中的弹性盒子模型和html中的排版

盒子模型html代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Photo Gallery</title>
 7     <link rel="stylesheet" href="./styles.css">
 8   </head>
 9   <body>
10     <header class="header">
11       <h1>css flexbox photo gallery</h1>
12     </header>
13     <div class="gallery">
14       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
15       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
16       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
17       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
18       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
19       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
20       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
21       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
22       <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
23     </div>
24   </body>
25 </html>

css：

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: sans-serif;
  background: #f5f6f7;
}

.header {
  text-align: center;
  text-transform: uppercase;
  padding: 32px;
  background-color: #0a0a23;
  color: #fff;
  border-bottom: 4px solid #fdb347;
}

.gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 10px;
}

.gallery img {
  width: 100%;
  max-width: 350px;
  height: 300px;
  object-fit: cover;
  border-radius: 10px;
}

.gallery::after {
  content: "";
  width: 350px;
}

html排版html代码：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <title>Nutrition Label</title>
 7   <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
 8   <link href="./styles.css" rel="stylesheet">
 9 </head>
10 
11 <body>
12   <div class="label">
13     <header>
14       <h1 class="bold">Nutrition Facts</h1>
15       <div class="divider"></div>
16       <p>8 servings per container</p>
17       <p class="bold">Serving size <span>2/3 cup (55g)</span></p>
18     </header>
19     <div class="divider large"></div>
20     <div class="calories-info">
21       <div class="left-container">
22         <h2 class="bold small-text">Amount per serving</h2>
23         <p>Calories</p>
24       </div>
25       <span>230</span>
26     </div>
27     <div class="divider medium"></div>
28     <div class="daily-value small-text">
29       <p class="bold right no-divider">% Daily Value *</p>
30       <div class="divider"></div>
31       <p><span><span class="bold">Total Fat</span> 8g</span> <span class="bold">10%</span></p>
32       <p class="indent no-divider">Saturated Fat 1g <span class="bold">5%</span></p>
33       <div class="divider"></div>
34       <p class="indent no-divider"><span><i>Trans</i> Fat 0g</span></p>
35       <div class="divider"></div>
36       <p><span><span class="bold">Cholesterol</span> 0mg</span> <span class="bold">0%</span></p>
37       <p><span><span class="bold">Sodium</span> 160mg</span> <span class="bold">7%</span></p>
38       <p><span><span class="bold">Total Carbohydrate</span> 37g</span> <span class="bold">13%</span></p>
39       <p class="indent no-divider">Dietary Fiber 4g</p>
40       <div class="divider"></div>
41       <p class="indent no-divider">Total Sugars 12g</p>
42       <div class="divider double-indent"></div>
43       <p class="double-indent no-divider">Includes 10g Added Sugars <span class="bold">20%</span>
44       <div class="divider"></div>
45       <p class="no-divider"><span class="bold">Protein</span> 3g</p>
46       <div class="divider large"></div>
47       <p>Vitamin D 2mcg <span>10%</span></p>
48       <p>Calcium 260mg <span>20%</span></p>
49       <p>Iron 8mg <span>45%</span></p>
50       <p class="no-divider">Potassium 235mg <span>6%</span></p>
51     </div>
52     <div class="divider medium"></div>
53     <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily
54       diet. 2,000 calories a day is used for general nutrition advice.</p>
55   </div>
56 </body>
57 </html>

CSS代码：

  1 * {
  2   box-sizing: border-box;
  3 }
  4 
  5 html {
  6   font-size: 16px;
  7 }
  8 
  9 body {
 10   font-family: 'Open Sans', sans-serif;
 11 }
 12 
 13 .label {
 14   border: 2px solid black;
 15   width: 270px;
 16   margin: 20px auto;
 17   padding: 0 7px;
 18 }
 19 
 20 header h1 {
 21   text-align: center;
 22   margin: -4px 0;
 23   letter-spacing: 0.15px
 24 }
 25 
 26 p {
 27   margin: 0;
 28   display: flex;
 29   justify-content: space-between;
 30 }
 31 
 32 .divider {
 33   border-bottom: 1px solid #888989;
 34   margin: 2px 0;
 35 }
 36 
 37 .bold {
 38   font-weight: 800;
 39 }
 40 
 41 .large {
 42   height: 10px;
 43 }
 44 
 45 .large, .medium {
 46   background-color: black;
 47   border: 0;
 48 }
 49 
 50 .medium {
 51   height: 5px;
 52 }
 53 
 54 .small-text {
 55   font-size: 0.85rem;
 56 }
 57 
 58 
 59 .calories-info {
 60   display: flex;
 61   justify-content: space-between;
 62   align-items: flex-end;
 63 }
 64 
 65 .calories-info h2 {
 66   margin: 0;
 67 }
 68 
 69 .left-container p {
 70   margin: -5px -2px;
 71   font-size: 2em;
 72   font-weight: 700;
 73 }
 74 
 75 .calories-info span {
 76   margin: -7px -2px;
 77   font-size: 2.4em;
 78   font-weight: 700;
 79 }
 80 
 81 .right {
 82   justify-content: flex-end;
 83 }
 84 
 85 .indent {
 86   margin-left: 1em;
 87 }
 88 
 89 .double-indent {
 90   margin-left: 2em;
 91 }
 92 
 93 .daily-value p:not(.no-divider) {
 94   border-bottom: 1px solid #888989;
 95 }
 96 
 97 .note {
 98   font-size: 0.6rem;
 99   margin: 5px 0;
100   padding:0 8px;
101   text-indent:-8px;
102 }