时间线 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>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
