前端开发纯css写的面包屑导航
摘要： 前端与游戏开发哪个好 游戏客户端开发前端 游戏开发的前端 代码片段 1 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <tit……
| 前端与游戏开发哪个好 |
| 游戏客户端开发前端 |
| 游戏开发的前端 |
代码片段 1
<!DOCTYPE html>
<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
近期评论