公司发展历程 纯css样式代码
时间: 2023-12-09 07:01:26 浏览: 39
公司发展历程是指一个公司从创立至今的发展过程和重要里程碑。下面是一个用纯CSS样式代码展示公司发展历程的简单示例:
HTML代码:
```html
<div class="timeline">
<div class="event">
<div class="date">1990</div>
<div class="description">公司成立</div>
</div>
<div class="event">
<div class="date">1995</div>
<div class="description">首次实现盈利</div>
</div>
<div class="event">
<div class="date">2000</div>
<div class="description">上市</div>
</div>
<div class="event">
<div class="date">2010</div>
<div class="description">扩大市场份额</div>
</div>
<div class="event">
<div class="date">2020</div>
<div class="description">进军国际市场</div>
</div>
</div>
```
CSS代码:
```css
.timeline {
display: flex;
flex-direction: column;
}
.event {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.date {
background-color: #ffc107;
color: #ffffff;
padding: 10px;
border-radius: 5px;
margin-right: 10px;
}
.description {
font-size: 16px;
}
```
这段代码通过使用Flex布局创建了一个竖直排列的公司发展历程时间线。每个事件都是一个`.event`元素,包含一个显示日期的`.date`元素和一个描述的`.description`元素。日期使用了黄色的背景色,并添加了圆角样式,描述部分使用了16px的字体大小。
可以根据实际需求进一步定制样式,并添加动画效果来增添页面的吸引力。这只是一个简单的示例,您可以根据需要扩展并改进代码。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)