masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pembangunan PHP fungsi pengundian merah dan biru tutorial gaya CSS

Buat fail vote.html

Gunakan CSS untuk mencantikkan halaman, memuatkan imej latar belakang, menentukan kedudukan relatif, dsb. Anda boleh menyalin terus kod berikut , dalam Hanya buat sedikit pengubahsuaian dalam projek anda sendiri. 

 <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 kod lengkap

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




Meneruskan pembelajaran
||
<!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>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492719 permainan