時間線 timeline
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
/*border: 1px solid red;*/
}
ul li {
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
.text-light {
color: #ccc;
}
.progress {
max-width: 980px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.progress > .subtitle {
margin-top: 20px;
margin-bottom: 50px;
}
.progress > .timeline > li {
position: relative;
padding-bottom: 80px;
}
.progress > .timeline > li:last-child {
padding-bottom: 0;
}
.timeline > li > img {
width: 160px;
height: 160px;
border-radius: 50%;
border: 6px solid #ddd;
vertical-align: middle; /* 去除 inline-block 的底部間距 */
background-color: orange;
}
.timeline > li::after {
content: "";
display: block;
position: absolute;
top: 0;
left: 50%;
margin-left: -1px;
z-index: -1;
width: 2px;
height: 100%;
background-color: #ccc;
}
.timeline > li > .summary {
position: absolute;
right: 50%;
top: 0;
margin-right: 100px;
text-align: right;
}
.timeline > li:nth-child(even) > .summary {
left: 50%;
right: auto;
margin-left: 100px;
margin-right: auto;
text-align: left;
}
.timeline > li > .look-more {
position: absolute;
left: 0;
top: 0;
text-align: center;
width: 100%;
line-height: 160px;
color: #fff;
}
</style>
</head>
<body>
<section class="progress">
<h1>工作經歷</h1>
<p class="subtitle text-light">文字文字文字文字文字文字</p>
<ul class="timeline">
<li>
<div class="summary">
<time>2017-10-20</time>
<h2>文字文字文字</h2>
<p class="text-light">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</li>
<li>
<div class="summary">
<time>2017-10-20</time>
<h2>文字文字文字</h2>
<p class="text-light">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</li>
<li>
<div class="summary">
<time>2017-10-20</time>
<h2>文字文字文字</h2>
<p class="text-light">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</li>
<li>
<div class="summary">
<time>2017-10-20</time>
<h2>文字文字文字</h2>
<p class="text-light">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</li>
<li>
<div class="summary">
<time>2017-10-20</time>
<h2>文字文字文字</h2>
<p class="text-light">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>
</div>
</li>
<li>
<img>
<a class="look-more" href="#">查看更多</a>
</li>
</ul>
</section>
</body>
二級菜單
<style type="text/css">
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul li {
list-style: none;
}
.menu {
display: flex;
justify-content: center;
text-align: center;
}
.menu > li {
width: 150px;
line-height: 50px;
border: 1px solid #888;
position: relative;
background-color: #fff;
}
.menu > li + li {
border-left: none;
}
.menu > li > .submenu {
/* 使用 visibility 可以應用 transition，這里比 display 更實用*/
/*display: none;*/
visibility: hidden;
transition: 0.5s;
opacity: 0;
/* 由于使用了絕對定位，不影響其它元素布局，這里僅使用 opacity 也是可以的 */
margin-top: -10px;
/* visibility: hidden; 不脫離文檔流，保留隱藏之前元素占據的物理區域，但是這里使用了絕對定位，所以沒有影響 */
position: absolute;
/* 這里存在一個問題，設置 width: 100%; .submenu 左右各差 1px */
/*width: 100%;*/
left: -1px;
right: -1px;
border: 1px solid #888;
background-color: #fff;
}
.menu > li > .submenu > li:hover {
background-color: #ddd;
cursor: pointer;
}
.menu > li:hover > .submenu {
/*display: block;*/
visibility: visible;
opacity: 1;
margin-top: 0;
}
</style>
</head>
<body>
<nav>
<ul class="menu">
<li>一級選項1
<ol class="submenu">
<li>二級選項1</li>
<li>二級選項2</li>
<li>二級選項3</li>
<li>二級選項4</li>
</ol>
</li>
<li>一級選項2
<ol class="submenu">
<li>二級選項1</li>
<li>二級選項2</li>
<li>二級選項3</li>
<li>二級選項4</li>
</ol>
</li>
<li>一級選項3
<ol class="submenu">
<li>二級選項1</li>
<li>二級選項2</li>
<li>二級選項3</li>
<li>二級選項4</li>
</ol>
</li>
</ul>
</nav>
<section>
<p style="background-color: pink; margin-top: -10px;">正文內容<br>正文內容</p>
</section>
</body>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
