html5时间轴列表,HTML5 时间轴/日程安排表模板

HTML

导入代码模板:

Classes Timetable

  • Circuit Training

    Short interval training circuits to condition muscles and burn fat fast. Circuits may vary from centre to centre.

  • Total tone

    Focuses on strength and endurance for the whole body and improves muscle tone. Instructor led.

  • Zumba

    A vigorous dance class to Latin music. Helps tone, shape and condition your body, burning up to 800 calories in one hour depending on how much you put in.

  • Active Me

    Active Me is an inclusive sports programme aimed at disabled people in Liverpool who experience barriers to doing physical activities and sport.

  • Zumba

    A vigorous dance class to Latin music. Helps tone, shape and condition your body, burning up to 800 calories in one hour depending on how much you put in.

  • Spinning

    A vigorous class using stationary bikes with weighted flywheel. Focuses on strength, endurance, intervals and recovery. Burns calories and shapes muscles. Instructor led.

  • Pilates

    Lengthens and tones muscles using breathing and slow controlled movements.

  • Spinning

    A vigorous class using stationary bikes with weighted flywheel. Focuses on strength, endurance, intervals and recovery. Burns calories and shapes muscles. Instructor led.

  • Aqua Fit

    Splash your way to fitness with gentle exercise in a heated pool. A class that is kind to joints and good fun too. Instructor led.

  • Total tone

    Focuses on strength and endurance for the whole body and improves muscle tone. Instructor led.

  • Aqua Running

    Aqua Running is a water class which uses all the major muscle groups. It results in total body conditioning and burns calories faster than any known activity.

  • Metafit

    Metafit is a new exciting twist on circuit-style training.

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是一个简单的 HTML5+CSS 实现时间轴的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>时间轴</title> <style> .timeline { position: relative; max-width: 1200px; margin: 0 auto; } .timeline::after { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 100%; background-color: #ccc; transform: translateX(-50%); } .timeline-item { position: relative; padding: 50px 40px; margin-bottom: 50px; background-color: #f5f5f5; border-radius: 5px; } .timeline-item::after { content: ''; position: absolute; top: 50%; right: -20px; width: 0; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 20px solid #f5f5f5; transform: translateY(-50%); } .timeline-item::before { content: attr(data-date); position: absolute; top: -30px; left: 50%; padding: 5px 10px; background-color: #ccc; color: #fff; font-size: 14px; border-radius: 5px; transform: translateX(-50%); } .timeline-item:nth-child(even) { padding-left: 0; padding-right: 40px; text-align: right; } .timeline-item:nth-child(even)::after { right: auto; left: -20px; border-left: 20px solid #f5f5f5; border-right: 0; } .timeline-item:nth-child(even)::before { left: auto; right: 50%; transform: translateX(50%); } </style> </head> <body> <div class="timeline"> <div class="timeline-item" data-date="2021年9月1日"> <h3>这是第一个事件</h3> <p>这是第一个事件的详细描述</p> </div> <div class="timeline-item" data-date="2021年9月15日"> <h3>这是第二个事件</h3> <p>这是第二个事件的详细描述</p> </div> <div class="timeline-item" data-date="2021年10月1日"> <h3>这是第三个事件</h3> <p>这是第三个事件的详细描述</p> </div> </div> </body> </html> ``` 这段代码使用了伪元素 `::before` 和 `::after` 来实现时间轴的效果。具体来说,我们使用一个 `div` 容器包含所有时间轴事件,该容器设置了相对定位 `position: relative;`,以便内部元素可以使用绝对定位。然后,使用 `::after` 伪元素在容器中央绘制一条垂直的时间轴线,并通过 `transform: translateX(-50%);` 居中显示。 每个事件使用一个 `div` 元素示,该元素设置了相对定位 `position: relative;`,并使用 `::before` 伪元素在上方显示事件日期,并使用 `::after` 伪元素绘制一个小三角形。为了实现时间轴左右对称,我们对奇偶数事件元素进行了不同的样式设置。 希望这个示例代码能够帮助到你!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值