有人可以幫幫我嗎？！我正在嘗試將 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條經驗 獲得超5個贊
嘗試這個：
<!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 關注
- 126 瀏覽
添加回答
舉報
0/150
提交
取消