PHP开发 红蓝两方投票功能教程之CSS样式
创建vote.html文件
使用CSS将页面美化，加载背景图片，确定相对位置等等，你可以直接复制以下代码，在自己的项目中稍作修改即可。
<style>
#main{
width: 600px;
margin: 0 auto;
border: 1px solid #050205;
}
.vote{
width:358px;
height:300px;
margin:40px auto;
position:relative
}
.votetitle{
width:100%;
height:62px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat 0 30px;
font-size:15px
}
.red{
position:absolute;
left:0; top:64px;
height:80px;
}
.blue{position:absolute;
right:0;
top:64px;
height:80px;
}
.red p,.blue p{
line-height:22px
}
.redhand{
position:absolute;
left:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -1px -38px;
cursor:pointer
}
.bluehand{
position:absolute;
right:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -41px -38px;
cursor:pointer
}
.redbar{
position:absolute;
left:42px;
margin-top:8px;
}
.bluebar{
position:absolute;
right:42px;
margin-top:8px;
}
.redbar span{
display:block;
height:6px;
background:red;
width:100%;
border-radius:4px;
}
.bluebar span{
display:block;
height:6px;
background: blue;
width:100%;
border-radius:4px;
position:absolute;
}
.redbar p{
line-height:20px;
color:red;
}
.bluebar p{
line-height:20px;
color:#09f;
text-align:right;
margin-top:23px
}
</style>vote.html完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>红蓝投票功能</title>
<style>
#main{
width: 600px;
margin: 0 auto;
border: 1px solid #050205;
}
.vote{
width:358px;
height:300px;
margin:40px auto;
position:relative
}
.votetitle{
width:100%;
height:62px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat 0 30px;
font-size:15px
}
.red{
position:absolute;
left:0; top:64px;
height:80px;
}
.blue{position:absolute;
right:0;
top:64px;
height:80px;
}
.red p,.blue p{
line-height:22px
}
.redhand{
position:absolute;
left:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -1px -38px;
cursor:pointer
}
.bluehand{
position:absolute;
right:0;
width:36px;
height:36px;
background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -41px -38px;
cursor:pointer
}
.redbar{
position:absolute;
left:42px;
margin-top:8px;
}
.bluebar{
position:absolute;
right:42px;
margin-top:8px;
}
.redbar span{
display:block;
height:6px;
background:red;
width:100%;
border-radius:4px;
}
.bluebar span{
display:block;
height:6px;
background: blue;
width:100%;
border-radius:4px;
position:absolute;
}
.redbar p{
line-height:20px;
color:red;
}
.bluebar p{
line-height:20px;
color:#09f;
text-align:right;
margin-top:23px
}
</style>
</head>
<body>
<div id="main">
<h2>PHP+jQuery+MySql实现红蓝投票功能</h2>
<hr/>
<div class="vote">
<div class="votetitle">您对PHP中文网提供的文章的看法？</div>
<div class="red" id="red">
<p id="hong">非常实用</p>
<div class="redhand"></div>
<div class="redbar" id="red_bar">
<span></span>
<p id="red_num"></p>
</div>
</div>
<div class="blue" id="blue">
<p id="bu">完全看不懂</p>
<div class="bluehand"></div>
<div class="bluebar" id="blue_bar">
<span></span>
<p id="blue_num"></p>
</div>
</div>
</div>
</div>
</body>
</html>
