本期挑战:
给定如下HTML:
<div id="holder">
<h2>确认框设计效果</h2>
<p class="desc">请将鼠标悬浮于橙色按钮</p>
<div class="button">
<p class="btnText">确认</p>
<div class="btnTwo">
<p class="btnText2"> <i class="fa fa-check"></i> </p>
</div>
</div>
<div class="button">
<p class="btnText">取消</p>
<div class="btnTwo">
<p class="btnText2"> <i class="fa fa-times"></i> </p>
</div>
</div>
</div>
相关基本CSS如下:
@import url("http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css");
body{
background:#CFCFCF;
font-family: 'microsoft yahei',Arial,sans-serif;
}
h2{
font-weight: normal;
font-size:18px;
text-align:center;
}
.desc{
text-align:center;
font-size:12px;
color: #AFAFAF;
}
#holder{
background: white;
padding: 10px;
width: 250px;
margin: 60px auto;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
请生成类似如下的确认框鼠标悬浮效果:
点击这里挑战代码:http://www.gbtags.com/gb/share/5010.htm
给定如下HTML:
<div id="holder">
<h2>确认框设计效果</h2>
<p class="desc">请将鼠标悬浮于橙色按钮</p>
<div class="button">
<p class="btnText">确认</p>
<div class="btnTwo">
<p class="btnText2"> <i class="fa fa-check"></i> </p>
</div>
</div>
<div class="button">
<p class="btnText">取消</p>
<div class="btnTwo">
<p class="btnText2"> <i class="fa fa-times"></i> </p>
</div>
</div>
</div>
相关基本CSS如下:
@import url("http://cdn.gbtags.com/font-awesome/4.1.0/css/font-awesome.min.css");
body{
background:#CFCFCF;
font-family: 'microsoft yahei',Arial,sans-serif;
}
h2{
font-weight: normal;
font-size:18px;
text-align:center;
}
.desc{
text-align:center;
font-size:12px;
color: #AFAFAF;
}
#holder{
background: white;
padding: 10px;
width: 250px;
margin: 60px auto;
box-shadow: 0px 3px 10px rgba(0,0,0,0.2);
}
请生成类似如下的确认框鼠标悬浮效果:
点击这里挑战代码:http://www.gbtags.com/gb/share/5010.htm