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>

新建文件

<!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>
 <script src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
 getdata("vote.php",1);

 $(".redhand").click(function(){
 getdata("vote.php?action=red",1);
 });
 $(".bluehand").click(function(){
 getdata("vote.php?action=blue",1);
 });
 });

 function getdata(url,sid){
 $.getJSON(url,{id:sid},function(data){
 if(data.success==1){
 var w = 208;
 $("#red_num").html(data.red);
 $("#red").css("width",data.red_percent*100+"%");
 var red_bar_w = w*data.red_percent-10;
 $("#red_bar").css("width",red_bar_w);
 $("#blue_num").html(data.blue);
 $("#blue").css("width",data.blue_percent*100+"%");
 var blue_bar_w = w*data.blue_percent;
 $("#blue_bar").css("width",blue_bar_w);

 }else{
 alert(data.msg);
 }
 });
 }
 </script>

</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>

提交重置代码

自动运行

全屏

PHP开发 红蓝两方投票功能教程之CSS样式

PHP开发红蓝两方投票功能教程之CSS样式