div+css样式

Div+Css

随着页面上的需求变大，许多的东西不再使用单纯的图片、按钮、文字，而是通过Div+Css来实现按钮，公司的需求就是这样，一直在弄这个模块，顺便的总结一下

列如下面的页面都是通过div+css来实现的.

许多的东西都是用相应的键盘监听事件，当键盘按下方向键时都是使用样式来修改界面。

 

例子1、使用div+css样式制作如下所示的按钮

 

样式如下（如果需要让按钮呈现扁平的状态的话就添加属性border-radius: 5px;）

<style type="text/css">

.change{
　　position: absolute;
　　top: 670px;
　　left: 1100px;
　　border: 3px solid rgba(240, 253, 0, 1);
　　box-shadow: rgba(240, 253, 0, 0.8) 0px 0px 8px 3px;
}

</style>

在页面中直接使用样式

<div class="change">切换用户</div>

当然除了这些简单的div+css做一些普通的按钮外，也可以做一些相应的确认和取消对话框

2.用js来监听是否有键盘事件

当然你需要去下载相应的js文件两个，点击 https://files.cnblogs.com/files/antonyhubei/keyevent.js下载keyevent.min.js，点击https://files.cnblogs.com/files/antonyhubei/jquery-1.10.2.min.js下载jquery-1.10.2.min.js

<script type="text/javascript" src="js/jquery-1.10.2.min.js" ></script>
<script type="text/javascript" src="js/keyevent.min.js" ></script>
<script type="text/javascript">
　　function eventHandle(keyObj) {
　　　　switch (keyObj.str) {
　　　　　　case "DPAD_LEFT":
　　　　　　　　　　alert("left");
　　　　　　　　　　　　break;
　　　　　　case "DPAD_UP":
　　　　　　　　　　alert("up");
　　　　　　　　　　　　break;
　　　　　　case "DPAD_RIGHT":
　　　　　　　　　　alert("right");
　　　　　　　　　　　　break;
　　　　　　case "DPAD_DOWN":
　　　　　　　　　　alert("down");
　　　　　　　　　　　　break;
　　　　　　case "DPAD_OK":
　　　　　　　　　　alert("ok");
　　　　　　　　　　　　break;
　　　　　　case "NAV_BACK":
　　　　　　　　　　alert("BACK");
　　　　　　　　　　　　break;
　　　　　　}
　　　}
</script>

3、用div+css制作简单的登录、注册对话框，实例图如下所示

 样式如下所示，所需要的三张图片如下所示

  

<style type="text/css">

.confrimBox{
　　display: none;
　　position: absolute;
　　left: 0;
　　top: 0;
　　width: 100%;
　　height: 100%;
　　background: rgba(0, 0, 0, 0.5);
　　z-index: 2
}

.login-btn {//可以抽取到某个comm.css文件中去
　　width: 293px;
　　height: 80px;
　　margin-left: 2px;
}

.regist-btn {//可以抽取懂啊某个comm.css文件中去
　　visibility: hidden;
　　width: 293px;
　　height: 80px;
}

.confrim {
　　background: url(img/confrim_login_bg.png);
}
.login-btn {
　　background: url(img/login_btn.png);
}
.regist-btn {
　　background: url(img/regist_btn.png);
}

</style>

然后再页面中使用相应的样式

<div class="confrimBox">
　　<div class="confrim" style="z-index:3">
　　　　<div class="confrimText"><span style="font-size: 28px;">你还没有登录，是否现在登录/注册？</span></div>
　　　　<div class="login-btn"></div>
　　　　<div class="regist-btn"></div>
　　</div>
</div>

 然后就是监听到某个事件之后就设置样式的脚步

<script type="text/javascript">

var focusPos = 0

function setPlayrecordFocus(focusPos) {
　　if (focusPos == 0) {
　　　　$(".regist-btn").css("visibility", "hidden");
　　　　$(".login-btn").css("visibility", "visible");
　　} else if (focusPos == 1) {
　　　　$(".login-btn").css("visibility", "hidden");
　　　　$(".regist-btn").css("visibility", "visible");
　　}
}

</script>