问题描述
<body>
<div class="container">
<div class="card">
<div class="text-stats">
<h1>Get <span class="intext">insights</span> that help your business grow.</h1>
<p>discover the benefits of data analytics and make better decisions regarding revenue,customer
experience,and overall efficiency.</p>
<ul class="stats">
<li>10k+ <span class="heading">companies</span></li>
<li>314 <span class="heading">templates</span></li>
<li>12M+ <span class="heading">queries</span></li>
</ul>
</div>
<div class="images">
<img class="img-mobile" src="./images/image-header-mobile.jpg" alt="">
<img class="img-desktop" src="./images/image-header-desktop.jpg" alt="">
</div>
</div>
</body>
简单的 2 个分割居中的网页。一半是图片，一半是全文本。
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap");
* {
margin: 0;
padding: 0;
Box-sizing: border-Box;
}
:root {
--clr-main-bg: hsl(233,47%,7%);
--clr-card-bg: hsl(244,38%,16%);
--clr-accent: hsl(277,64%,61%);
--clr-heading: hsl(0,0%,100%);
--clr-text-paragh: hsla(0,100%,0.75);
--clr-stathead: hsla(0,0.6);
--ff-primary: "Lexend Deca",sans-serif;
--ff-secondary: "Inter",sans-serif;
}
.img-desktop {
display: none;
}
body {
font-family: var(--ff-primary);
font-size: 15px;
background-color: var(--clr-main-bg);
text-align: center;
}
h1 {
color: var(--clr-heading);
font-size: 1.6rem;
max-width: 16ch;
margin-left: auto;
margin-right: auto;
margin-top: 1.2em;
line-height: 1;
}
p {
color: var(--clr-text-paragh);
font-size: 0.85em;
max-width: 29ch;
margin: 2em auto;
line-height: 1.6;
}
.intext {
color: var(--clr-accent);
}
img {
display: block;
max-width: 100%;
border-radius: 1rem 1rem 0 0;
object-fit: cover;
}
.container {
padding: 2em 1em;
}
.card {
display: flex;
flex-direction: column;
background-color: var(--clr-card-bg);
border-radius: 1rem;
}
.text-stats {
order: 2;
}
.images {
order: 1;
position: relative;
}
.images::after {
content: "";
background-color: var(--clr-accent);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
mix-blend-mode: multiply;
border-radius: 1rem 1rem 0 0;
}
li {
list-style: none;
color: var(--clr-heading);
margin-bottom: 1em;
font-weight: bold;
}
.heading {
color: var(--clr-stathead);
font-family: var(--ff-secondary);
text-transform: uppercase;
letter-spacing: 0.8px;
font-size: 0.7em;
margin-top: 0.5em;
display:block;
}
我尝试了几乎所有我能想到的东西，但都被卡住了，显示块，flexBox 删除了所有的边距和填充，只添加到我的列表项中，没有仍然，找不到我的身体溢出和 casues 的原因垂直滚动问题。之后我将使用媒体查询继续桌面样式。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）