public MainWindowVM()
{
private ObservableCollection<Node> mRootNodes;
public IEnumerable<Node> RootNodes { get { return mRootNodes; } }
List<string[]> TreeNodes = new List<string[]>();
string[] lines = null;
try
{
lines = System.IO.File.ReadAllLines(MainWindow.TextFilePath , System.Text.Encoding.Default);
}
catch (IOException ex)
{
MessageBox.Show(ex.Message);
Environment.Exit(0);
}
if (lines == null || lines.Length == 0)
{
MessageBox.Show("Text file has no content!");
Environment.Exit(0);
}
foreach (var line in lines)
{
TreeNodes.Add(line.Split('|'));
}
Node newNode = null;
Node childNode = null;
Node root = new Node() { Name = TreeNodes[0][0] };
if (TreeNodes[0].Length > 1)
{
newNode = new Node() { Name = TreeNodes[0][1] };
root.Children.Add(newNode);
}
for (int s = 2; s < TreeNodes[0].Length; s++)
{
childNode = new Node() { Name = TreeNodes[0][s] };
newNode.Children.Add(childNode);
newNode = childNode;
}
}
<!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;
}
我有以上代码用于排行榜的html,css和js。
问题: 1.如何摆脱排行榜主体左侧的增量计数器。
2.如果页面加载,我们可以显示排行榜,而不仅仅是标签,而不仅仅是排行榜和medaltally标签。
3.如何在上述标签下面再加上两个标签,即排行榜下方和中间标签。
上述代码的小提琴链接:link
答案 0 :(得分:1)
第一期。将以下属性添加到.leaderboard ol li
类
list-style: none;
对于第二个请求,请替换onclick jquery事件处理程序代码,并将其替换为document.ready block中的以下内容
$(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
。