html - 推荐页内容拒绝集中，内容加页边距后背景图变大
问题描述
每次我尝试将推荐页面的内容集中在页面上时，它的内容都会变得很有趣。我尝试将 .content 的边距设置为 25% auto；但是每次我尝试调整背景图像时都会变得如此之大并且仍然无法集中。我的主页上也有这个错误，背景图像缩小并显示一些空白似乎无法解决问题
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>
info@hillandboyd.com
</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, 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;
}
解决方案
推荐阅读
- javascript - 根据 Tagify 标签更改页面的 html 布局
- javascript - 使用 ajax 更改 Ruby on Rails 视图中按钮的状态
- typo3 - TYPO3 10.4：链接到已安装页面的子页面会生成带有错误域的链接
- paypal - PayPal Express Checkout 电子邮件通知
- javascript - 如何使用 Map 传递一组动态字段的字段数组
- javascript - 使用 forEach 获取异步匿名函数的所有结果
- php - Laravel，MYSQL 两个聚合表上的完全连接解决方法
- wordpress - 仅在主页上显示来自特定类别的最近帖子
- javascript - React Native：将 useState() 数据传递到不相关的屏幕
- java - 闰年Java程序