CSS 中的平滑滚动
Smooth Scrolling in CSS
所以我已经尝试了我检查了一大堆网站的所有方法，但它就是行不通。
我试图让滚动行为在这个网站上工作。我已经将 scroll-container put ids fixed css 但它不起作用。关于为什么平滑滚动不起作用的任何想法？
基本上我需要的是导航栏区域平滑滚动到页面上的适当区域。所以菜单到菜单，交易到交易，即将到关于等等......我不明白为什么平滑滚动不起作用。有任何想法吗？谢谢！
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
您只需将 scroll-behavior: smooth; 添加到您的 html 样式。
请参阅以下代码段：
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
html{
scroll-behavior: smooth;
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
你也可以测试一下here
所以我已经尝试了我检查了一大堆网站的所有方法，但它就是行不通。 我试图让滚动行为在这个网站上工作。我已经将 scroll-container put ids fixed css 但它不起作用。关于为什么平滑滚动不起作用的任何想法？ 基本上我需要的是导航栏区域平滑滚动到页面上的适当区域。所以菜单到菜单，交易到交易，即将到关于等等......我不明白为什么平滑滚动不起作用。有任何想法吗？谢谢！
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
您只需将 scroll-behavior: smooth; 添加到您的 html 样式。
请参阅以下代码段：
/* Main Body Styles */
body {
margin: 0;
width: 100%;
height: auto;
box-sizing: border-box;
text-align: center;
background-color: #f9f9f9;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%238b8b8b' fill-opacity='0.07' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
font-family: var(--main-font);
}
html{
scroll-behavior: smooth;
}
a {
cursor: pointer;
outline: none;
text-decoration: none;
}
hr {
border: 0;
height: 1px;
margin: 0 0 1.5em 0;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.hr2 {
margin: 0 auto;
width: 50%;
}
.scroll-box {
scroll-behavior: smooth;
overflow-y: scroll;
}
:root {
--main-box-shadow:-5px 6px 59px -4px rgba(77,77,77,1);
--main-color: #d30404;
--main-text-shadow: 0px 3px 6px rgba(150, 150, 150, 1);
--fancy-font: 'Rock Salt', cursive;
--main-font: 'Raleway', sans-serif;
}
/* Header */
.header-image {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/header.jpg');
background-size:cover;
background-position: center;
background-attachment: fixed;
width: 100%;
height: 40em;
}
.header-wrapper {
padding-top: 1.5em;
}
.header-logo {
margin: 0;
padding-bottom: 1.25em;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 5em;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
letter-spacing: .115em;
}
.menu-btn {
border: none;
border-radius: 2em;
padding: 1em 3.25em;
background: #d30404;
color: #efefef;
box-shadow: 0px 30px 95px -15px rgba(0,0,0,.5);
font-size: 1.15em;
}
/* Hours of Operation */
.hours-wrapper {
background-color: red;
}
.hours-header {
margin: 0;
}
.hours-list {
list-style: none;
padding: 0;
}
/* Navbar */
.nav {
margin: 0;
}
.menu-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/menu.jpg');
}
.deals-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/dough.jpg');
}
.about-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg');
}
.contact-box {
background-image: url('/Users/rogerjorns/Desktop/DinosMain/assets/img/oven.jpg');
}
.box-logo {
margin: 0;
padding: 1.5em;
color: white;
font-size: 2em;
font-family: 'Rock Salt', cursive;
text-shadow: -2px 2px 7px rgba(0, 0, 0, .25);
}
.box {
box-shadow: inset -1px 1px 43px -9px rgba(0,0,0,1);
background-position: center;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 10em;
}
/* Menu */
.menu-title {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 4em;
margin: 0;
padding: 1em 0 .25em 0;
text-shadow: var(--main-text-shadow);
}
.menu-gallery {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.menu-item {
margin: 2em 0;
}
.menu-pic {
width: auto;
height: 15em;
margin: .5em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
.pic2,
.pic6 {
width: 95%;
}
.menu-heading {
font-family: 'Raleway', sans-serif;
font-weight: bolder;
font-size: 1.5em;
}
/* Deals */
.deal-wrapper {
padding: 1.5em 0;
}
.deals {
margin: 0;
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3em;
text-shadow: var(--main-text-shadow);
}
.deal-img {
width: auto;
height: 15em;
margin: 1em;
box-shadow: -12px 11px 39px -12px rgba(0,0,0,0.81);
}
/* About */
.about {
color: #d30404;
font-family: 'Rock Salt', cursive;
font-size: 3.5em;
margin: 0;
text-shadow: var(--main-text-shadow);
}
.store-pic {
margin: 2em 0;
width: 100%;
height: auto;
box-shadow: -1px 3px 17px -4px rgba(150,150,150,0.8);
}
.about-par {
font-family: 'Raleway', sans-serif;
font-size: 1.115em;
line-height: 180%;
padding: 1.35em 0;
margin: 0 auto;
max-width: 33ch;
}
/* Reviews */
.review-wrapper {
padding-top: 2em;
}
.review {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
font-family: 'Nunito', sans-serif;
font-style: italic;
max-width: 32ch;
margin: 0 auto;
}
.fa-yelp {
color: #d32323;
}
.fa-facebook-f {
color: #3b5998;
}
/* Footer */
.footer-wrapper {
background-color: #d30404;
box-shadow: inset 0px 1px 52px -10px rgba(0, 0, 0, .115);
width: 100%;
height: 5em;
display: flex;
justify-content: center;
}
.footer-social {
display: flex;
justify-content: space-around;
padding: .75em 0;
}
.social {
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
.footer-cred {
font-size: .75em;
color: white;
text-shadow: -3px 2px 5px rgba(0, 0, 0, 0.25);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dinos Pizza</title>
<link rel="stylesheet" href="/Users/rogerjorns/Desktop/DinosMain/assets/index.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Raleway|Rock+Salt|Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<!-- Header -->
<header class="header-image">
<div class="header-wrapper">
<h1 class="header-logo">Dino's Pizza</h1>
</div>
<a href="menu" class="menu-btn">Check our Menu</a>
</header>
<!-- Hours of Operation -->
<div class="hours-wrapper">
<h2 class="hours-header">Hours of Operation</h2>
<ul class="hours-list">
<li class="hours">** Closed Mondays **</li>
<li class="hours">Tues - Thurs: 11am - 8pm</li>
<li class="hours">Fri - Sat: 11am - 9pm</li>
<li class="hours">Sun: 2pm - 8pm</li>
</ul>
</div>
<!-- Navbar -->
<div class="nav">
<div href="#menu" class="menu-box box">
<a href="#menu"><h2 class="box-logo">Menu</h2></a>
</div>
<div href="#deals" class="deals-box box">
<a href="#deals"><h2 class="box-logo">Deals</h2></a>
</div>
<div href="#about" class="about-box box">
<a href="#about"><h2 class="box-logo">About Us</h2></a>
</div>
<div href="#contact" class="contact-box box">
<a href="#contact"><h2 class="box-logo">Contact</h2></a>
</div>
</div>
<scroll-container>
<!-- Menu -->
<div class="menu-wrapper">
<h1 id="menu" class="menu-title title scrolling-box">Menu</h1>
<hr>
<div class="menu-gallery">
<div class="menu-item">
<img class="menu-pic pic1" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/allmeat.jpg" alt="">
<h3 class="menu-heading">All-Meat</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic2" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/hawaiian.jpg" alt="">
<h3 class="menu-heading">Hawaiian</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic3" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/veggie.jpg" alt="">
<h3 class="menu-heading">Veggie</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic4" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/onetopping.jpg" alt="">
<h3 class="menu-heading">One Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic5" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/twotopping.jpg" alt="">
<h3 class="menu-heading">Two Topping</h3>
<p class="menu-price">.95</p>
</div>
<div class="menu-item">
<img class="menu-pic pic6" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/cheesybread.jpg" alt="">
<h3 class="menu-heading">Cheesy Bread</h3>
<p class="menu-price">.95</p>
</div>
</div>
</div>
<hr>
<!-- Deals -->
<div class="deal-wrapper">
<scroll-page><h2 id="deals" class="deals scrolling-box">Deals</h2></scroll-page>
<hr class="hr2">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal.jpg" alt="">
<img class="deal-img" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/deal2.jpg" alt="">
</div>
<!-- About Us -->
<hr>
<div class="about-wrapper">
<h2 id="about" class="about scrolling-box">About Us</h2>
<hr class="hr2">
<img class="store-pic" src="/Users/rogerjorns/Desktop/DinosMain/assets/img/storefront.jpg" alt="">
<hr class="hr2">
<p class="about-par">With aspirations to go into the restaurant business for many years,
our dream became a reality in May 2014 when we opened the doors to Dino's Pizza in the great city of Blue Mound, TX.
With a passion to serve up the best-tasting pizza and wings in town, made from quality ingredients,
we look forward to having you as a guest at our restaurant or delivering straight to your door.</p>
<br>
<p class="about-par">At Dino's Pizza we pride ourselves in serving our customers with the utmost professionalism, friendliness, integrity and cleanliness.
We make our pizza dough fresh from scratch daily.
Dino's is committed to serving delicious, hot home-made tasting pizzas and savory wings day in and day out.</p>
<br>
<p class="about-par">Dino's Pizza is family-owned and operated.
Our freshly made dough, homemade sauce, and real shredded cheese make a difference you will definitely taste!
And our appetizing, flavorful chicken wingsand dessert options are second to none!</p>
<p class="about-par">Don't just take our word for it...check out what our loyal customers have to say
on Yelp, then order and be prepared to taste
and experience awesomeness for yourself! The Dino's Way!</p>
</div>
<hr class="hr2">
<!-- Reviews -->
<div class="review-wrapper">
<h3 class="review">"I've never had anything less than an outstanding meal from Dino's."</h3>
<p> - Brittani <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"Pizza was some of the best I've ever eaten! We will definitely be ordering again."</h3>
<p> - Michelle <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"This is by far the Best pizza near me. I haven't bought pizza from anywhere else since..."</h3>
<p> - Kevin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I couldn't stop eating the pizza. There's something in the crust they use that is impossible to describe other than heavenly."</h3>
<p> - Matthew <a href="#"><i class="fab fa-yelp"></i></a></p>
</div>
<div class="review-wrapper">
<h3 class="review">"I've yet to find the perfect pizza place until now and you guys nail it every time!"</h3>
<p> - J.C. <a href="#"><i class="fab fa-yelp"></i></a></p>
<div class="review-wrapper">
<h3 class="review">"The staff is super friendly and the pizza is awesome!! This is by far the best pizza I've had in Texas!!!"</h3>
<p> - Benjamin <a href="#"><i class="fab fa-facebook-f"></i></a></p>
</div>
<!-- Contact -->
<div class="footer-wrapper">
<footer>
<div class="footer-social">
<a href="#"><i class="fab fa-yelp social"></i></a>
<a href="#"><i class="fab fa-facebook-f social"></i></a>
<a href="#"><i class="fab fa-twitter social"></i></a>
</div>
<div class="footer-cred">
<p>Created by</p>
</div>
</footer>
</div>
</scroll-container>
</body>
</html>
你也可以测试一下here