该楼层疑似违规已被系统折叠 隐藏此楼查看此楼

开发工具与关键技术：DW 使用HTML制作登陆界面设置透明背景图片

作者：冉启东

撰写时间：2019年1月20日

1.使用HTML制作登陆界面设置透明背景图片代码如下：

源代码：

登录界面纯净版

CSS(1)代码如下：

img{

opacity: 1;

/*--设置透明背景--*/

}

div#div1{

position: fixed;/*----设置背景-----*/

top: 0;

left: 0;

bottom: 0;

right: 0;

z-index: -1;

}

div#div1>img{

height: 100%;/*----背景大小----*/

width: 100%;

border: 0;

}

.cont {

width: 241px;/*边框样式*/

height: 230px;

padding: 15px;

border-radius: 5px;

box-shadow: 0 2px 3px #ccc;

margin-bottom: 20px;

margin: 250px auto;

}

a {/*登录字体*/

font-size: 20px;

margin-top: 0px;

color: #fff;

margin-left: 30px;

margin: auto;

text-decoration: none;

}

.al {/*按钮样式*/

width: 55px;

height: 35px;

border-radius: 5px;

margin-top: 0px;

margin: auto;

color: #fff;

background-color: #007bff;

border-color: #007bff;

}

.pro_plan {/*登录的边框*/

margin: 30px auto;

text-decoration: none;

text-align: center;

}

CSS(2)代码：

@charset "utf-8";

input{

height: 38px;/*高*/

width: 237px;/*宽*/

margin-top: 20px;/*上外边距*/

border-radius: 5px;

opacity: 0.7;

}

/*----------账号跟密码-----------*/

.zczh a {/*注册账号*/

height: 38px;

margin: -105px;

font-size: 20px;

color: #3CF326;

text-align: center;

}

.wjmm a {/*忘记密码*/

margin-left:-25px;

font-size: 20px;

color: #3CF326;

/*text-align: center;*/

float: right;

}

设置完效果图如下：