⽕影忍者⽹页设计html,html+css+js实现⽕影背景切换登录页
⾯
1.效果图(代码往下滑)
2.html代码
3.css代码上传文件contenttype
java课程设计的感想*{
margin:0px;
padding:0px;
}
/* *号是全部的都外边距和内边距都为0，⽽body只是主题的外边距和内边距都为0 需要给 html 和 body 同时设宽⾼ 100% 图⽚才能覆盖浏览器页⾯*/
html,body{
overflow:hidden;
width:100%;
height:100%;
数据库课程设计文献}
#ninjia{
position:relative;
width:100%;
height:100%;
/*设置 border 为透明，防⽌内部外边距溢出*/ border: 1px solid transparent;
}
#ninjia div{
position:absolute;
width: 100%;
height: 100%;
z-index: -1;
transition:3s;
}
p{
/*position:absolute;*/
font-size:25px;
width: 270px;
color:white;
text-align: center;
margin: 200px auto 0;
/*margin:0px auto;*/
font-family:"微软雅⿊";
}
.user{
display: block;
strike upmargin: 20px auto;
font-size:18px;
width:270px;
height: 44px;
color:white;
background:rgba(45,45,45,0.15);
05网伴你学border-radius: 6px;
border:1px solid rgba(255,255,255,.15);
box-shadow:0 2px 3px 0 rgba(0,0,0,1) inset;
text-indent:10px;
}
.sub{
display: block;
margin: auto;
font-size:18px;
font-family:"微软雅⿊";
font-weight:20px;
color:#ffffff;
outline:none;
/*background:#ef4300;*/
background:red;
/*background:#ff4e20;*/
height:44px;
width:270px;
box-shadow:0 15px 30px 0 rgba(255,255,255,.25) inset,0 2px 7px 0 rgba(0,0,0,.2); border:0px;
border-radius:6px;
cursor:pointer;
/* ⿏标指针变成 ⼿ 的形状，和放到链接上⾯的⿏标指针⼀样 */
opacity:1;
}
3.原⽣js代码
这是第⼀次⽤原⽣js写了⼀些效果，虽然⽐较简单，但对⾃⼰⽽⾔也还是进步了⼀些。这次⽤的js效果对⼀些初学者来说还是⽐较容易看懂的，希望对⼤家有所帮助。
(注：如果觉得我写的代码不规范，或还是有问题，有更好的建议，欢迎⼤家评论o(*￣︶￣*)o)学生个人网页制作html代码css

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。