网页分步骤效果简单实现

最新推荐文章于 2022-08-05 14:07:29 发布

magic_wings

最新推荐文章于 2022-08-05 14:07:29 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签： bootstrap html css3

本文链接：https://blog.csdn.net/magic_wings/article/details/53270706

版权

网页分步骤操作的简单实现

效果图
这里写图片描述

实现方式：css布局主要运用了bootstrap的栅格化显示，然后加了简单的css3动画。

html

这里为网页的布局，分为上下两部分：step-heaser（打错了，应该是step-header，后来没有改(^O^)）为上面显示步骤部分，step-body下半部分显示内容。

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="./styles/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="./styles/steptool.css">
    <script type="text/javascript" src="./javascripts/jquery.min.js"></script>
    <script type="text/javascript" src="./javascripts/steptool.js"></script>
</head>
<body>
    <div class="step-wrap">
        <div class="step-heaser">
            <div class="rows clearfix">
                <div class="line light"></div>
                <div class="line dark"></div>
                <div class="col-md-4 col-xs-4 col-sm-4 dotwrap">
                    <div class="dot" style="background:#123"></div>
                </div>
                <div class="col-md-4 col-xs-4 col-sm-4 dotwrap">
                    <div class="dot"></div>
                </