📅 最后修改于: 2021-05-25 11:32:27 🧑 作者: Mango
先决条件： HTML 5，CSS和引导程序
HTML： HTML代表超文本标记语言。它用于使用标记语言设计网页。 HTML是超文本和标记语言的组合。超文本定义了网页之间的链接。标记语言用于定义标记内的文本文档，标记定义了网页的结构。
CSS： 级联样式表，俗称CSS，是一种设计简单的语言，旨在简化使网页可呈现的过程。 CSS允许您将样式应用于网页。更重要的是，CSS使您能够独立于组成每个网页的HTML进行此操作。
BOOTSTRAP： Bootstrap是一个免费的开源工具集，用于创建响应式网站和Web应用程序。它是用于开发响应式，移动优先网站的最流行的HTML，CSS和JavaScript框架。如今，这些网站非常适合所有浏览器(IE，Firefox和Chrome)以及各种尺寸的屏幕(台式机，平板电脑和手机)。感谢Bootstrap开发人员– Twitter的Mark Otto和Jacob Thornton，尽管后来宣布它是一个开源项目。
以下是构建餐厅主页的源代码：
HTML部分： 文件名是index.html
HTML
Restaurant Website
Welcome To Fooddddie's
Kitchen
Section for the text why your
restaurant is the best.
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.
Opening times
Monday—Thursday: 08:00 — 22:00
Friday—Saturday: 09:00 — 23:00
Sunday: 10:00 — 17:00
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-adress {
flex: 1;
margin: 30px 20px;
font-size: 1.2em;
}
.form-group p {
font-size: 1.2em;
}
.opening-time p span,
.contact-adress 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-adress p span {
font-size: 15px;
text-align: center;
}
}
CSS部分： 文件名为index.css
的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-adress {
flex: 1;
margin: 30px 20px;
font-size: 1.2em;
}
.form-group p {
font-size: 1.2em;
}
.opening-time p span,
.contact-adress 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-adress p span {
font-size: 15px;
text-align: center;
}
}
输出：
