问题描述
每次我尝试将推荐页面集中到页面上时，推荐页面的内容都会变得很有趣。我尝试将.content的边距设置为25％自动；但是每次我尝试进行调整时，背景图像都会变得很大而仍然无法集中。 我的主页上也有这个错误，背景图片缩小了，并显示出一些空白似乎无法解决问题
THE HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<Meta property="og:title" name="" content="">
<Meta property="og:url" name="" content="">
<Meta property="og:image" name="" content="">
<Meta property="og:type" name="" content="">
<Meta property="og:keywords" name="" content="">
<Meta property="og:description" name="description"
content="No 1,Hospitality management and luxury company in New York USA.We offer our expertise with love in Event Planning and Production,Restaurant sales and consulting and Memorial and Funeral Services.">
<title>Hill and Boyd - Home Page</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous" />
<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,200;0,300;0,400;1,200&display=swap" rel="stylesheet">
<link rel="icon" type="image/png" sizes="" href="logos/favicon2.png">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animations.css">
<link rel="stylesheet" href="css/event.css">
<link rel="stylesheet" href="css/restaurant.css">
<link rel="stylesheet" href="css/memorial.css">
<link rel="stylesheet" href="css/venue.css">
<link rel="stylesheet" href="css/portfolio.css">
</head>
<body>
<!-- HOME PAGE CONTENT-->
<div class="hb-page">
<section id="navigation">
<header>
<div class="mobile">
<a class="js-nav.toggle hb-nav-toggle" onclick="open">
<div class="bun01"></div>
<div class="patty"></div>
<div class="bun02"></div>
</a>
</div>
</header>
<div class="navbar whitebg" id="navbar">
<aside id="hb-aside">
<nav id="menu" class="centertext fontlight">
<ul>
<img class="logo" src="logos/mainlogo.png" alt="">
<li><a class="blacktxt" href="index.html">HOME</a></li>
<li><a class="blacktxt" href="#services">SERVICES</a></li>
<li><a class="blacktxt" href="html/about.html">ABOUT</a></li>
<li><a class="blacktxt" href="#testimonials">TESTIMONIALS</a></li>
<li><a class="blacktxt" href="html/portfolio.html">OUR PORTFOLIO</a></li>
<li><a class="blacktxt" href="html/venue.html">EXCLUSIVE VENUES</a></li>
<li><a class="blacktxt" href="#contact">CONTACT</a></li>
</ul>
<div class="navbarFooter blacktxt fontlight">
<div class="divider"></div>
<div class="navFContent">
<p>
+1 (646) 580-7740
</p>
<p>
[email protected]
</p>
<p>
New York,USA.
</p>
</div>
</div>
</nav>
</aside>
</div>
</section>
<section class="home-page">
<div id="main">
<aside id="home-page" class="">
<div class="slideshow-container">
<div class="home-page-slides">
<img class="" src="Images/eventbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt">Luxury Events</h6>
<h2 class="blacktxt">WE CREATE BEAUTIFUL EVENTS</h2>
<p class="greytxt fontlight">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Sunt omnis quod iste temporibus suscipit nostrum asperiores voluptatem. Provident maiores qui officia tempore,eos veritatis,obcaecati!</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img class="" src="Images/restaurantbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt ">Creating Impact</h6>
<h2 class="blacktxt"> WE PROVIDE STRATEGY TO BOOST SALES</h2>
<p class="greytxt fontlight">
Lorem ipsum dolor sit amet,consectetur adipisicing elit. Modi minima,cumque dicta,minus,sit,praesentium officia deleniti beatae necessitatibus sequi tempora totam ut impedit dolores.
</p>
</div>
</div>
</div>
<div class="home-page-slides">
<img class="" src="Images/memorialbg1.jpg" style="width:100%">
<div class="desc-container">
<div class="desc p30 whitebg">
<h6 class="goldtxt ">Lasting Memories</h6>
<h2 class="blacktxt ">WE SERVE YOU WITH lovE</h2>
<p class="greytxt fontlight">Lorem ipsum dolor sit amet,consectetur adipisicing elit. Nostrum nam sequi dolorum similique praesentium,necessitatibus,aspernatur expedita sed natus illum ut,vitae! Possimus,tempore,facere!</p>
</div>
</div>
</div>
</div>
</aside>
</div>
</section>
<section id="testimonials">
<div class="testimonials">
<a name="testimonials"></a>
<h6 class="goldtxt whitebg">what people are saying...</h6>
<h1 class="blacktxt fontlight whitebg">TESTIMONIALS</h1>
<div class=“testimonial-slider">
<div class="testimonial-slide current">
<div class="content">
<h1>Antonio & Anica </h1>
<p class="greytxt fontlight">
"Antonio and I Could never repay you for your contribution to our wedding.As you kNow,for most women,it is one of the most momentous occasions in their lifetime and that was certainly the case for me.<br />From the beginning,you
knew how important that day would be for me and you added such unique elements of class and style.<br />You truly made our experience much better than what I had imagined it would be."
</p>
</div>
</div>
<div class="testimonial-slide">
<div class="content">
<h1>Mrs Beasley </h1>
<p class="greytxt fontlight">
"Dina is the best! The restaurant and dining room are chic and modern.
The staff and owner are incredibly professional and warm.<br /> <br />
Dina really helped us make our wedding reception and cocktail hour uniquely ours."
</p>
</div>
</div>
<div class="testimonial-slide">
<div class="content">
<h1>Bride Review</h1>
<p class="greytxt fontlight">
“ I feel incredibly honored to have worked with Dina! When my husband and I reflect on our wedding day,our biggest regret is not having met Dina sooner.<br /> <br />
We can't wait to start planning a vow renewal celebration,so that we can have her plan the entire thing!!!"<br />
</p>
</div>
</div>
</div>
<div class="buttons">
<button id="prev"><i class="fas fa-arrow-left"></i></button>
<button id="next"><i class="fas fa-arrow-right"></i></button>
</div>
</div>
</section>
THE CSS CODE
h1 {
font-family: 'Nunito Sans',sans-serif;
margin: 0;
font-size: 30px;
}
h2 {
font-family: 'Nunito Sans',sans-serif;
margin: 0;
text-transform: uppercase;
font-size: 17px;
}
h6 {
font-family: 'TuesdayNight';
margin: 0;
font-size: 30px;
}
p {
font-family: 'Nunito Sans',sans-serif;
font-size: 15px;
}
@media screen and (min-device-width : 250px) and (max-width: 850px) {
h1 {
font-size: 15px;
}
h2 {
font-size: 14px;
margin: 0;
}
h6 {
font-size: 25px;
}
p {
font-size: 13px;
}
}
}
/*----------------------------------------------------
@Home Page
-----------------------------------------------------*/
.slideshow-container,.main {
width: calc(100%-300px);
width:100%;
height: 100vh;
min-height: 100vh;
}
.desc-container {
position: absolute;
bottom: 50px;
margin-left: 315px;
}
.desc {
margin: auto;
width: 450px;
height: 250px;
position: relative;
}
.home-page-slides {
width: 100%;
height: 100%;
min-height: 100%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.home-page-slides img {
height: 100%;
min-height: 100%;
width: 100%;
object-fit: cover;
}
@media screen and (min-device-width : 280px) and (max-width: 850px) {
html,body {
overflow-x: hidden;
}
.desc-container {
float: right;
position: absolute;
margin: 10%;
margin-bottom: -5%;
}
.desc {
width: 75%;
height: 25%;
position: relative;
}
.home-page-slides img {
object-fit: cover;
}
}
/*----------------------------------------------------
@Testimonial Page
-----------------------------------------------------*/
.testimonials {
height:100%;
width:100%;
background-image: url(../Images/eventbg7.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.testimonial-slider {
width:100%;
}
.testimonial-slide {
width:calc(100%-300px);
height: 100%;
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
.testimonial-slide.current {
opacity: 1;
}
.testimonial-slide .content {
width:calc(100%-300px);
height: 100%;
opacity: 0;
width: 600px;
background-color: rgba(255,255,0.8);
color: #333;
padding: 35px;
}
.testimonial-slide .content{
opacity: 1;
}
.testimonial-slide .content h1 {
}
.testimonial-slide .content {
opacity: 1;
/* transform: translateX(600px);
transition: all 0.7s ease-in-out 0.3s; */
}
.buttons button#next {
}
.buttons button#prev {
}
.buttons button {
border: 2px solid #fff;
background-color: transparent;
color: #fff;
cursor: pointer;
padding: 13px 15px;
border-radius: 50%;
outline: none;
}
.buttons button:hover {
background-color: #fff;
color: #333;
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）