用绝对定位制作登录页实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用绝对定位制作登录页</title>
</head>
<style type="text/css">
body {
margin: 0 auto;
background-image: url("images/php.jpg");
background-size: cover;
}
.box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.7;
}
.login {
position: absolute;
left: 50%;
top: 50%;
margin-left: -255px;
margin-top: -250px;
}
.login img {
width: 510px;
height: 500px;
}
</style>
<body>
<div class="box"></div>
<div class="login"><img src="images/login.jpg" alt=""></div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
固定定位制作QQ客服广告效果实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位制作QQ客服广告效果</title>
</head>
<style type="text/css">
.login {
height: 2000px;
}
.qq {
width: 188px;
height: 188px;
padding: 6px;
background-color: #1DC116;
position: fixed;
right: 0;
bottom: 0;
}
.qq p {
height: 40px;
width: inherit;
text-align: justify;
text-indent: 2em;
margin: 8px auto;
}
button {
background: none;
border: none;
color: lightgrey;
font-size: 28px;
float: right;
}
.clear {
clear: both;
}
</style>
<body>
<h1>QQ客服广告小案例</h1>
<div class="login">
<div class="qq">
<button onclick="">X</button>
<div class="clear"></div>
<p>欢迎使用QQ客服广告招商</p>
<p>这是QQ客服制作广告的一个小案例，效果还行。</p>
</div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
