图片小精灵 & 解决同时给一个元素设置背景问题 &jq登录注册切换
2024-10-13 11:45:35
图片小精灵，当有整张图片时可以通过图片小精灵设置图标。
例如
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#xiao{
width: 50px;
height:50px;
border: 1px solid red;
position: absolute;
top: 100px;
left: 200px;
background:url(floor_nav.png) no-repeat;
background-position:0px -110px;
}
</style>
</head>
<body>
<div id="xiao"> </div>
</body>
</html>
2.当同时给一个块级元素设置背景颜色和背景图片时解决问题
分开设置每一个属性
background-color: ;
background-image: ;
3.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background-image:url(../images/tupian/亚麻布_看图王.jpg);
}
#wrap{
width: 500px;
margin: 0 auto;
}
#login{
width:350px;
height:400px;
background-color: #F7F7F7;
position: absolute;
margin: 50px;
box-shadow: 2px 2px 10px 8px #C9CDD4;
z-index: 2;
border-radius: 5px;
left:424px;
}
input{
position: relative;
top:90%;
left:45%;
}
#register{
width:350px;
height:520px;
background-color: #F7F7F7;
position: absolute;
margin: 50px;
box-shadow: 2px 2px 10px 8px #C9CDD4;
border-radius: 5px;
opacity: 0;
left:374px;
} </style>
<script src="../js/jquery-3.1.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#login>input").on("click",function(){
$("#login").animate({
left:"-450px",
opacity:"1"
},500,function(){
$("#login").css({
left:"374px",opacity:0
});
});
$("#register").animate({
left:"424px",
opacity:"1"
},500);
});
$("#register>input").on("click",function(){
$("#register").animate({
left:"-450px",
opacity:"1"
},500,function(){
$("#register").css({
left:"374px",opacity:0
});
});
$("#login").animate({
left:"424px",
opacity:"1"
},500);
});
});
</script>
</head>
<body>
<div id="wrap">
<div id="login">
<input type="button" name="" id="" value="register" />
</div>
<div id="register">
<input type="button" name="" id="" value="login" />
</div>
</div>
</body>
</html>
最新文章
- Fedora 22中的用户和用户组管理
- Python Day04
- LINQ查询字符串判断是否大写
- 【OOAD】OOP的主要特征
- SAP_Web_Service开发配置
- Selenium IDE验证点
- hosts文件失效，配置的域名不能成功访问
- 简单的jquery左侧导航栏和页面选中效果
- 使用证书创建request请求
- consul 剔除node_exporter的脚本
- QuerySet
- Tools - 浏览器Chrome
- sigar开发（java)
- （诊断）No module named MySQLdb
- 如何迁移完整SQL数据库到另外一台服务器
- Django：视图views（二）
- Delphi FrieDAC 大数据处理
- day25 面向对象之多态和鸭子类型
- 如何删除VS2015中的OpenCV的配置
- hudson.AbortException: No files found in path D:\testproject\project2\testoutput\ with configured filemask: output.xml