JS和CSS計數器增量中的標簽
[英]tags in JS and css counter increment
問題描述
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Sign-Up/Login Form</title> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="form"> <ul class="tab-group"> <li class="tab active"><a href="#leaderboard">LeaderBoard</a></li> <li class="tab"><a href="#login">MedalTally</a></li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Shivam Sharma</mark> <small>315</small> </li> <li> <mark>Deepa B</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> </ol> </div> </div> <div id="login"> </div> </div><!-- tab-content --> </div> <!-- /form --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
*, *:before, *:after { box-sizing: border-box; } html { overflow-y: scroll; } a { text-decoration: none; color: #1ab188; -webkit-transition: .5s ease; transition: .5s ease; } a:hover { color: #179b77; } .form { background: rgba(19, 35, 47, 0.9); padding: 10px; max-width: 330px; margin: 40px auto; } .tab-group { list-style: none; padding: 0; margin: 0 0 0 0; } .tab-group:after { content: ""; display: table; clear: both; } .tab-group li a { display: block; text-decoration: none; color: #a0b3b0; font-size: 20px; float: left; width: 50%; text-align: center; cursor: pointer; transition: .5s ease; } .tab-group li a:hover { background: #179b77; color: #ffffff; } .tab-group .active a { background: #1ab188; color: #ffffff; } .tab-content > div:last-child { display: none; } /*-------------------- Body --------------------*/ body { min-height: 650px; height: 200px; margin: 0; background:-webkit-radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%); color: #fff; font-family: 'Open Sans', sans-serif; padding 10px; } /*-------------------- Leaderboard --------------------*/ .leaderboard { width: 300px; height: 400px; display: none; } .leaderboard ol li { position: inherit; z-index: 1; font-size: 14px; counter-increment: leaderboard; padding: 18px 10px 18px 10px; cursor: pointer; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transform: translateZ(0) scale(1, 1); transform: translateZ(0) scale(1, 1); } .leaderboard ol li::before { content: counter(leaderboard); position: absolute; z-index: 2; top: 15px; left: 15px; width: 20px; height: 20px; line-height: 20px; color: #c24448; background: #fff; border-radius: 20px; text-align: center; } .leaderboard ol li mark { position: absolute; z-index: 5; top: 0; left: 0; width: 350%; height: 100%; padding: 18px 10px 18px 50px; margin: 0; background: none; color: #fff; } .leaderboard ol li mark::before, .leaderboard ol li mark::after { position: relative; z-index: 1; left: 9px; border-top: 10px solid #c24448; -webkit-transition: all .1s ease-in-out; transition: all .1s ease-in-out; opacity: 0; } .leaderboard ol li mark::after { left: auto; border-left: none; border-right: 10px solid transparent; } .leaderboard ol li small { position: relative; z-index: 2; display: block; text-align: right; } .leaderboard ol li::after { content: ''; position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 100%; background: #fa6855; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08); -webkit-transition: all .3s ease-in-out; transition: all .3s ease-in-out; opacity: 0; } .leaderboard ol li:nth-child(1) { background: #fa6855; } .leaderboard ol li:nth-child(1)::after { background: #fa6855; } .leaderboard ol li:nth-child(2) { background: #e0574f; } .leaderboard ol li:nth-child(2)::after { background: #e0574f; box-shadow: 0 2px 0 rgba(0, 0, 0, 0.08); } .leaderboard ol li:nth-child(2) mark::before, .leaderboard ol li:nth-child(2) mark::after { border-top: 6px solid #ba4741; bottom: -7px; } .leaderboard ol li:nth-child(3) { background: #d7514d; } .leaderboard ol li:nth-child(3)::after { background: #d7514d; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.11); } .leaderboard ol li:nth-child(3) mark::before, .leaderboard ol li:nth-child(3) mark::after { border-top: 2px solid #b0433f; bottom: -3px; } .leaderboard ol li:nth-child(4) { background: #cd4b4b; } .leaderboard ol li:nth-child(4)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(4) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(5) { background: #cd4b4b; } .leaderboard ol li:nth-child(5)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(5) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(6) { background: #cd4b4b; } .leaderboard ol li:nth-child(6)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(6) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(7) { background: #cd4b4b; } .leaderboard ol li:nth-child(7)::after { background: #cd4b4b; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.15); } .leaderboard ol li:nth-child(7) mark::before, .leaderboard ol li:nth-child(4) mark::after { top: -7px; bottom: auto; border-top: none; border-bottom: 6px solid #a63d3d; } .leaderboard ol li:nth-child(8) { background: #c24448; border-radius: 0 0 10px 10px; } .leaderboard ol li:nth-child(8)::after { background: #c24448; box-shadow: 0 -2.5px 0 rgba(0, 0, 0, 0.12); border-radius: 0 0 10px 10px; } .leaderboard ol li:nth-child(8) mark::before, .leaderboard ol li:nth-child(5) mark::after { top: -9px; bottom: auto; border-top: none; border-bottom: 8px solid #993639; } .leaderboard ol li:hover { z-index: 2; overflow: visible; } .leaderboard ol li:hover::after { opacity: 1; -webkit-transform: scaleX(1.06) scaleY(1.03); transform: scaleX(1.06) scaleY(1.03); } .leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after { opacity: 1; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; }
<!DOCTYPE html> <html > <head> <meta charset="UTF-8"> <title>Sign-Up/Login Form</title> <link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,300,600' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="form"> <ul class="tab-group"> <li class="tab active"><a href="#leaderboard">RecentWeek</a></li> <li class="tab"><a href="#login">Overall</a></li> </ul> <div class="tab-content"> <div id="signup"> <div class="leaderboard" id="leaderboard"> <ol> <li> <mark>Mustaque Rashid</mark> <small>315</small> </li> <li> <mark>Deepa Balasubramaniam</mark> <small>301</small> </li> <li> <mark>Raymond Knight</mark> <small>292</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> <li> <mark>Trevor McCormick</mark> <small>245</small> </li> <li> <mark>Andrew Fox</mark> <small>203</small> </li> </ol> </div> </div> <div id="login"> </div> </div><!-- tab-content --> </div> <!-- /form --> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script> </body> </html>
我有上述代碼用於排行榜的html，css和js。
問題：1.如何擺脫排行榜主體左側的增量計數器。
2.如何在頁面加載后立即顯示排行榜，而不僅僅是標簽，不僅是排行榜和獎牌標簽。
3.如何在上述標簽下方添加兩個標簽，即排行榜下方和獎牌下方。
上述代碼的小提琴鏈接： 鏈接
1 個解決方案
解決方案1
1 已采納 2016-10-24 13:39:53
對於第一個問題。 將以下屬性添加到.leaderboard ol li類中
list-style: none;
對於第二個請求，請替換onclick jquery事件處理程序代碼，並將其替換為document.ready塊中的以下內容
$(document).ready(function(){
var _this = $('.tab a:first')
var block = _this.attr('href');
if(block == "#leaderboard"){
$(block).fadeIn();
$('#login').hide();
// code to hide other tabs if added
}
});
對於3個請求：在<ul class="tab-group">添加2個li標簽，如下所示
<ul class="tab-group">
<li class="tab active"><a href="#leaderboard">LeaderBoard</a></li>
<li class="tab"><a href="#login">MedalTally</a></li>
<li class="tab"><a href="#">Third Tag</a></li>
<li class="tab"><a href="#">Forth Tag</a></li>
</ul>
希望這可以幫助。
[編輯]
為了使CSS看起來不錯，請執行以下操作：
添加
padding:0px !important;.leaderboard ol類中的屬性移除
height: 308px;來自.leaderboard類。
遞減計數器無法正常工作
[英]Decrement counter not working as expected with respect to increment counter-angular js
如何使第一個 li 值為 0，然后使用 css 計數器遞增 2？
[英]How to make first li value 0 and then increment by 2 using css counter?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.