DIV+CSS布置简单登录界面
body属性定义
body {
border: 1px solid #ADD8E6;
text-align: center;
background-image: url(bai.jpg);//插入背景图片(须同一文件夹内)
background-size:100% 100%;//图片自适应大小
fileter:alpha(opacity=80);//
-moz-opacity: 0.8;
opacity: 0.8;//透明度
font-family: Arial, Helvetica,sans-serif;
margin-left: auto;
margin-right: auto;
}
header属性定义
#header {
width: auto;
padding:10px;
margin: 0px;
background: -webkit-linear-gradient(top,aliceblue,lavender);//渐变色
height: 150px;
text-align: center;
}
#header p{//字体定义
font-family: cambria;//字体
padding-top:10px;
font-size: 100px;//大小
margin: 10px;
color: #9370db;//颜色
}
contain属性定义
#contain {
width: auto;
height: 550px;
border: 2px solid #ADD8E6;//边界颜色
text-align: center;
line-height: 20px;//边界宽度
background: -webkit-linear-gradient(top,lavender,lightsteelblue);
padding:10px;
margin: 0px;
}
footer属性定义
#footer {
height: 100px;
width: auto;
padding:10px;
background: -webkit-linear-gradient(top,lightsteelblue,lavender);
text-align: center;
}
文字及按钮设定
<body>
<div id="header" style="font-family:verdana"><p><b>whale</b></p></div