window.sr = ScrollReveal();
sr.reveal('.b1', {
duration: 2000,
origin: 'top',
distance: '80px'
});
sr.reveal('.b2', {
duration: 1500,
origin: 'top',
distance: '80px'
})
sr.reveal('.b3', {
duration: 1000,
origin: 'top',
distance: '80px'
});
sr.reveal('.w1', {
duration: 3000,
origin: 'right',
distance: '200px'
});
sr.reveal('.w2', {
duration: 3500,
origin: 'right',
distance: '150px'
});
sr.reveal('.w3', {
duration: 4000,
origin: 'right',
distance: '150px'
});
sr.reveal('.h2-about', {
duration: 2000,
origin: 'top',
distance: '150px'
});
sr.reveal('.left', {
duration: 2000,
origin: 'bottom',
distance: '150px'
});
sr.reveal('.right', {
duration: 2000,
origin: 'bottom',
distance: '150px'
});
const navBtn = document.querySelector('.menu-bars');
const body = document.querySelector('body');
const x = document.querySelector('.fa-times');
const b1 = document.querySelector('.b1');
const b2 = document.querySelector('.b2');
const b3 = document.querySelector('.b3');
const sideMenu = document.querySelector('.side-menu');
navBtn.addEventListener('click', () => {
x.style.left = '338px';
sideMenu.style.left = '0px';
addAnimation(b1);
addAnimation(b2);
addAnimation(b3);
function addAnimation(bar) {
bar.style.animationName = bar.className + '-animate';
}
});
const aboutDiv = document.querySelector('.about-us');
aboutDiv.addEventListener('mouseover', () => {
const line = document.querySelector('.underline');
line.style.animationName = 'line';
})
x.addEventListener('click', ()=> {
sideMenu.style.left = '-400px';
x.style.left = '-400px';
})html, body {
margin: 0;
padding: 0;
}
.side-menu {
position: fixed;
top: 165px;
background-color: white;
width: 299.5px;
padding: 10px;
transition: all 2s ease;
left: -400px;
transition: all 0.2s ease;
z-index: 11;
}
.fa-times {
font-size: 30px;
position: fixed;
color: white;
left: -338px;
top: 168px;
transition: all 0.2s ease;
z-index: 11;
}
.fa-times:hover {
transform: scale(1.2);
}
.side-menu ul {
list-style-type: none;
text-align: center;
}
.side-menu li {
color: grey;
font-size: 1.8rem;
margin: 6px;
margin-left: -35px;
margin-bottom: 35px;
font-family: 'Josefin sans';
}
.side-menu li:hover {
color: orange;
cursor: pointer;
}
.menu-bars{
position: fixed;
left: 50px;
top: 80px;
z-index: 11;
}
.b1, .b2, .b3 {
position: relative;
width: 60px;
height: 7px;
background-color: red;
margin:.55rem;
left: 0px;
top: 0px;
border-radius: 9px;
}
.b1 {
background-color: lightgreen;
animation-duration: 0.2s;
animation-fill-mode: forwards;
animation-direction: backwards;
}
.b2 {
background-color: white;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
.b3 {
background-color: #ff4d4d;
animation-duration: 0.2s;
animation-fill-mode: forwards;
}
@keyframes b1-animate {
from {}
to {
width: 60px; height: 8px; position: relative; left: -67px; top: 49px; width: 100px; border-radius: 0; background-color: lightgreen;}
}
@keyframes b2-animate {
from {}
to {width: 60px;
height: 8px;
position: relative;
left: 33px;
top: 32.5px;
width: 150px;
height: 7.75px;
border-radius: 0;
background-color: white;}
}
@keyframes b3-animate {
from {}
to {width: 60px;
height: 8px;
position: relative;
top: 16px;
left: 161px;
width: 100px;
border-radius: 0;
background-color: #ff4d4d;}
}
.intro {
background: blue;
width: 100vw;
height: 100vh;
background-attachment: fixed;
background-size: cover;
margin-bottom: 0;
}
h1 {
font-family: 'Cedarville Cursive';
position: absolute;
left: 700px;
top: 50px;
color: white;
font-size: 3rem;
}
h2 {
text-align: center;
font-family: 'Cedarville Cursive';
font-size: 3rem;
padding: 30px;
color: white;
}
.about-us {
margin-top: -40px;
padding-bottom: 90px;
background-color: #339966;
width: 100vw;
}
.underline {
margin: 0;
position: absolute;
left: 570px;
bottom: -120px;
background-color: orange;
width: 0px;
height: 3px;
animation-duration: 0.7s;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
@keyframes line {
from {left: 370px; width: 0px;}
to {left: 580px; width: 210px; border-radius: 1.5px;}
}
p {
position: relative;
padding-left: 20px;
top: -30px;
color : white;
font-size: 1.8rem;
word-spacing: 7px;
width: 400px;
font-family: 'Josefin sans';
margin-left: 155px;
}
.fa-caret-down {
position: relative;
width: 50px;
height: 50px;
font-size: 60px;
color: lightgrey;
left: 665px;
bottom: 290px;
transform: rotate(90deg);
transition: all 0.5s ease;
}
.fa-caret-down:hover {
color: white;
}
.image-slider {
background-color: darkgrey;
position: relative;
width: 440px;
height: 350px;
right: -710px;
bottom: 500px;
}
.right {
position: relative;
width: 50px;
height: 50px;
font-size: 60px;
color: lightgrey;
left: 1145px;
bottom: 705px;
transform: rotate(-90deg);
transition: all 0.5s ease;
}
.right:hover {
color: white;
}
.menu-wrapper {
width: 100VW;
background-color: #e6ac00;
height: 1605px;
position: relative;
top: -490px;
clip-path: polygon(0% 0%, 100% 10%, 100% 100%, 0% 100%);
}
.menu-title {
font-size: 100px;
}
.col-1 {
border: 1px solid #339966;
width: 600px;
position: relative;
left: 150px;
top: 300px;
}
.platter {
font-size: 2rem;
color: #339966;
font-family: 'Cedarville Cursive';
position: relative;
left: 150px;
margin-bottom: 0;
}
.platter-info {
font-size: 1.15rem;
text-align: center;
position: relative;
left: -80px;
}
.item {
font-size: 1.5rem;
color: black;
margin: 0;
padding: 0
}
.price {
font-family: 'Josefin Sans';
margin-left: 400px;
position: relative;
top: -50px;
font-size: 1.5rem;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>El Metate | Mexican food</title>
<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
<header>
<nav>
<div class="side-menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
<li>Location</li>
<li>News</li>
</ul>
</div>
<i class="fas fa-times"></i>
<div class="menu-bars">
<div class="b1"></div>
<div class="b2"></div>
<div class="b3"></div>
</div>
</nav>
<div class="intro">
<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
</div>
</header>
<section class="about">
<div class="about-us">
<h2 class="h2-about">About Us</h2>
<div class="underline"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
<i class="fas fa-caret-down left"></i>
<div class="image-slider">p</div>
<i class="fas fa-caret-down right"></i>
</div>
</section>
<section class="menu">
<div class="menu-wrapper">
<h1 class="menu-title">Menu</h1>
<div class="col-1">
<h3 class="platter">Combination Platters</h3>
<p class="platter-info">Rice & Beans Included</p>
<p class="item item-1">Tostada & Taco</p><span class="price p1">$6.39</span>
<p class="item item-2">2 Beef Tacos</p><span class="price p2">$6.39</span>
<p class="item item-3">2 Enchiladas</p><span class="price p3">$6.39</span>
<p class="item item-4">Tostada & Enchilada</p><span class="price p4">$6.39</span>
<p class="item item-5">Taco & Enchilada</p><span class="price p5">$6.39</span>
<p class="item item-6">Burrito & Enchilada</p><span class="price p6">$6.39</span>
<p class="item item-7">2 Beef Burritos</p><span class="price p7">$7.45</span>
<p class="item item-8">2 Carne Asada Tacos</p><span class="price p8">$8.09</span>
<p class="item item-9">Chorizo</p><span class="price p9">$6.39</span>
<p class="item item-10">Carne Asada</p><span class="price p10">$8.19</span>
<p class="item item-11">Machaca</p><span class="price p11">$6.75</span>
<p class="item item-12">Carnitas</p><span class="price p12">$7.19</span>
<p class="item item-13">2 Fish Tacos</p><span class="price p13">$6.75</span>
<p class="item item-14">Chiles Rellenos</p><span class="price p14">$6.95</span>
<p class="item item-15">Red Combo</p><span class="price p15">$7.95</span>
<p class="item item-16">Green Combo</p><span class="price p16">$7.05</span>
<p class="item item-17">3 Rolled Tacos w/Guacamole</p><span class="price p17">$6.75</span>
<p class="item item-18">Chimichanga, Rice & Beans</p><span class="price p18">$7.05</span>
<p class="item item-19">Carne Asada Burrito</p><span class="price p19">$7.19</span>
<p class="item item-20">2 Tamales, Rice & Beans</p><span class="price p20">$7.05</span>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
答案 0 :(得分：0)
橙色下划线的问题在于其绝对位置。看来您正在尝试使其水平居中。要使用绝对定位的元素执行此操作，您可以将其margin设置为auto，并将其left和right都设置为0；
.underline {
margin: auto;
position: absolute;
left: 0;
right: 0;
bottom: -120px;
background-color: orange;
width: 0;
height: 3px;
border-radius: 1.5px;
animation-duration: 0.7s;
animation-fill-mode: forwards;
transition-timing-function: ease-out;
}
@keyframes line {
from {width: 0px;}
to {width: 210px;}
}
灰色框更难修复。看起来您希望段落显示在左侧的一列中，而图像滑块显示在右侧的一列中。通过图像滑块元素的左右按钮，这变得更加困难。
要固定左右图像滑块按钮，请先将它们放在图像滑块元素中。
<div class="image-slider">
<i class="fas fa-caret-down left"></i>
<i class="fas fa-caret-down right"></i>
</div>
然后将其位置设为绝对，并将其相对于图像滑块元素放置在正确的位置。
.fa-caret-down {
position: absolute;
width: 50px;
height: 50px;
font-size: 60px;
color: lightgrey;
top: 50%;
margin-top: -25px;
transform: rotate(-90deg);
transition: all 0.5s ease;
}
.right {
right: -50px;
transform: rotate(-90deg);
}
.left {
left: -50px;
transform: rotate(90deg);
}
您现在要彼此相邻显示段落项目和图像滑块。但是，如果您在小屏幕上观看此图片，它们可能会彼此紧缩，因此当窗口的宽度小于特定大小时，您希望它们无缝地重新定位到上方和下方的位置。
有多种显示CSS列的方法；在此示例中，我将其显示为内联块，其段落的最小大小固定。将图像滑块设置为display:inline-block，为其提供足够的水平边距以允许使用向左和向右按钮，然后删除right和bottom属性。
.image-slider {
display: inline-block;
margin: 0 80px;
vertical-align: top;
background-color: darkgrey;
position: relative;
width: 440px;
height: 350px;
}
要定位该段落，请使用CSS选择器并将其设置为display:inline-block，并在重新放置图像滑块之前将其最小宽度设置为所需宽度。给它一个基于百分比的宽度。您还需要调整“关于我们”部分的填充，以使黄色对角线不会与文本重叠。
.about-us p {
display: inline-block;
width: 50%;
text-align: left;
min-width: 440px;
vertical-align: top;
}
在LinkedIn找到了具有上述更改的密码笔。还实施了许多其他小的修复程序，以使其平稳运行。希望这会有所帮助。