找回密码
当前位置：前端开发者 > CSS > 正文

前端开发纯CSS写的面包屑导航

2019-01-08 20:05:00 分类：CSS 阅读(1018) 评论(0)
前端与游戏开发哪个好
游戏客户端开发前端
游戏开发的前端

代码片段 1

<!DOCTYPE html>
    <head>
        <meta charset=”utf-8″ />
        <title>纯css写的步奏框</title>
        <style>
            .step {
                position: relative;
            }
            .step a {
                position: absolute;
                display: inline-block;
                color: #fff;
            }
            .step a span {
                display: inline-block;
                float: left;
            }
            .step a .span_2 {
                text-align: center;
                line-height: 40px;
            }
            .step_first .span_1 {
                height: 40px;
                width: 180px;
                background: #c5c5c5;
                text-align: center;
                line-height: 40px;
            }
            .step_first .span_2 {
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border-left: 20px solid #c5c5c5;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
            }
            .step_first:hover .span_1 {
                background: #6ec038;
            }
            .step_first:hover .span_2 {
                border-left: 20px solid #6ec038;
            }
            .step_model span {
                display: inline-block;
            }
            .step_model .span_1 {
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border-left: 20px solid transparent;
                border-top: 20px solid #c5c5c5;
                border-bottom: 20px solid #c5c5c5;
            }
            .step_model .span_2 {
                height: 40px;
                width: 160px;
                background: #c5c5c5;
            }
            .step_model .span_3 {
                width: 0;
                height: 0;
                line-height: 0;
                font-size: 0;
                border-left: 20px solid #c5c5c5;
                border-top: 20px solid transparent;
                border-bottom: 20px solid transparent;
            }
            .step_model:hover .span_1 {
                border-top: 20px solid #6ec038;
                border-bottom: 20px solid #6ec038;
            }
            .step_model:hover .span_2 {
                background: #6ec038;
            }
            .step_model:hover .span_3 {
                border-left: 20px solid #6ec038;
            }
            .step_2 {
                left: 185px;
            }
            .step_3 {
                left: 370px;
            }
            .step_4 {
                left: 555px;
            }
            .step_4 .span_2 {
                width: 180px;
            }
        </style>
    </head>
    <body>
        <div class=”step”>
            <a href=”#” class=”step_first”
                ><span class=”span_1″>第一步</span><span class=”span_2″></span
            ></a>
            <a href=”#” class=”step_model step_2″
                ><span class=”span_1″></span><span class=”span_2″>第二步</span
                ><span class=”span_3″></span
            ></a>
            <a href=”#” class=”step_model step_3″
                ><span class=”span_1″></span><span class=”span_2″>第三步</span
                ><span class=”span_3″></span
            ></a>
            <a href=”#” class=”step_model step_4″
                ><span class=”span_1″></span
                ><span class=”span_2″>第四步</span></a
            >
        </div>
    </body>
</html>

###经过less优化版如下

采用less来写是方便统一更改样式，兼容ie8+（包括ie8）以及所有现代浏览器

less代码：

less 代码片段

@width-1: 286px; //步骤一的宽度（不包含箭头宽）
@width-2: 295px; //步骤二和后续步骤框的宽度（不包含箭头宽和尾部宽）
@height: 30px; //步骤框的高度
@interval: 5px; //步骤框之间的间隔
@step-left-second: @width-1 + @height / 2 + @interval; //步骤框二的定位
.step-left-model(@x) {
    //步骤三和后续步骤框的定位 ，步骤三“@x=1”,步骤四“@x=2”…..逐渐递增。
    left: (@step-left-second) + (@height / 2 + (@width-2) + @interval) * @x;
}
@color-active: #3aacf8; //步骤框选中的颜色
@color-no-active: #c5c5c5; //步骤框未选中的颜色
.left-or-right(@a) when (@a=0) {
    left: -@height / 2;
}
.left-or-right(@a) when (@a=1) {
    right: -@height / 2;
}
.step-layout( @top:0, @right:0, @bottom:40px, @left:10px) {
    //设置整个步骤框盒子的外边距
    margin: @top @right @bottom @left;
}
.mixin-1(@a) {
    .left-or-right(@a);
    content: ”;
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    line-height: 0;
    font-size: 0;
}
.step-box {
    .step-layout;
    position: relative;
    height: @height;
    div {
        position: absolute;
        display: inline-block;
        color: #fff;
        span {
            display: inline-block;
            float: left;
            text-align: center;
            line-height: @height;
        }
    }
}
.step_first {
    span {
        height: @height;
        width: @width-1;
        background: @color-no-active;
        text-align: center;
        line-height: @height;
        &:after {
            .mixin-1(1);
            border-left: @height / 2 solid @color-no-active;
            border-top: @height / 2 solid transparent;
            border-bottom: @height / 2 solid transparent;
        }
    }
    &.active {
        span {
            background: @color-active;
            &:after {
                border-left: @height / 2 solid @color-active;
            }
        }
    }
}
.step_model {
    span {
        height: @height;
        width: @width-2;
        background: @color-no-active;
        &:before {
            .mixin-1(0);
            border-left: @height / 2 solid transparent;
            border-top: @height / 2 solid @color-no-active;
            border-bottom: @height / 2 solid @color-no-active;
        }
        &.arrow {
            &:after {
                .mixin-1(1);
                border-left: @height / 2 solid @color-no-active;
                border-top: @height / 2 solid transparent;
                border-bottom: @height / 2 solid transparent;
            }
        }
    }
    &.active {
        span {
            background: @color-active;
            &:before {
                border-top: @height / 2 solid @color-active;
                border-bottom: @height / 2 solid @color-active;
            }
            &.arrow {
                &:after {
                    border-left: @height / 2 solid @color-active;
                }
            }
        }
    }
}
/*步骤二的定位*/
.step_center_1 {
    left: @step-left-second;
}
/*最后步骤框的定位*/
.step_last {
    .step-left-model(1);
}

把以上的less编译成为css后在下边html引入即可
可以安装一个less包来编译

安装

$ npm install -g less
安装后即可使用lessc命令

编译

$ lessc index.less index.css
即可以在当下目录把 index.less 编译为 index.css

或者你使用的是webstrom，你可以在它里边添加一个watchers，即可以实时自动编译。你写的less会立刻编译出跟他相同名字的css，如图：
按下快捷键 ctrl+alt+s 打开你的设置窗口：

接着添加一个watchers，选择less选项

会弹出如下方框，它会自动识别你用npm安装的less包，来作为编译程序，基本不用你自己选择什么，点击确认即可

html代码：

html 代码片段

<!DOCTYPE html>
<html lang=”en”>
    <head>
        <meta charset=”UTF-8″ />
        <title>步骤</title>
        <link rel=”stylesheet” href=”css/index.css” />
    </head>
    <body>
        <div class=”step-box”>
            <div class=”step_first active”><span>1、用户身份验证</span></div>
            <div class=”step_model step_center_1 “>
                <span class=”arrow”>2、设置新密码</span>
            </div>
            <div class=”step_model step_last”><span>3、修改成功</span></div>
        </div>
    </body>
</html>
游戏开发 前端和后端
web前端开发小游戏
前端开发能做游戏吗
» 本文来自：前端开发者 » 《前端开发纯CSS写的面包屑导航》
» 本文链接地址：https://www.rokub.com/7623.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论