您的位置：首页 > 其它

右侧边栏滑入滑出

2016-01-07 14:19 267 查看 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

<title>右侧边栏滑入滑出</title>

<style>
*{
margin:0;
padding:0;
}

.ww{
width:100%;position:relative;overflow:hidden;
}

.zdk{
width:100%;
background-color:orange;
}

.cbk{
width:60%;
height:90%;
background-color:red;
position:absolute;
z-index:500;
top:0;
right:-60%;
transition:all linear 0.5s;
}

.clo{
padding:5px;
font-size:35px;
margin-left: 91%;
}
</style>

</head>
<body>
<div class='ww'>
<div class="zdk">
<button value="dj" class="btn" style="width:70px;height:50px">123</button>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="cbk">
<button class="clo">x</button>
<div>
<form class="f1" action="http://www.baidu.com" method="get">
<fieldset >
<legend>表单的注册</legend>
<table width=100% >
<tbody>
<tr ><td class=“left” width=40% align="right"><label for="t1">姓 名：</label></td>
<td class="right"><input type="text" id="t1" name="Name"></td>
</tr>
<tr><td class=“left” width=40% align="right"><label for="Password1">密 码：</label></td>
<td class="right"><input id="Password1" type="password" name="Password" /></td>
</tr>
<tr><td class=“left” width=40% align="right"><label for="e1">邮 箱：</label></td>
<td class="right"><input type="email" id="e1" name="youxiang" ></td>
</tr>
<tr><td class=“left” width=40% align="right"><label for="1">性 别：</label></td>
<td class="right"><input type="radio" id="1" name="ssex" value="nan" />男<!-- name设置成一样的就行了-->
<input type="radio" id="2" name="ssex" value="nv" />女
</td>
</tr>
<tr><td class=“left” width=40% align="right">地 区：</td>
<td><select id="selc" name="place">
<option value="quanzhou">泉州</option>
<option value="xiamen">厦门</option>
<option value="zhangzhou" >漳州</option>
</select>
</td>
</tr>
<tr><td class=“left” width=40% align="right"><label for="txtarea">简 介：</label></td>
<td><textarea id="txtarea"></textarea></td>
</tr>
<tr><td class=“left” width=40% align="right">兴 趣：</td>
<td><input type="checkbox" id="cbox1" name="dushu" value="c1">读书
<input type="checkbox" id="cbox2" name="yundong" value="c2">运动
<input type="checkbox" id="cbox3"name="chihe" value="c3">吃喝
</td>
</tr>
<tr><td class=“left” width=40% align="right">上 传：</td>
<td> <input type="file" id="f1" name="shangchuan" value="File1" /></td>
</tr>
<tr><td class=“left” width=40% align="right" rowspan=2>
<input id="Submit1" type="submit" value="提 交" />
</td>
<td> <input id="Reset1" type="reset" value="重 置" />
</td>
</tr>
</tbody>
</table>
</fieldset>
</form>
</div>
</div>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br>
<script src="js/jquery-1.11.3.js"></script>

<script>
(function($) {
$(".btn").click(function(){
$(".cbk").css({"right":"0"});
})
$(".clo").click(function(){
$(".cbk").css({"right":"-60%"});
})
})(jQuery)
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  右侧边栏滑入滑出 侧边栏滑入滑出 滑入滑出 滑入
相关文章推荐
新的分享
章节导航