日 HTML

今天，我建立了一個網站
將過去 5 天累積的知識整合在一起，我建立了一個實用的食譜書籍網站，並使用 CSS 進行樣式設計。

連結到網站 - Ofameh_Recipe_Site

HTML 程式碼區塊：

  
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Recipe Book</title>
    <link rel="stylesheet" href="styles.css">
  
  
    <header>
      <h1>Ofameh's Recipe Book</h1>
    </header>
    <nav>
      <ul>
        <li>
          <button onclick="location.href='#breakfast';">Breakfast</button>
        </li>
        <li>
          <button onclick="location.href='#lunch';">Lunch</button>
        </li>
        <li>
          <button onclick="location.href='#dinner';">Dinner</button>
        </li>
        <li>
          <button onclick="location.href='#breakfast';">Dessert</button>
        </li>
        <li>
          <button onclick="location.href='#contact';">Contact</button>
        </li>
      </ul>
    </nav>
    <main>
      <section id="breakfast">
        <h2>Breakfast Recipes</h2>
        <article>
          <h3>日 HTML</h3>
          <img src="./images/pancake.jpg" alt="日 HTML">
          <h4>Ingredients:</h4>
          <ul>
            <li>2 cups all-purpose flour</li>
            <li>2 tablespoons sugar</li>
            <li>2 teaspoons baking powder</li>
            <li>1 teaspoon baking soda</li>
            <li>1/2 teaspoon salt</li>
            <li>2 cups buttermilk</li>
            <li>2 large eggs</li>
            <li>1/4 cup melted butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>In a bowl, mix the dry ingredients together.</li>
            <li>In another bowl, whisk the wet ingredients together.</li>
            <li>Combine the dry and wet ingredients and mix until smooth.</li>
            <li>Heat a griddle over medium heat and grease it lightly.</li>
            <li>
              Pour batter onto the griddle and cook until bubbles form on the
              surface.
            </li>
            <li>Flip and cook until golden brown on the other side.</li>
          </ol>
        </article>
      </section>
      <section id="lunch">
        <h2>Lunch Recipes</h2>
        <article>
          <h3>Grilled Cheese Sandwich</h3>
          <img src="./images/grilled_cheese.jpg" alt="Grilled Cheese Sandwich">
          <h4>Ingredients:</h4>
          <ul>
            <li>2 slices of bread</li>
            <li>2 slices of cheese</li>
            <li>Butter</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Butter one side of each slice of bread.</li>
            <li>
              Place one slice of bread, buttered side down, on a skillet over
              medium heat.
            </li>
            <li>
              Top with cheese and the other slice of bread, buttered side up.
            </li>
            <li>
              Cook until the bread is golden brown and the cheese is melted,
              flipping once.
            </li>
          </ol>
        </article>
      </section>
      <section id="dinner">
        <h2>Dinner Recipes</h2>
        <article>
          <h3>Spaghetti Bolognese</h3>
          <img src="/images/spaghetti_bolognesse.webp" alt="Spaghetti Bolognese">
          <h4>Ingredients:</h4>
          <ul>
            <li>200g spaghetti</li>
            <li>2 tablespoons olive oil</li>
            <li>1 onion, chopped</li>
            <li>2 garlic cloves, minced</li>
            <li>400g ground beef</li>
            <li>1 can of tomatoes</li>
            <li>2 tablespoons tomato paste</li>
            <li>1 teaspoon dried oregano</li>
            <li>Salt and pepper to taste</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Cook the spaghetti according to package instructions.</li>
            <li>
              Heat olive oil in a pan and sauté the onion and garlic until
              softened.
            </li>
            <li>Add the ground beef and cook until browned.</li>
            <li>
              Stir in the tomatoes, tomato paste, and oregano. Simmer for 20
              minutes.
            </li>
            <li>Season with salt and pepper.</li>
            <li>Serve the sauce over the spaghetti.</li>
          </ol>
        </article>
      </section>
      <section id="dessert">
        <h2>Dessert Recipes</h2>
        <article>
          <h3>Chocolate Cake</h3>
          <img src="./images/chocolate_cake.jpg" alt="Chocolate Cake">
          <h4>Ingredients:</h4>
          <ul>
            <li>1 and 3/4 cups all-purpose flour</li>
            <li>1 and 1/2 cups sugar</li>
            <li>3/4 cup cocoa powder</li>
            <li>1 and 1/2 teaspoons baking powder</li>
            <li>1 and 1/2 teaspoons baking soda</li>
            <li>1 teaspoon salt</li>
            <li>2 large eggs</li>
            <li>1 cup milk</li>
            <li>1/2 cup vegetable oil</li>
            <li>2 teaspoons vanilla extract</li>
            <li>1 cup boiling water</li>
          </ul>
          <h4>Instructions:</h4>
          <ol>
            <li>Preheat your oven to 350°F (175°C) and grease a cake pan.</li>
            <li>In a large bowl, combine the dry ingredients.</li>
            <li>
              Add the eggs, milk, oil, and vanilla, and beat on medium speed for
              2 minutes.
            </li>
            <li>Stir in the boiling water (batter will be thin).</li>
            <li>Pour the batter into the prepared pan.</li>
            <li>
              Bake for 30-35 minutes, or until a toothpick inserted into the
              center comes out clean.
            </li>
          </ol>
        </article>
      </section>

      <section id="contact">
        <h2> Contact Us </h2>
        <article>
          <b> Want More Recipes </b> <br>
         <label for="subscribe"> Subscribe to our newsletter </label>
         <input type="checkbox" id="subscribe" name="subscribe"> <br>
         <br>
         Shoot us an email: <a href="mailto:osowoofameh@gmail.com" target="_blank"> <button> Email </button> </a> <br>
         <br>
         Catch Us on X: <a href="https://x.com/trader_mkk" target="_blank"> <button> Twitter </button></a>
         <br>
        </article>
      </section>
    </main>
    <footer>
      <p>
        <b>
          © 2024 Ofameh <br>
          All rights reserved.</b>
      </p>
    </footer>
  

CSS 程式碼區塊-

  body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

header,
main,
footer {
  padding: 20px;
  margin: 10px;
}

header {
  background-color: black;
  color: white;
  text-align: center;
}

nav ul {
  list-style-type: none;
  padding: 0;
  display: flex;
  justify-content: space-around;
}

nav ul li {
  margin: 0 10px;
}

section {
  margin-bottom: 20px;
}

article {
  border: 1px solid #ccc;
  padding: 10px;
  margin: 10px 0;
}

img {
  max-width: 100%;
  height: auto;
}

footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: black;
  border: none;
  border-radius: 5px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background-color: #ccc;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

button:hover {
  background-color: black;
  transform: translateY(-2px);
  color: white;
} 

將第五天到目前為止我所學到的所有知識整合在一起來構建這個對我來說是很有成就感的，因為這個練習的重點是基於專案的學習。
所以實際上這樣做了 5 天並能夠建立一個如此好的網站對我來說意義重大

話雖這麼說，第 6 天到第 10 天將展示我所謂的網站，每天我都會建立一個網站，該網站將逐漸變得更加困難和複雜。
就在那裡！

以上是日 HTML的詳細內容。更多資訊請關注PHP中文網其他相關文章！