昨天建構完了標籤內的HMTL，如下:
<body>
<header>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#product">PRODUCT</a></li>
<li>
<a href="#top"
><img src="./image/logo_brown.png" alt="The Espresso Emporium Logo"
/></a>
</li>
<li><a href="#location">LOCATION</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</header>
<section class="kv_banner">
<div>
<img src="./image/Espresso Yourself..png" alt="Espresso Yourself" />
</div>
</section>
<section class="sec_about" id="about">
<h1>Welcome to The Espresso Emporium</h1>
<p>
At The Espresso Emporium, we're dedicated to providing a truly
exceptional coffee experience. Our passion for coffee is at the heart of
everything we do.
</p>
<div class="sec_about-pic">
<div class="sec_about-pic1">
<img src="./image/exquisite.png" alt="exquiste" />
</div>
<div class="sec_about-pic2">
<img src="./image/sumptuous.png" alt="sumptuous" />
</div>
<div class="sec_about-pic3">
<img src="./image/aromatic.png" alt="aromatic" />
</div>
</div>
</section>
<section class="sec_product" id="product">
<h2>Our Coffee Selection</h2>
<p>
Discover a world of flavors with our diverse coffee offerings. Each cup
is a journey, and we're excited to be your guide. Here's a glimpse of
what you'll find at The Espresso Emporium:
</p>
<!-- 使用貓頭鷹輪播 -->
<div class="owl-carousel owl-theme">
<div class="item">
<img src="./image/Espresso Shots.png" alt="Espresso Shots" />
<h3>Espresso Shots</h3>
<p>For those who appreciate the pure and bold essence of coffee.</p>
</div>
<div class="item">
<img src="./image/Iced Coffee.png" alt="Iced Coffee" />
<h3>Iced Coffee</h3>
<p>Perfect for a refreshing pick-me-up on a warm day.</p>
</div>
<div class="item">
<img src="./image/Cold Brew.png" alt="Cold Brew" />
<h3>Cold Brew</h3>
<p>Smooth, bold, and ideal for the coffee purist.</p>
</div>
<div class="item">
<img src="./image/Lattes.png" alt="Lattes" />
<h3>Lattes</h3>
<p>
Creamy and smooth, with various flavor options to suit your taste.
</p>
</div>
<div class="item">
<img src="./image/Mochas.png" alt="Mochas" />
<h3>Mochas</h3>
<p>A chocolate-infused treat for your coffee cravings.</p>
</div>
<div class="item">
<img src="./image/Cappuccinos.png" alt="Cappuccinos" />
<h3>Cappuccinos</h3>
<p>A delightful balance of espresso, steamed milk, and foam.</p>
</div>
<div class="item">
<img src="./image/Tea Selection.png" alt="Tea Selection" />
<h3>Tea Selection</h3>
<p>
For tea lovers, we offer a range of teas for a different kind of
delight.
</p>
</div>
</div>
</section>
<section class="sec_location" id="location">
<h2>Where is The Espresso Emporium?</h2>
<!-- 嵌入google地圖(這裡假設定位在台北市101) -->
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.030752872954!2d121.55863992695312!3d25.03303040000001!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442abb6625e6f89%3A0xf3ab83833fbea1dd!2z5Y-w5YyXMTAxL-S4luiyvw!5e0!3m2!1szh-TW!2stw!4v1697122609647!5m2!1szh-TW!2stw"
width="600"
height="450"
style="border: 0"
allowfullscreen=""
loading="lazy"
referrerpolicy="no-referrer-when-downgrade"
></iframe>
</section>
<section class="sec_contact" id="contact">
<h2>Contact Us!</h2>
<form action="" method="POST">
<input id="text" type="text" name="name" required />
<input id="email" type="email" name="email" required />
<textarea
name="suggestion"
id="suggestion"
cols="30"
rows="10"
placeholder="Typing your message here..."
></textarea>
<button type="submit">SEND</button>
</form>
</section>
<footer>
<div class="footer_sec1">
<div>
<img src="./image/logo_white.png" alt="The Espresso Emporium Logo" />
<h4></h4>
</div>
<div>
<ul>
<li><a href="#about">ABOUT</a></li>
<li><a href="#product">PRODUCT</a></li>
<li><a href="#location">LOCATION</a></li>
<li><a href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
<div class="footer_sec2">
<img src="./image/copyright.png" alt="copy right" /><span>2023 The Espresso Emporium</span>
</div>
</footer>
</body>
接著我們來建構<head>標籤內的HTML:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="title" content="The Espresso Emporium" />
<meta
name="description"
content="At The Espresso Emporium, we're dedicated to providing a truly
exceptional coffee experience. Our passion for coffee is at the heart of
everything we do."
/>
<meta
name="keywords"
content="Coffee shop, Coffee, Breakfast, Lunch, Afternoon tea, Gourmet, Coffee varieties, Freshly brewed, Roasted coffee, Pour-over coffee, Green tea, Baked goods, Desserts, Delicious food, Restaurant, Dining, Light meals, Internet cafe, Barista, Coffee roasting, Specialty coffee, Casual dining, Social, Art, Culture, Music, Events, Coffee tasting, Relaxation, Coffee appreciation, Handcrafted brew, Local ingredients, Classic coffee, Specialty drinks, Coffee culture, Coffee enthusiasts, Coffee brewing, Authentic coffee, Networking, WiFi, Home-cooked dishes, Healthy eating, Vegetarian options, Tasty breakfast, Pancakes, Pastries, Fresh baked goods, Hand-brewed coffee, Matcha latte, Cappuccino, Specialty pastries, Homemade pastries, Delicious sandwiches, Urban coffee shop, Coffee brewing methods, Coffee beans, Single-origin coffee, Coffee pairings, Artistic taste, Music performances, Cultural events, Social gathering, Handcrafted pastries, Unique beverages, Green tea latte, Espresso, Special baked goods, Cozy atmosphere, Casual dining, Leisurely afternoon, Internet cafe ambiance, Unique experience"
/>
<meta name="robots" content="index,follow" />
<meta name="author" content="H" />
<link
rel="shortcut icon"
type="image/x-icon"
href="./image/logo_brown.png"
/>
<title>The Espresso Emporium</title>
</head>
首先引入css及bootstrap檔:
<li>、<a>的預設樣式並更改字體顏色header ul li {
list-style: none;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: bold;
}
2.Bootstrap:fixed-top、container、d-flex、justify-content-center、align-items-center
display:flex;，設定內容物為水平排列。justify-content:center;水平置中。align-items:center;垂直置中。 <header class="fixed-top">
<nav class="container">
<ul class="d-flex justify-content-center align-items-center">
<li class=""><a href="#about">ABOUT</a></li>
<li class=""><a href="#product">PRODUCT</a></li>
<li class="">
<a href="#top" class="header_logo"
><img
src="./image/logo_brown.png"
alt="The Espresso Emporium Logo"
/></a>
</li>
<li class=""><a href="#location">LOCATION</a></li>
<li class=""><a href="#contact">CONTACT</a></li>
</ul>
</nav>
</header>
2.接下來為其他元素增加其他CSS樣式:
header {
background-color: #fff;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
header nav ul {
margin: 0;
}
header nav ul li {
list-style: none;
margin: 10px 46px;
}
header nav ul li a {
text-decoration: none;
color: black;
font-weight: bold;
}
.header_logo img {
max-height: 50px;
}
index.html:
<section class="kv_banner">
<div class="text-center">
<img src="./image/Espresso Yourself..png" alt="Espresso Yourself" />
</div>
</section>
style.css:
.kv_banner {
background: url(../image/kv_banner.png) no-repeat;
background-size: cover;
min-height: 800px;
}
.kv_banner img {
margin-top: 100px;
max-height: 100px;
}
看影片追技術