投票排行榜网站（HTML+CSS+JS）

已于 2024-01-18 11:44:33 修改
阅读量6.2k 收藏 87
点赞数 16
分类专栏： 项目 文章标签： html css javascript
于 2022-06-17 21:42:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/llssdshiyi/article/details/125340392
版权

前端基础练习小项目，全部代码已贴出

【已上传该项目完整资源（包含图片等）至我的资源区。全部代码已经贴出来了，资源里也就多了图片图标而已，替换一下就行】

初始页面
用户注册

 上面为登录和注册的初始页面，登录注册为浮动窗口

 以下是相关代码

<!DOCTYPE html>
<!-- 初始页面 init.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="init.css" type="text/css"><!-- 引用CSS表 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{width:100%; overflow: hidden;margin: 0px;background-color: rgb(255, 255, 255);}
        
    </style>
</head>

<body><!-- 初始页面 -->
    <div id="header">
        <div id=headertitle>
            <span id="titletop">十佳创意摄影大赛</span>
            <span id="titlebottom">决赛榜</span>
        </div>
    </div>
    <div id="main">
        <div id="w"><!--默认为登录窗口-->
            <div id="loginimg"><img src="images/检测数据.png" alt=""></div>
            <iframe name="initframe" src="login.html" frameborder=0 scolling="no">
            </iframe>
        </div>
    </div>
    <div id="footer">
            <p>CSDN：由一说一&nbsp;&nbsp;&nbsp;Web实训作业<br/></p>
    </div>
</body>
</html>
<!DOCTYPE html>
<!--/**/  -->
<!-- 登陆窗口 login.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="init.css" type="text/css"><!-- 引用CSS表 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title_left a{color: rgb(62, 116, 233);}
        #title_right a{color: rgb(167, 197, 221);}
    </style>
    <!-- 登录页面JS -->
    <script>
        function $(id){return document.getElementById(id);}
         function checklog(){
            var name=$("name").value;//获取对象内容
            var pwd=$("pwd").value;
            var username=localStorage.username;//注册页面信息
            var userpwd=localStorage.userpwd;
            var checkright=true;
            if(name != username){
                alert("该账号未注册！");
                checkright=false;
            }
            else if(pwd != userpwd){
                alert("密码错误！");
                checkright=false;
            }
            else{
                alert("欢迎登录！"+name);
                parent.location.href="main.html";//全网页转向
            }
            return checkright;
        }
     </script>
</head>
<!-- 登录页面 -->
<body>
    <div id=login>
        <div id=title>
            <div id=title_left>
                <a  href="login.html" target="initframe">用户登录</a>
            </div>
            <div id=title_right>
                <a  href="reg.html" target="initframe">用户注册</a>
            </div>
        </div>
        <form method="get" autocomplete="on" onsubmit="return checklog()" ><!-- 登录按钮返回登录函数结果 -->
                <div id=input>
                    <span>用户名</span>
                    <input type="tel" id="name" placeholder="用户名为注册时的手机号" required autofocus><br/><!-- 用户名为手机号 -->
                    <span>密码</span>
                    <input type="password" id="pwd" placeholder="请输入密码" required><br/>
                    <input type="submit" id="button" value="登录"><br/>
                    <img class="ftimg" src="images/星球.png">
                </div>
        </form>
    </div>
</body>
</html>
<!DOCTYPE html>
<!-- 注册窗口 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="init.css" type="text/css"><!-- 引用CSS表 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #title_left a{color: rgb(167, 197, 221);}
        #title_right a{color: rgb(62, 116, 233);}
    </style>
    <!-- 注册页面JS -->
    <script>
        function $(id){return document.getElementById(id);}
        function checkReg(){/*本地存储*/
            localStorage.username=$("username").value;
            localStorage.userpwd=$("userpwd").value;
            alert("注册成功！");
        }
    </script>
</head>
<!-- 注册页面 -->
<body>
    <div id=login>
        <div id=title>
            <div id=title_left>
                <a  href="login.html" target="initframe">用户登录</a>
            </div>
            <div id=title_right>
                <a  href="reg.html" target="initframe">用户注册</a>
            </div>
        </div>
        <form autocomplete="on" method="get" action="login.html" onsubmit="checkReg()">
            <span>手机号码</span>
            <input id="username" type="tel" title="请输入手机号" pattern="1[3|4|5|8][0-9][0-9]{8}$" placeholder="请输入你的手机号码" required autofocus><br/>
            <span>密码</span>
            <input id="userpwd" type="password" placeholder="密码长度不小于6个字符" pattern="[0-9]{6,}" required><br/>
            <input id="button" type="submit" value="同意协议并注册"><br/>
            <img class="ftimg" src="images/未登录.png">
        </form>
    </div>
</body>
</html>

登录成功后进入主页，主页显示参赛作品，每个作品下带投票按钮，可随时查看投票结果 

投票页面：

 

 投票结果排行榜页面：

<!DOCTYPE html>
<!-- 主页 -->
<!-- /*  */ -->
<!-- windows 1514*752 -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="main.css" type="text/css"><!-- 引用CSS表 -->
    <title>Document</title>
</head>
<body>
    <!-- 头部 -->
    <div id=header>
        <marquee>快给你喜欢的作品投票吧，每个用户投票期间有10次投票机会。投票截止时间为2021年9月01日20：00：00，请在活动截止前完成投票</marquee>
        <img id=gg src="images/公告.png">
    </div>
    <!-- 主要内容容器 -->
    <div id=mainpane>
        <!-- 活动介绍 -->
        <div id=time_relus_box>
            <div id=frame>
                <div class=title>活动介绍</div>
                <div class=relus>投票开始：2021-6-30 20:00:00</div>
                <div class=relus>投票截止：2021-9-01 20:00:00</div>
                <div class=relus>投票规则：每个用户投票期间只能投10次</div>
            </div>
            <span class=paihang>
                <img src="images/排行榜 (1).png">
                <input type="button" id=paihangbutton  value="查看当前排行榜">
            </span>
        </div>
        <div id=dots1><img src="images/地图连线竖,连接,连线.png"></div>
        <div id=dots2><img src="images/地图连线竖,连接,连线.png"></div>
        <!-- 投票页面 -->
        <div id=vote>
            <div class=voteitem> <!-- 选手容器 -->
                <img class=itemimg src="images/works1.png"> <!-- 选手作品 -->
                <span class=id>1号</span> <!-- 选手编号 -->
                <span class=name>细语</span> <!-- 选手名字 -->
                <span class=synopsis>这是我的摄影作品，请为我投票吧</span> <!-- 作品简介 -->
                <span class=piao>63</span> <!-- 初始票数 -->
                <div class="pick"><input type="button" value="投票"></div> <!-- 投票按钮 -->
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works2.png">
                <span class=id>2号</span>
                <span class=name>亲吻</span>
                <span class=synopsis>亲密无间</span>
                <span class=piao>58</span>
                <div class="pick"><input type="button"  value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works3.png">
                <span class=id>3号</span>
                <span class=name>交心</span>
                <span class=synopsis>婚礼现场的摄影作品</span>
                <span class=piao>57</span>
                <div class="pick"><input type="button" value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works4.png">
                <span class=id>4号</span>
                <span class=name>快乐</span>
                <span class=synopsis>拍摄于劳动市集</span>
                <span class=piao>65</span>
                <div class="pick"><input type="button"   value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works5.png">
                <span class=id>5号</span>
                <span class=name>打闹</span>
                <span class=synopsis>嬉戏打闹</span>
                <span class=piao>60</span>
                <div class="pick"><input type="button"  value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works6.png">
                <span class=id>6号</span>
                <span class=name>全家福</span>
                <span class=synopsis>全家趣味合影</span>
                <span class=piao>68</span>
                <div class="pick"><input type="button"   value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works7.png">
                <span class=id>7号</span>
                <span class=name>古堡男人与猫</span>
                <span class=synopsis>美男个人写真</span>
                <span class=piao>101</span>
                <div class="pick"><input type="button"  value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/works8.jpg">
                <span class=id>8号</span>
                <span class=name>艾伦</span>
                <span class=synopsis>今天抓拍到的一个帅气小哥</span>
                <span class=piao>88</span>
                <div class="pick"><input type="button"   value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/选手空白图.png">
                <span class=id>9号</span>
                <span class=name>9号作品</span>
                <span class=synopsis>这里简介</span>
                <span class=piao>30</span>
                <div class="pick"><input type="button"  value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/选手空白图.png">
                <span class=id>10号</span>
                <span class=name>10号作品</span>
                <span class=synopsis>这里简介</span>
                <span class=piao>38</span>
                <div class="pick"><input type="button"   value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/选手空白图.png">
                <span class=id>11号</span>
                <span class=name>10号作品</span>
                <span class=synopsis>这里简介</span>
                <span class=piao>22</span>
                <div class="pick"><input type="button"   value="投票"></div>
            </div>
            <div class=voteitem>
                <img class=itemimg src="images/选手空白图.png">
                <span class=id>12号</span>
                <span class=name>10号作品</span>
                <span class=synopsis>这里简介</span>
                <span class=piao>45</span>
                <div class="pick"><input type="button"   value="投票"></div>
            </div>
           
            <span class=synopsis>已经到底啦~快给你喜欢的作品投票吧!</span>
        </div>

        <!-- 投票结果页面 -->
            <div id=result>
                <div id=resultheader>
                    <img src="images/暂无排名.png" id="resultheadimg">
                    <div id=resulttitle>
                        <div id="titletop">十佳创意摄影大赛</div>
                        <div id="titlebottom">决赛榜</div>
                    </div>
                </div>
                <!-- 选手排名 js生成-->
                <div class="mainbox">
                    <ul class="list">
                    </ul>
                </div>
            </div>
    </div>
    <!-- 固定侧边栏 -->
    <div id=fixed>
        <div id=fixed1>
            <span id=sy></span>
            <div id=txtsy>首页</div>  
         </div>
         <div id=fixed2>
             <span id=phb></span>
            <div id=txtphb>排行榜</div>
         </div>
    </div>
    <!-- 底部 -->
    <div id=footer>
        CSDN：由一说一  Web实训作业
    </div>


    <script type="text/javascript" src="main.js">
    //导入js文件
    </script>
</body>
</html>
//main.js
//应用于main.html
    var cishu=0;//投票次数
    var pick = document.querySelectorAll('.pick > input');//获取所有投票按钮
    // localStorage.removeItem('username');
    var username=localStorage.username;//登录页面信息
    var userpwd=localStorage.userpwd;
        for(let i = 0; i < pick.length; i++){
            pick[i].onclick = function(){
            if(cishu>10){
                alert("每人只有10次投票机会");
                return;
            }
            if(username='' || username==null){
                alert("还未登录！将为你跳转登录页面");
                parent.location.href="init.html";//全网页转向
            }
            else{
            this.parentNode.parentNode.querySelector('.piao').innerText++;//票数+1
            //输入票数，.piao类在主页面隐藏
            alert('投票成功！');
            cishu++;//投票次数+1
            }
        }
    }
    var xssy = document.querySelector('#fixed1');//点击固定栏首页图标显示首页
    xssy.onclick=function(){
        document.querySelector('.list').innerHTML="";//清空页面
            document.querySelector('.paihang').innerHTML=`
            <img src="images/排行榜 (1).png">
            <input type="button" id=paihangbutton  value="查看当前排行榜">
            `;
            //隐藏并取消监听
            document.getElementById('result').style.display='none';
            document.getElementById('vote').style.display='block';
        // document.getElementById('result').style.visibility='hidden';//隐藏并取消监听
        // document.getElementById('vote').style.visibility='visible';//hidden,visible
    }
    var ph = document.querySelector('#paihangbutton');//点击首页查看排行榜按钮触发事件
    ph.onclick=function(){
            phb();
    }
    var xsphb = document.querySelector('#fixed2');//点击固定栏排行榜触发事件
    xsphb.onclick=function(){
        phb();
    }

    // 结果页面
    function phb(){//初始化页面  
        
            var itemlist = document.querySelectorAll('.voteitem');//获取类voteitem下元素
            var arr=[];//排序
            var data=[];//存储
            for(var i =0;i<itemlist.length;i++){//小于元素个数长度
                arr.push(itemlist[i]);//添加多个元素并返回新的长度，加在起始位置用unshift()。形成对象字符串数组
            }
            var max;
            for(var i =0;i<arr.length;i++){//排序，票数大的排在前面，arr[0]为最大
                for(var j=i;j<arr.length;j++){
                    if(parseInt(arr[i].querySelector('.piao').innerText)<parseInt(arr[j].querySelector('.piao').innerText)){
                        max=arr[j];
                        arr[j]=arr[i];
                        arr[i]=max;
                    }
                }
            }
            for(let o =0;o<arr.length;o++){
                var item ={}//
                item.id=arr[o].querySelector('.id').innerText;
                item.name=arr[o].querySelector('.name').innerText;
                item.piao=arr[o].querySelector('.piao').innerText;
                data.push(item)//排序好的arr组，即排行
            }
            localStorage.setItem('phnr',JSON.stringify(data));//本地存储
            var data1 = JSON.parse(localStorage.getItem("phnr"));//转换
            document.querySelector('.list').innerHTML="";//清空页面
            document.querySelector('.paihang').innerHTML=`
            <img id="kjpm" src="images/平躺玩手机.svg">
            `;
            if(data1!=null || data1!=''){
                for(let i =0;i<data1.length;i++){
                   //输出投票排名结果
                    document.querySelector('.list').innerHTML+=`
                        <li class="item">
                            <div class="mingci" id="paiming${i+1}"><span>${i+1}</span></div>
                            <div class="mingz">
                                <h3 class="resultname"><span>${data1[i].id}</span><span>(${data1[i].name})</span></h3>
                                <div class="line" style="width:${data1[i].piao*3}px;"></div>
                            </div>
                            <div class="number">
                                <span>${data1[i].piao}</span>票
                            </div>
                        </li>
                    `;
                }
            }
            document.getElementById('vote').style.display='none';//隐藏并取消监听
            document.getElementById('result').style.display='block';
            // document.getElementById('vote').style.visibility='hidden';//隐藏并取消监听
            // document.getElementById('result').style.visibility='visible';//显示结果页面
        }
/* 样式文件名：init.css
应用：投票网站初始界面
应用对象：init.html ;login.html ;reg.html
 */
 #header{width:900px;height:88px;;margin: 0 auto;font:20px 行楷,楷体;color: rgb(33, 45, 107);}
 #headertitle{position: absolute;left:300px;top:16px;text-align: center;}
 #titletop{display: inline; font-size: 53px;font-weight: 700;letter-spacing: 6.5px;font-family:"华文彩云";color: rgb(34, 17, 192);}
 #titlebottom{display: inline;font-size: 33px;font-weight: 500;letter-spacing: 10px;font-family: "华文琥珀";color:rgb(106, 161, 233)}
 #main{width:100%;height:600px;text-align: center;background-color:rgb(227, 231, 203);position: absolute;top:88px;padding: 0px;}
 #w{width:900px;height:100%; margin:0 auto;} 
 #loginimg{float:left;position:relative;top: 140px;}
 #loginimg img{width:500px;}
 iframe{width:389px;height:340px;position:relative;float:left;top:125px;}
 #footer{width:100%;height:62px;font-size: 10px;;text-align: center;background-color:rgb(255, 255, 255);vertical-align: middle;position: absolute;top:688px;}

#login{width:320px;height:270px;position:relative;float:left;background-color: rgb(253, 253, 253);padding:25px;border-radius: 19px;}/*border-radius设置圆角*/
#title{height:24px;padding: 12px 0 18px 0;}
#title a{font:bold 24px 行楷;text-decoration: none;}/*设置字体大小样式、取消下划线*/
#title a:hover{color: rgb(62, 116, 233);}
#title_left{width:155px;border-right: 1px solid #ccc;text-align: center;float: left;}
#title_right{width:155px;float: left;text-align: center;}
#skip_a{padding:25px 10px 15px 10px;text-decoration: none;}
input{width:208px;height:23px;margin: 10px;}
span{display: inline-block; text-align: center;width:66px;height:23px;}
#button{width:218px;height:36px; border-radius: 3px;line-height: 34px;margin-left: 82px;background-color: rgb(147, 181, 224);color: rgb(255, 255, 255);border-color:rgb(162, 194, 235) ;}
.ftimg{
    position: relative;
    top:0px;
    display: block;
    max-width: 70%;/* 控制图片大小 */
    max-height:80px;
    min-width: 30%;
    min-height: 80px;}
/* 文件名：main.css
应用于：main.html
*/
body{
    width:1514px;
    margin: 0px;
    background-image: url("images/创意摄影大赛背景.png");
    background-size:cover;
    background-attachment: fixed;
    color: rgb(50, 97, 185);
    font-size: 16px;
}/* 背景图固定，图片扩展填充，字体颜色类蓝色 */

#header{/* 头部 */
    height: 275px;
    text-align: center;
    position:relative;
    top:0px;
    border-style: solid;
    border-image-source: url("images/创意摄影比赛头图.jpg");
    border-image-slice:0 18 0 30;
    border-image-repeat: stretch;
    border-image-width: 0px 510px 0px 510px;
    background-image: url("images/创意摄影比赛头图.jpg");
    background-size: contain;
    background-position: center;
}/* 边框图案切割，填充方式为拉伸;背景图居中 */

#gg{/* 滚动公告小图标 */
    display: inline-block;
    position: absolute;
    top:0px;
    left:0px;
    max-width: 24px;
    background-color: #111111;
}

marquee{/* 滚动公告 */
    height:24px;
    background-color: rgb(14, 13, 13);
    color: rgb(255, 255, 255);
}

#headerimg{/* 头部标题图 */
    margin:0px;
    top:0;
    position: relative;
    top: 0px;
}

#mainpane{/* 主要容器 */
    width:1080px;
    height:1630px;
    position: relative;
    top:0px;
    margin:0px auto;
}
#time_relus_box{/* 活动介绍容器 */
    width:600px;
    height:310px;
    border: 10px solid #4D38B3;
    border-radius: 19px;
    background-color: #e6e3ed;
    padding: 20px 20px;
    margin:10px auto;
}

#frame{
    border: 3px solid #4D38B3;
    box-sizing: inherit;
    padding:25px 25px;
}

.title{/* 活动介绍标题 */
    font-size: 30px;
    text-align: center;
}

.relus{/* 活动介绍内容 */
    margin-top: 15px;
    font-size: 20px;
}

#paihangbutton{/* 查看排行榜按钮 */
    width:600px;
    height:60px;
    margin:20px 0;
    font-size: 24px;
}

#kjpm{
    min-height: 100px;
    max-height: 100px;
    position: absolute;
    top:260px;
    left:435px;
}
.paihang img{/* 排行榜图标 */
    position: absolute;
    top:286px;
    left:410px;
}

#dots1{/* 连接图标 */
    position: absolute;
    left:230px;
    top:343px;
    z-index: 1;
}

#dots2{
    position: absolute;
    right:230px;
    top:343px;
    z-index: 1;
}

#vote{/* 投票容器 */
    width:810x;
    height:1200px;
    border: 10px solid #4D38B3;
    display: block;
    /* visibility: visible; */
    /* 是否可见 */
    border-radius: 19px;
    background-color: #e3ddf0;
    padding: 20px 20px;
}

.voteitem{/* 投票条例容器 */
    width:242px;
    height:350px;
    border:6px solid #e6e3ed;
    border-radius: 10px;
    background-color: #fff;
    margin-bottom:10px;
    padding-bottom: 25px;
    float: left;
}

.itemimg{/* 作品图 */
    display: block;
    max-width: 100%;/* 控制图片大小 */
    max-height:242px;
    min-width: 100%;
    min-height: 242px;
}

.id{/* 编号 */
    font-size: 20px;
    display: block;
    color: cornflowerblue;
    text-align: center;
    line-height: 30px;
    margin: 3px 0;
} 

.name{/* 名字 */
    font-size: 17px;
    display: block;
    color: rgb(13, 13, 14);
    text-align: center;
    line-height: 30px;
    margin:0px;
} 

.synopsis{/* 简介 */
    margin:0px;
    display: block;
    color: rgb(162, 165, 170);
    text-align: center;
    line-height: 20px;
}

.piao{
    display: none;/* 票数隐藏 */
}

.pick{/* 投票 */
    margin:0px;
    text-align: center;
    width:100%;
    height:50px;
    margin-top: 10px;
}
input{/* 按钮 */
    width:222px;
    height:30px;
    font-size: 18px;
    background-color: rgb(206, 189, 223);
    color: rgb(255, 255, 255);
    border-color: rgb(206, 189, 223);
}

/* 结果页面 */
#result{/* 投票结果容器 */
    display: none;
    /* visibility: hidden; */
    /* 隐藏并取消监听 */
}

#resultheader{/* 结果头部 */
    position: absolute;
    top:380px;left:70px;
    width:902px;
    height:190px;
    background-color: rgb(155, 127, 255);
    border-radius: 32px 32px 0px 0px;
}

#resultheadimg{
    display: block;
    max-width: 200;
    min-width: 200;
    max-height:200px;
    min-height: 200px;
    position:relative;
    top:0px;
    left:40px;
}

#resulttitle{
    position: absolute;
    right:100px;
    top:45px;
    text-align: center;
}

#titletop{
    font-size: 48px;
    font-weight: 700;
    letter-spacing: 6.5px;
    font-family:"华文彩云";
    color: rgb(246, 248, 221);
    margin:10px 0;
}

#titlebottom{
    font-size: 38px;
    font-weight: 500;
    letter-spacing: 35px;
    font-family: "华文琥珀";
    color:rgb(96, 230, 185);
}

.mainbox{/* 主要排行容器 */
    position: absolute;
    top:570px;
    left:70px;
    min-width:835px;
    width:55%;
    height:1000px;
    margin:0 auto;
    display:flex;/* 弹性盒子 */
    border: 13px solid #4D38B3;
    border-radius: 0px 0px 32px 32px;
    background-color: #e6e3ed;
    padding: 20px 20px;
}

.list{/* 选手列表 */
    width:100%;
    height:100%;
    list-style: none;/* 取消符号 */
    margin:0;
    padding: 0;
}

ul{
    list-style: none;
    display: block;
    margin-block-start:1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 40px;
}

li{
    width:450px;
    height:80px;
    font-size:20px;
    display: flex;
    align-items: center;
    padding: 0 0;
}

.mingci{/* 名次 */
    color: rgb(5, 5, 5);
    background-image: url("images/排行榜.png");/* 默认名次图标 */
    background-size: contain;/* 缩小图片来适应 */
    width:50px;
    height:50px;
    text-align: center;
    box-sizing:border-box;/* 容器大小包括border和padding */
    padding: 16px 0px;
}

#paiming1{/* 重设第一名样式 */
    color: rgb(255, 255, 255);
    background-image: url("images/排行.png");
}

#paiming2{/* 重设第二名样式 */
    color: rgb(255, 255, 255);
    background-image: url("images/排行\ \(1\).png");
}

#paiming3{/* 重设第三名样式 */
    color: rgb(255, 255, 255);
    background-image: url("images/排行\ \(2\).png");
}

.resultname{/* 名字左对齐 */
    text-align: left;
}

.line{/* 排名条 */
    height:10px;
    background-color: blue;
    border-radius: 0 5px 5px 0;
}

.number{/* 票数 */
    position: absolute;
    right:35px;
}

#fixed{/* 固定容器 */
    position: fixed;
    right:0px;
    bottom: 50px;
    width:44px;
    height:89px;
}

#fixed1,#fixed2{/* 固定方块 */
    position: relative;
    right:0px;
    bottom: 0px;
    width:44px;
    height:44px;
    background-color: #8f8c8ca2;
    text-align: center;
    line-height: 40px;
}

#fixed2{
    bottom:-1px;
}

#sy{/* 图标层 */
    display: block;
    position: absolute;
    top: 6px;
    left: 6px;
    width: 32px;
    height: 32px;
}

#phb{/* 设置图标层大小和位置 */
    display: block;
    position: absolute;
    bottom:6px;
    left: 6px;
    display: block;
    width: 32px;
    height: 32px;
}

#sy::before{/* 添加图标 */
    content:url("images/主页.png");
}

#phb::before{
    content:url("images/phb.png");
}

#sy:hover{/* 悬停样式 */
    content:url("images/主页\ \(1\).png");
}

#phb:hover{
    content:url("images/phb2.png")
}

#txtsy,#txtphb{/* 文字层 */
    position: absolute;/* 设置文字标的样式 */
    padding: 0 10px;
    height: 24px;
    line-height: 24px;
    font-size: 12px;
    color: #fff;
    white-space: nowrap;
    border-radius: 3px;
    background-color: rgb(215, 170, 252);
    display: none;
    /* opacity: 0;透明度等级 
    transition: opacity .2s;*/
}/*过渡/
    /*  */

#txtsy{/* 设置文字标的位置 */
    top: 9px;/* 相对#fixed的位置 */
    right: 48px;
}
#txtphb{
    top:9px;
    right:48px;
}
#txtsy::after,#txtphb::after{/* 显示三角 */
    content: '';/* 输出空格 */
    display: block;
    position: absolute;
    top: 8px;/* 设置小三角位置 */
    right: -8px;
    width: 0;
    height: 0;/* 内框为0 */
    border: 4px solid transparent;/* 设置边框，颜色透明 */
    border-left: 4px solid rgb(215, 170, 252);/* 显示左边边框 */
}

#fixed1:hover #txtsy,#fixed2:hover #txtphb{/* 悬停方块样式 */
    display: block;/* 设为不透明 */
}

#footer{/* 底部 */
    margin: 15px 0px;
    width: 100%;
    height:30px;
    text-align: center;
}

秋月华星
关注
  • 16
    点赞
  • 踩
  • 87
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
专栏目录
html投票,基于js实现投票的实例代码
weixin_29378273的博客
06-26 2121
本文实例讲述了JavaScript实现三种投票方式的实现方法，分享给大家供大家参考。具体如下：一、js柱状投票图效果图：实现代码：js柱状投票图body { font-weight:bold; color:#fff; font-size:16px; font-family:Arial, Helvetica, sans-serif; background-color:#000000;}.zhu { ...
基于Html+Css+javascript的游戏网页制作（游戏主题）超级英雄排行榜
html精品源码
01-07 921
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；...
单页亚运会奖牌榜html源代码
03-18
亚运会数据来源网络，即时自动更新。只需改动下标题，上传即可运行！
国王排名动漫网页设计 html网页设计作业成品模板 可免费添加js轮播 网页设计制作源代码
最新发布
猿猿网页设计
06-10 225
猿猿网页设计专注于大学生网页设计开发，常见HTML网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、、 电影、 摄影、 文化、 家乡、 鲜花、 礼品、 汽车、 其他 等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求, 喜欢的可以下载!
HTML+CSS实现（排行榜+棋盘+表格+图片商品列表）
m0_58761900的博客
11-05 3471
1. 排行榜 2. 棋盘 3. 表格 4. 图片商品列表
HTML 实现排行榜
wujizhishui的博客
02-17 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>排行榜</title> <style type="text/css"> p { font-size: 12px; ...
HTML小说排行榜案例
qq_47804149的博客
09-01 1528
【代码】纯HTML小说排行榜案例。
【前端客栈】使用CSS实现畅销书排行榜页面
冲击大厂之路!!!
04-28 6324
使用CSS实现畅销书排行榜页面的制作。
html动态生成榜单信息,排行榜.html
weixin_39859909的博客
06-10 1932
排行榜$axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };$axure.utils.getOtherPath = function() { return 'resources/Other.html'; };$axure.utils.getReloadPath ...
【JavaScript投票器】学会这个代码，你就是未来之星
m0_70031574的博客
07-07 663
榜眼</span><br><span>状元</span><br><span>探花</span><br><span>榜眼
基于HTML5+CSS3制作一个简单的音乐排行榜
m0_75047166的博客
11-06 2773
【代码】 基于HTML5+CSS3制作一个简单的音乐排行榜。
积分排名页面 html,欧洲联赛排名积分榜
weixin_30070663的博客
06-03 2408
北京时间2月24日凌晨，19/20赛季西甲第25轮结束了所有比赛。马竞和塞维利亚在获胜后同积43分，马竞以1个净胜球的优势升至第三，但距离领头羊巴萨仍然落后12分。赫塔菲积42分跌至第5，少赛一场的皇家社会积40分排名第6。英超联赛目前积分榜数据是多少？目前排第1的是利物浦胜5平0负0，总积分是15分，你可以在猎趣TV上看一下实时数据。法甲联赛目前积分榜上哪个队伍的积分最高？截止10月16日，法甲...
CSS/HTML5带数字简洁大方的Top10排名列表
热门推荐
千世丶希
11-21 1万+
带数字Top10排名列表说明Index与css代码演示图 说明 演示效果分辨率为1980x1080分辨率效果 高度可定制修改 纯css代码控制 Index与css代码 &amp;amp;lt;!DOCTYPE html&amp;amp;gt; &amp;amp;lt;html&amp;amp;gt; &amp;amp;lt;head&amp;amp;gt; &amp;amp;lt;meta charset=&am
html排行榜代码手机版,移动端前端代码优化丨排名VS体验
weixin_39622123的博客
07-02 298
移动端优化排名，成为现搜索引擎营销的新势头，手机网站参与移动端排名，成为获取流量一重量级选手，参与排名比不可少的因素是响应速度，很明显，相对于PC来说，移动端用户的耐性相对更低，手机版网站的加载速度成为现SEO都比较重视的问题。这就要说到移动端网站如何进行优化了，从HTML来看，适当减少DOM元素使用，把CSS文件放置在head中，JavaScript 需放置在body标签前面，why?相信很多S...
设置细线表格
weixin_43837268的博客
09-28 255
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>今日.
HTML表格（三）--小说排行榜
qq_46150052的博客
10-25 888
效果图： 实现代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
使用HTML5制作初级的‘音乐排行榜’
m0_71606684的博客
04-04 1312
【代码】使用HTML5制作初级的‘音乐排行榜’
基于web基础的投票网站(html+css+js)
12-29
基于web基础的投票网站是一个允许用户进行投票和查看投票结果的网站。实现这个网站，我们可以使用HTML、CSS和JavaScript来完成。 首先，我们需要创建一个HTML页面来构建网站的基本结构。可以使用``<header>``、``<nav>``、``<section>``和``<footer>``等标签来划分页面的不同部分。用户可以在页面的顶部导航栏中选择不同的投票选项。 接下来，我们需要使用CSS来美化页面，使其更加吸引人。可以设置背景颜色、字体、边框等样式来增加网站的可读性和吸引力。同时，还可以使用CSS布局技巧来优化页面结构，使其在不同大小的屏幕上都能良好显示。 然后，我们需要使用JavaScript来实现投票的功能。可以通过监听用户的点击事件来获取用户的投票选择。在收集到所有用户投票之后，我们可以使用JavaScript来计算每个选项的得票数，并将结果显示给用户。 为了提高用户体验，我们可以使用一些JavaScript库或框架来实现一些高级的功能。例如，可以使用AJAX技术来使投票结果实时更新，而不需要用户刷新整个页面。还可以使用JavaScript库来创建动画效果或实现用户交互。 最后，为了保障网站的安全性和可靠性，我们需要进行一些必要的安全措施。例如，可以对用户输入的数据进行验证和过滤，以防止代码注入等安全问题。另外，还应该添加适当的用户权限管理功能，以确保只有授权用户才能进行投票操作。 总结来说，基于web基础的投票网站使用HTML、CSS和JavaScript来实现网站的基本结构、样式和交互功能。通过合理运用这些技术和工具，我们可以创建一个功能完善、美观实用的投票网站。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

秋月华星

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值