我正在通过构建通用的投资组合页面来训练我的编码。到目前为止,我有一个部分,其中包含带有一些文本的英雄图像,然后是一个具有一些网格列的部分,稍后将在其中显示一些项目,然后是一个关于部分,这也是一个带有图像和一些文字的网格列。 我被困在这里,因为某种原因,“关于”部分中的div表现得很奇怪。
我可以在scss中更改图像值,但不能更改文本。 此外,位于about部分下方的媒体查询也不会注册。 当我按比例缩小时,我的About div也会浮于其他内容上。 我尝试删除“英雄”部分和“关于”部分之间的网格列,以查看它们是否是导致问题的原因,但是,否,“关于div”和媒体查询仍然无法响应我在scss文件中所做的任何更改(除了(关于图片),并且About div仍然会溢出我在图片和Hero部分之间放置的所有内容。
到底是怎么回事?
我的HTML
<div class="container__main">
<div class="container__hero">
<img class="container__hero__image" src="../assets/hero-background.jpg" />
<div class="container__hero__text">
<h1>Your Digital Handyman</h1>
<p>Digital products with human insight</p>
<button class="btn">Hire me</button>
</div>
</div>
<div class="container__card">
<div class="container__card__item">
<div class="container__card__image"></div>
<div class="container__card__text">
<span class="container__card__text__upperTitle">CSS / JavaScript</span>
<h2>Train Project</h2>
<p>
A customer page I made for a fictional
Metro company to showcase the use of ES6 Javascript.
</p>
</div>
<div class="container__card__footer">
<i class="fas fa-location-arrow fa-3x"></i>
</div>
</div>
<div class="container__card__item">
<div class="container__card__image"></div>
<div class="container__card__text">
<span class="container__card__text__upperTitle">CSS / JavaScript</span>
<h2>Train Project</h2>
<p>
A customer page I made for a fictional
Metro company to showcase the use of ES6 Javascript.
</p>
</div>
<div class="container__card__footer">
<i class="fas fa-location-arrow fa-3x"></i>
</div>
</div>
<div class="container__card__item">
<div class="container__card__image"></div>
<div class="container__card__text">
<span class="container__card__text__upperTitle">CSS / JavaScript</span>
<h2>Train Project</h2>
<p>
A customer page I made for a fictional
Metro company to showcase the use of ES6 Javascript.
</p>
</div>
<div class="container__card__footer">
<i class="fas fa-location-arrow fa-3x"></i>
</div>
</div>
</div>
<div class="about__section">
<div class="about__section__hero">
<img class="about__section__hero__image" src="../assets/casual-cellphones-chatting.jpg" />
<div class="about__section__hero__text">
<p>
The psychology
<br />behind user
<br />experience
</p>
</div>
</div>
</div>
我的scss
$primary-color: #41b883;
$secondary-color: #34495e;
$primary-text-color: black;
$secondary-text-color: white;
.container__main {
.container__hero {
position: relative;
.container__hero__image {
height: 100%;
width: 100%;
}
.container__hero__text {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
h1 {
font-size: 2.5em;
color: $secondary-text-color;
text-align: center;
}
p {
font-size: 1.4em;
color: $secondary-text-color;
text-align: center;
}
.btn {
position: absolute;
background-color: $primary-color;
left: 33%;
border: none;
color: $secondary-text-color;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
}
}
.container__card {
height: 100vh;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
align-items: center;
justify-items: center;
.container__card__item {
display: grid;
grid-template-rows: 210px 210px 80px;
grid-template-areas: "image" "text" "footer";
border-radius: 18px;
background: #fff;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9);
text-align: center;
margin: 50px;
.container__card__image {
grid-area: image;
background: url("~@/assets/website1.jpg");
background-size: cover;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.container__card__text {
grid-area: text;
margin: 25px;
h2 {
margin-top: 5;
font-size: 28px;
}
p {
font-size: 15px;
font-weight: 300;
}
.container__card__text__upperTitle {
font-size: 15px;
color: green;
}
}
.container__card__footer {
grid-area: footer;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
background-color: $primary-color;
cursor: pointer;
.fas {
color: #fff !important;
margin-top: 15px;
}
}
}
}
.about__section {
position: relative;
height: 100vh;
display: grid;
.about__section__hero {
display: grid;
grid-auto-columns: repeat(auto-fit, minmax(19rem, 1fr));
.about__section__hero__image {
max-width: 100%;
height: auto;
.about__section__hero__text {
p {
position: absolute;
font-size: 10em;
color: $secondary-text-color;
font-weight: 800;
}
}
}
}
}
@media screen and (max-width: 759px) {
.container__hero {
.container__hero__text {
.h1 {
font-size: 1.3em;
}
.p {
font-size: 1.1em;
}
}
}
}
}