每日汇报第四周第七天简单的css和JAVAI/O流

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

今日所学：

　　简单的css设计；掌握BufferedInputStream类与BufferedOutputStream类的构造方法及其参数含义；明确BufferedReader类与BufferedWriter类是以行为单位进行输入/输出的；掌握BufferedReader类与BufferedWriter类中的常用方法。

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>Cafe Menu</title>
 7     <link href="styles.css" rel="stylesheet"/>
 8   </head>
 9   <body>
10     <div class="menu">
11       <main>
12         <h1>CAMPER CAFE</h1>
13         <p class="established">Est. 2020</p>
14         <hr>
15         <section>
16           <h2>Coffee</h2>
17           <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
18           <article class="item">
19             <p class="flavor">French Vanilla</p><p class="price">3.00</p>
20           </article>
21           <article class="item">
22             <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
23           </article>
24           <article class="item">
25             <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
26           </article>
27           <article class="item">
28             <p class="flavor">Hazelnut</p><p class="price">4.00</p>
29           </article>
30           <article class="item">
31             <p class="flavor">Mocha</p><p class="price">4.50</p>
32           </article>
33         </section>
34         <section>
35           <h2>Desserts</h2>
36           <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
37           <article class="item">
38             <p class="dessert">Donut</p><p class="price">1.50</p>
39           </article>
40           <article class="item">
41             <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
42           </article>
43           <article class="item">
44             <p class="dessert">Cheesecake</p><p class="price">3.00</p>
45           </article>
46           <article class="item">
47             <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
48           </article>
49         </section>
50       </main>
51       <hr class="bottom-line">
52       <footer>
53         <p>
54           <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
55         </p>
56         <p class="address">123 Free Code Camp Drive</p>
57       </footer>
58     </div>
59   </body>
60 </html>

css：

 1 body {
 2   background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
 3   font-family: sans-serif;
 4   padding: 20px;
 5 }
 6 
 7 h1 {
 8   font-size: 40px;
 9   margin-top: 0;
10   margin-bottom: 15px;
11 }
12 
13 h2 {
14   font-size: 30px;
15 }
16 
17 .established {
18   font-style: italic;
19 }
20 
21 h1, h2, p {
22   text-align: center;
23 }
24 
25 .menu {
26   width: 80%;
27   background-color: burlywood;
28   margin-left: auto;
29   margin-right: auto;
30   padding: 20px;
31   max-width: 500px;
32 }
33 
34 img {
35   display: block;
36   margin-left: auto;
37   margin-right: auto;
38 }
39 
40 hr {
41   height: 2px;
42   background-color: brown;
43   border-color: brown;
44 }
45 
46 .bottom-line {
47   margin-top: 25px;
48 }
49 
50 h1, h2 {
51   font-family: Impact, serif;
52 }
53 
54 .item p {
55   display: inline-block;
56   margin-top: 5px;
57   margin-bottom: 5px;
58   font-size: 18px;
59 }
60 
61 .flavor, .dessert {
62   text-align: left;
63   width: 75%;
64 }
65 
66 .price {
67   text-align: right;
68   width: 25%;
69 }
70 
71 /* FOOTER */
72 
73 footer {
74   font-size: 14px;
75 }
76 
77 .address {
78   margin-bottom: 5px;
79 }
80 
81 a {
82   color: black;
83 }
84 
85 a:visited {
86   color: black;
87 }
88 
89 a:hover {
90   color: brown;
91 }
92 
93 a:active {
94   color: brown;
95 }