时间线 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>
