极客教程使用HTML、CSS和Bootstrap为餐厅创建一个主页
HTML: HTML是超文本标记语言的缩写。它是用来设计网页的一种标记语言。HTML是超文本和标记语言的组合。超文本定义了网页之间的联系。标记语言用于定义标签内的文本文件，它定义了网页的结构。
CSS：层叠样式表，人们亲切地称之为CSS，是一种设计简单的语言，旨在简化使网页呈现的过程。CSS允许你将样式应用到网页上。更重要的是，CSS使你能够独立于构成每个网页的HTML来做这件事。
BOOTSTRAP : Bootstrap是一个免费和开源的工具集，用于创建响应式网站和网络应用程序。它是最流行的HTML、CSS和JavaScript框架，用于开发响应式、移动优先的网站。如今，网站对所有的浏览器（IE、Firefox和Chrome）和所有尺寸的屏幕（桌面、平板电脑和手机）都很完美。这一切都要归功于Bootstrap的开发者–Twitter的Mark Otto和Jacob Thornton，尽管它后来被宣布为一个开源项目。
以下是建造餐厅主页的源代码。
HTML部分：文件名称为index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,
initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="index.css">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity=
"sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<title>Restaurant Website</title>
</head>
<body>
<!-- navbar -->
<nav>
<ul class="nav-flex-row">
<li class="nav-item">
<a href="#about">About</a>
</li>
<li class="nav-item">
<a href="#reservation">Reservation</a>
</li>
<li class="nav-item">
<a href="#menu">Menu</a>
</li>
<li class="nav-item">
<a href="#shop">Shop</a>
</li>
</ul>
</nav>
<section class="section-intro">
<header>
<h1> Welcome To Fooddddie's
Kitchen</h1>
</header>
<div class="link-to-book-wrapper">
<a class="link-to-book"
href="#reservations">Book a table</a>
</div>
</section>
<section class="about-section">
<article>
<h3>
Section for the text why your
restaurant is the best.
</h3>
<p>
Lorem ipsum dolor sit, amet consectetur
adipisicing elit. A quos, voluptatum
illum mollitia dolores libero placeat
nesciunt quasi adipisci impedit!Lorem
ipsum dolor sit, amet consectetur
adipisicing elit. A quos, voluptatum
illum mollitia dolores libero placeat
nesciunt quasi adipisci impedit!
Lorem ipsum dolor sit, amet consectetur
adipisicing elit. A quos, voluptatum
illum mollitia dolores libero placeat
nesciunt quasi adipisci impedit!Lorem
ipsum dolor sit.
</p>
</article>
</section>
<!-- carousel section -->
<div id="carouselExampleControls"
class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/food1.png"
class="d-block w-100" alt="food">
</div>
<div class="carousel-item">
<img src="img/food2.png"
class="d-block w-100" alt="food">
</div>
<div class="carousel-item">
<img src="img/food3.png"
class="d-block w-100" alt="food">
</div>
</div>
<a class="carousel-control-prev"
href="#carouselExampleControls"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon"
aria-hidden="true">
</span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next"
href="#carouselExampleControls"
role="button" data-slide="next">
<span class="carousel-control-next-icon"
aria-hidden="true">
</span>
<span class="sr-only">Next</span>
</a>
</div>
<div class="container">
<div class="row-flex">
<div class="flex-column-form">
<h3>
Make a booking
</h3>
<form class="media-centered">
<div class="form-group">
<p>
Please leave your number we will
call to make a reservation
</p>
<input type="name" class="form-control"
id="exampleInputName1"
aria-describedby="nameHelp"
placeholder="Enter your name">
</div>
<div class="form-group">
<input type="number" class="form-control"
id="exampleInputphoneNumber1"
placeholder="Enter your phone number">
</div>
<button type="submit" class="btn btn-primary">
Submit
</button>
</form>
</div>
<div class="opening-time">
<h3>
Opening times
</h3>
<p>
<span>Monday—Thursday: 08:00 — 22:00</span>
<span>Friday—Saturday: 09:00 — 23:00 </span>
<span>Sunday: 10:00 — 17:00</span>
</p>
</div>
<div class="contact-address">
<h3>
Contact
</h3>
<p>
<span>410-602-8008</span>
<span>15 Florida Ave</span>
<span>Palo-Alto, 1111 CA</span>
</p>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity=
"sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
integrity=
"sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous">
</script>
<script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
integrity=
"sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous">
</script>
</body>
</html>
CSS部分：文件名称为index.css
@import url('https://fonts.googleapis.com/css?family=Big+Shoulders+Text:100, 300, 400, 500, 600, 700, 800, 900&display=swap');
/* font-family: 'Big Shoulders Text', cursive; */
.nav-flex-row {
display: flex;
flex-direction: row;
justify-content: center;
position: absolute;
z-index: 100;
left: 0;
width: 100%;
padding: 0;
}
.nav-flex-row li {
text-decoration: none;
list-style-type: none;
padding: 20px 15px;
}
.nav-flex-row li a {
font-family: 'Big Shoulders Text', cursive;
color: #000;
font-size: 1.5em;
text-transform: uppercase;
font-weight: 300;
}
.nav-flex-row li a:hover{
background: #E7E7E7;
}
.section-intro {
height: 820px;
background-image: url(img/foddiee.png);
background-size: cover;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.section-intro h1 {
text-align: center;
color: #000;
font-size: 4em;
font-weight: 700;
}
.section-intro header {
display: flex;
flex: 4;
flex-direction: row;
justify-content: center;
align-items: center;
}
.link-to-book-wrapper {
flex: 1;
}
.about-section {
display: flex;
align-items: center;
background-color: #f3f3f3c0;
padding: 50px 30px;
}
.link-to-book {
color: #ffffff;
display: block;
border: 2px solid #ffffff;
padding: 5px 10px;
}
a.link-to-book:hover {
background-color: #ffffff;
color: #95999e;
text-decoration: none;
}
.about-section p,
.about-section h3 {
text-align: center;
width: 60%;
margin: auto;
font-family: 'Big Shoulders Text', cursive;
font-size: 1.8em;
text-transform: uppercase;
}
.carousel-inner {
height: 700px;
}
.row-flex {
display: flex;
flex-direction: row;
}
.flex-column-form {
display: flex;
flex-direction: column;
flex: 1;
margin: 30px 20px;
}
.btn.btn-primary {
font-family: 'Big Shoulders Text', cursive;
color: #ffffff;
background-color: #95999e;
text-transform: uppercase;
font-size: 16px;
padding: 5px 10px;
letter-spacing: 2px;
border: 0;
}
.btn.btn-primary:hover {
background-color: #747474;
}
.opening-time,
.contact-address {
flex: 1;
margin: 30px 20px;
font-size: 1.2em;
}
.form-group p {
font-size: 1.2em;
}
.opening-time p span,
.contact-address p span {
display: block;
}
@media (min-width:577px) and (max-width: 800px) {
.section-intro {
height: 500px;
}
.about-section p,
.about-section h3 {
font-size: 20px;
}
.carousel-inner {
height: auto;
}
.row-flex {
display: flex;
flex-direction: column;
}
}
@media screen and (max-width: 576px) {
.section-intro {
height: 300px;
}
.about-section {
padding: 30px;
}
.section-intro h1 {
font-size: 2em;
}
.about-section p,
.about-section h3 {
font-size: 15px;
}
.carousel-inner {
height: auto;
}
.row-flex {
display: flex;
flex-direction: column;
}
.row-flex h3 {
font-size: 25px;
text-align: center;
}
.form-group p {
font-size: 15px;
}
.opening-time p span,
.contact-address p span {
font-size: 15px;
text-align: center;
}
}
输出:
