有人可以帮帮我吗？！我正在尝试将 PSD 文件编码为 HTML 和 CSS，但我在其中一个部分上遇到了困难。这是我想做的事情的图片：点击这里问题是我不知道如何将图像放在时间线中。我尝试在 ::after psuedo 中添加图像，但我认为这不是正确的方法。这是我的 HTML 代码：<section class="about"> <div class="wrapper"> <h3>About Us</h3> <p>Lorem ipsum dolor sit amet consectetur.</p> <div class="container left"> <div class="content"> <h5>JULY 2010<br> Our Humble Beginnings</h5> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p> </div> </div> <div class="container right"> <div class="content"> <h5>January 2011<br> Facing Startups Battles</h5> <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p> </div> </div> </div></section>这是我的 CSS 代码： .about .wrapper{ padding: 80px 10%; text-align: center; position: relative; } .about .wrapper::after{ content: ''; position: absolute; top: 200px; bottom: 0; width: 6px; background: red; } .about h5{ line-height: 1.5; font-size: 1em; padding-bottom: .5em; } .about .container{ position: relative; width: 50%; top: 60px; margin: 0 0 60px 0; }我认为这叫做时间轴，有很多教程讨论如何做这样的事情，但我不知道如何在时间轴线上制作图像。你能帮我做这个吗？
2 回答
三国纷争
TA贡献1804条经验 获得超7个赞
将每个内容+图像视为布局中的一行。每行作为网格的容器。
您可以直观地将每一行分解为 3 列。一列用于左侧内容，第二列用于图像，第三列用于右侧内容。
布局的 CSS 网格示例如下：
.grid-container {
display: grid;
grid-template-columns: 1fr 10em 1fr;
grid-template-rows: 1fr;
grid-template-areas: "content-left image content-right";
text-align: center;
}
.content-left { grid-area: content-left; background: lightblue; }
.image { grid-area: image; background: lightgreen; }
.content-right { grid-area: content-right; background: lightblue; }
<div class="grid-container">
<div class="content-left">Left content</div>
<div class="image">Image</div>
<div class="content-right">Right content</div>
</div>
收到一只叮咚
TA贡献1821条经验 获得超4个赞
尝试这个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<title></title>
</head>
<body>
<section class="about">
<div class="wrapper">
<div>
<h3>About Us</h3>
<p>Lorem ipsum dolor sit amet consectetur.</p>
</div>
<div id="container">
<div class="row">
<div id="col1" class="col right">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
<div id="col2" class="col"><img class="img" src="assets/img/about-1.png"/></div>
</div>
<div class="row2" >
<div id="col3" class="col"><img class="img" src="assets/img/about-1.png"/></div>
<div id="col4" class="col left">
<h5>JULY 2010<br> Our Humble Beginnings</h5>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rerum officia labore fugit nihil nulla laboriosam praesentium harum ut, odio ea facere, recusandae reprehenderit repellat.</p>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
在 main.css 文件中：
.about .wrapper{
padding: 80px 10%;
text-align: center;
}
.about h5{
line-height: 1.5;
font-size: 1em;
padding-bottom: .5em;
}
.row {
width: 59%;
margin-right: 41%;
display: flex;
}
.row2 {
width: 59%;
display: flex;
margin-left: 41%;
}
.col {
flex:1;
}
.col.left {
text-align: left;
}
.col.right {
text-align: right;
}
#col2 {
flex-basis: 30%;
}
#col1 {
flex-basis: 70%;
}
#col3 {
flex-basis: 30%;
}
#col4 {
flex-basis: 70%;
}
.img {
margin: 10% 5%;
width: 90%;
border-radius: 50%;
}
#container {
background-image: linear-gradient(lightgrey,lightgrey);
background-size: 2px 100%;
background-repeat: no-repeat;
background-position: center center;
}
将其放入 asset/img/about-1.png
- 2 回答
- 0 关注
- 63 浏览
添加回答
举报
0/150
提交
取消