[北京|结业弟子]JS-顾仁鹏|2018年11月05日的日报-技能树.IT修真院

发表于： 2018-11-05 20:34:29

1 707

今天完成的事情：今天完成了任务7 主要是添加插入超链接的按钮，多亏了有bootstrap4布局，用<a>标签插入类名.btn 就可以设置按钮的宽高，不用特意去设置他的display属性，而把用css写的三角形变成可以点击的链接，正好用到绝对定位，也不用设置display属性：

 <a href="task7-2.html" class="triangle"></a>
<a class="btn btn-info blue-btn" role="button" href="task7-2.html">简化版</a>
<div>有1133个用户正在玩此款游戏</div>
<a class="btn btn-info blue-btn" role="button" href="task7-2.html">简化版</a>
<div>有1133个用户正在玩此款游戏</div>
<a class="btn btn-info blue-btn" role="button" href="task7-2.html">简化版</a>
<div>有1133个用户正在玩此款游戏</div>
<div class="row justify-content-center ">

.blue-btn{
width           : 80%;
height          : 85px;
line-height     : 71px;
color           : #fff;
font-size       : 20px;
background-color: #29bde0;
}

.triangle{
position    : absolute;
top         : 410px;
right       : 7.5%;
border      : 1rem solid #fbb435;
border-color: #fff #fbb435;
border-right: none;
}

图二按钮链接用到了模态窗，也是用的bootstrap4才能实现，其中涉及js我还不是太清楚，不过可以设置窗口里的按钮，我添加了一个链接按钮：

 <div class="container-fluid footer align-items-center justify-content-center">
<a href="#" class="btn btn-danger kill align-items-center justify-content-center" data-toggle="modal" data-target="#myModal">投死</a>
</div>
<div class="container">
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content  align-items-center justify-content-between window ">
<a href="task7-3.html" class="btn btn-danger yes" >确定</a>
<button type="button" class="btn btn-secondary no" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>

.kill{
display     : flex;
width       : 70vw;
height      : 12vw;
background  : #fbb435;
font-size   : 6vw;
border-color: #fbb435;
}

.window{
position      : absolute;
top           : 260px;
height        : 200px;
flex-direction: row;
}
.yes{
width      : 100px;
height     : 50px;
margin-left: 20px;
line-height: 36px;
}
.no{
width       : 100px;
height      : 50px;
margin-right: 20px;
}