- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作一个锦标赛支架,我正在按照一个示例进行操作,但是它缺少线条,我想添加它们
https://codepen.io/jbeason/pen/Wbaedb
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script|Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Istok+Web|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
<title>March Madness Stock Matchup</title>
</head>
<body>
<header class="hero">
<div class="hero-wrap">
<p class="intro" id="intro">flexbox</p>
<h1 id="headline">Tournament</h1>
<p class="year"><i class="fa fa-star"></i> 2015 <i class="fa fa-star"></i></p>
<p>Ballin' Outta Control</p>
</div>
</header>
<section id="bracket">
<div class="container">
<div class="split split-one">
<div class="round round-one current">
<div class="round-details">Round 1<br/><span class="date">March 16</span></div>
<ul class="matchup">
<li class="team team-top">Duke<span class="score">76</span></li>
<li class="team team-bottom">Virginia<span class="score">82</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Wake Forest<span class="score">64</span></li>
<li class="team team-bottom">Clemson<span class="score">56</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">North Carolina<span class="score">68</span></li>
<li class="team team-bottom">Florida State<span class="score">54</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">NC State<span class="score">74</span></li>
<li class="team team-bottom">Maryland<span class="score">92</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Georgia Tech<span class="score">78</span></li>
<li class="team team-bottom">Georgia<span class="score">80</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Auburn<span class="score">64</span></li>
<li class="team team-bottom">Florida<span class="score">63</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Kentucky<span class="score">70</span></li>
<li class="team team-bottom">Alabama<span class="score">59</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Vanderbilt<span class="score">64</span></li>
<li class="team team-bottom">Gonzaga<span class="score">68</span></li>
</ul>
</div> <!-- END ROUND ONE -->
<div class="round round-two">
<div class="round-details">Round 2<br/><span class="date">March 18</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND TWO -->
<div class="round round-three">
<div class="round-details">Round 3<br/><span class="date">March 22</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND THREE -->
</div>
<div class="champion">
<div class="semis-l">
<div class="round-details">west semifinals <br/><span class="date">March 26-28</span></div>
<ul class ="matchup championship">
<li class="team team-top"> <span class="vote-count"> </span></li>
<li class="team team-bottom"> <span class="vote-count"> </span></li>
</ul>
</div>
<div class="final">
<i class="fa fa-trophy"></i>
<div class="round-details">championship <br/><span class="date">March 30 - Apr. 1</span></div>
<ul class ="matchup championship">
<li class="team team-top"> <span class="vote-count"> </span></li>
<li class="team team-bottom"> <span class="vote-count"> </span></li>
</ul>
</div>
<div class="semis-r">
<div class="round-details">east semifinals <br/><span class="date">March 26-28</span></div>
<ul class ="matchup championship">
<li class="team team-top"> <span class="vote-count"> </span></li>
<li class="team team-bottom"> <span class="vote-count"> </span></li>
</ul>
</div>
</div>
<div class="split split-two">
<div class="round round-three">
<div class="round-details">Round 3<br/><span class="date">March 22</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND THREE -->
<div class="round round-two">
<div class="round-details">Round 2<br/><span class="date">March 18</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND TWO -->
<div class="round round-one current">
<div class="round-details">Round 1<br/><span class="date">March 16</span></div>
<ul class="matchup">
<li class="team team-top">Minnesota<span class="score">62</span></li>
<li class="team team-bottom">Northwestern<span class="score">54</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Michigan<span class="score">68</span></li>
<li class="team team-bottom">Iowa<span class="score">66</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Illinois<span class="score">64</span></li>
<li class="team team-bottom">Wisconsin<span class="score">56</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Purdue<span class="score">36</span></li>
<li class="team team-bottom">Boise State<span class="score">40</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Penn State<span class="score">38</span></li>
<li class="team team-bottom">Indiana<span class="score">44</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Ohio State<span class="score">52</span></li>
<li class="team team-bottom">VCU<span class="score">80</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">USC<span class="score">58</span></li>
<li class="team team-bottom">Cal<span class="score">59</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Virginia Tech<span class="score">74</span></li>
<li class="team team-bottom">Dartmouth<span class="score">111</span></li>
</ul>
</div> <!-- END ROUND ONE -->
</div>
</div>
</section>
<section class="share">
<div class="share-wrap">
<a class="share-icon" href="https://twitter.com/_joebeason"><i class="fa fa-twitter"></i></a>
<a class="share-icon" href="#"><i class="fa fa-facebook"></i></a>
<a class="share-icon" href="#"><i class="fa fa-envelope"></i></a>
</div>
</section>
body {
font-family: "Istok Web", sans-serif;
background: url("http://picjumbo.com/wp-content/uploads/HNCK2189-1300x866.jpg")
no-repeat #000;
background-size: cover;
min-height: 100%;
margin: 0;
}
.hero {
position: relative;
text-align: center;
overflow: hidden;
color: #fcfcfc;
}
.hero h1 {
font-family: "Holtwood One SC", serif;
font-weight: normal;
font-size: 5.4em;
margin: 0 0 20px;
text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
text-transform: uppercase;
letter-spacing: -1px;
}
.hero p {
font-family: "Abel", sans-serif;
text-transform: uppercase;
color: #5cca87;
letter-spacing: 6px;
text-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
font-size: 1.2em;
}
.hero-wrap {
padding: 3.5em 10px;
}
.hero p.intro {
font-family: "Holtwood One SC", serif;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 3em;
margin-bottom: -40px;
}
.hero p.year {
color: #fff;
letter-spacing: 20px;
font-size: 34px;
margin: -25px 0 25px;
}
.hero p.year i {
font-size: 14px;
vertical-align: middle;
}
#bracket {
overflow: hidden;
background-color: #e1e1e1;
background-color: rgba(225, 225, 225, 0.9);
padding-top: 20px;
font-size: 12px;
padding: 40px 0;
}
.container {
max-width: 1100px;
margin: 0 auto;
display: block;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
flex-direction: row;
}
.split {
display: block;
float: left;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 42%;
-webkit-flex-direction: row;
-moz-flex-direction: row;
flex-direction: row;
}
.champion {
float: left;
display: block;
width: 16%;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-self: center;
align-self: center;
margin-top: -15px;
text-align: center;
padding: 230px 0\9;
}
.champion i {
color: #a0a6a8;
font-size: 45px;
padding: 10px 0;
}
.round {
display: block;
float: left;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
width: 95%;
width: 30.8333%\9;
}
.split-two {
}
.split-one .round {
margin: 0 2.5% 0 0;
}
.split-two .round {
margin: 0 0 0 2.5%;
}
.matchup {
margin: 0;
width: 100%;
padding: 10px 0;
height: 60px;
-webkit-transition: all 0.2s;
transition: all 0.2s;
}
.score {
font-size: 11px;
text-transform: uppercase;
float: right;
color: #2c7399;
font-weight: bold;
font-family: "Roboto Condensed", sans-serif;
position: absolute;
right: 5px;
}
.team {
padding: 0 5px;
margin: 3px 0;
height: 25px;
line-height: 25px;
white-space: nowrap;
overflow: hidden;
position: relative;
}
.round-two .matchup {
margin: 0;
height: 60px;
padding: 50px 0;
}
.round-three .matchup {
margin: 0;
height: 60px;
padding: 130px 0;
}
.round-details {
font-family: "Roboto Condensed", sans-serif;
font-size: 13px;
color: #2c7399;
text-transform: uppercase;
text-align: center;
height: 40px;
}
.champion li,
.round li {
background-color: #fff;
box-shadow: none;
opacity: 0.45;
}
.current li {
opacity: 1;
}
.current li.team {
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
opacity: 1;
}
.vote-options {
display: block;
height: 52px;
}
.share .container {
margin: 0 auto;
text-align: center;
}
.share-icon {
font-size: 24px;
color: #fff;
padding: 25px;
}
.share-wrap {
max-width: 1100px;
text-align: center;
margin: 60px auto;
}
.final {
margin: 4.5em 0;
}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.share-icon {
color: #fff;
opacity: 0.35;
}
.share-icon:hover {
opacity: 1;
-webkit-animation: pulse 0.5s;
animation: pulse 0.5s;
}
.date {
font-size: 10px;
letter-spacing: 2px;
font-family: "Istok Web", sans-serif;
color: #3f915f;
}
@media screen and (min-width: 981px) and (max-width: 1099px) {
.container {
margin: 0 1%;
}
.champion {
width: 14%;
}
.split {
width: 43%;
}
.split-one .vote-box {
margin-left: 138px;
}
.hero p.intro {
font-size: 28px;
}
.hero p.year {
margin: 5px 0 10px;
}
}
@media screen and (max-width: 980px) {
.container {
-webkit-flex-direction: column;
-moz-flex-direction: column;
flex-direction: column;
}
.split,
.champion {
width: 90%;
margin: 35px 5%;
}
.champion {
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
-ms-flex-order: 3;
-webkit-order: 3;
order: 3;
}
.split {
border-bottom: 1px solid #b6b6b6;
padding-bottom: 20px;
}
.hero p.intro {
font-size: 24px;
}
.hero h1 {
font-size: 3em;
margin: 15px 0;
}
.hero p {
font-size: 1em;
}
}
@media screen and (max-width: 400px) {
.split {
width: 95%;
margin: 25px 2.5%;
}
.round {
width: 21%;
}
.current {
-webkit-flex-grow: 1;
-moz-flex-grow: 1;
flex-grow: 1;
}
.hero h1 {
font-size: 2.15em;
letter-spacing: 0;
margin: 0;
}
.hero p.intro {
font-size: 1.15em;
margin-bottom: -10px;
}
.round-details {
font-size: 90%;
}
.hero-wrap {
padding: 2.5em;
}
.hero p.year {
margin: 5px 0 10px;
font-size: 18px;
}
}
我想像上面那样做(当然是直线)。
我不确定该怎么做,首先我想到将这 4 个插槽包装到另一个 div 中并放置一个边框,但这行不通,因为包装器会更大,边框会太大。
然后我想做这样的事情:http://jsfiddle.net/AcuPp/3/
我有另一个“连接器”和“线”容器,但这似乎对边距很挑剔。
最佳答案
这是一个伪元素的想法。
相关代码:
.split-one ul.matchup:nth-child(odd)::after,
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after{
content: "";
position: absolute;
left: calc(100% + 5px);
top: 0;
bottom: 50%;
width:4px;
border-left: 2px solid red;
border-top:2px solid red;
}
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after {
right:calc(100% + 5px);
left:auto;
border-right: 2px solid red;
border-left:0;
}
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(even)::after{
top: 50%;
bottom: 0%;
border-bottom:2px solid red;
border-top:0;
}
.matchup {
position: relative;
}
完整代码
body {font-family: 'Istok Web', sans-serif;background: url("http://picjumbo.com/wp-content/uploads/HNCK2189-1300x866.jpg") no-repeat #000;background-size: cover;min-height: 100%;margin: 0;}
.hero {position:relative; text-align: center; overflow: hidden; color: #fcfcfc; }
.hero h1 {font-family: 'Holtwood One SC', serif;font-weight: normal;font-size: 5.4em;margin:0 0 20px; text-shadow:0 0 12px rgba(0, 0, 0, 0.5);text-transform: uppercase;letter-spacing:-1px;}
.hero p {font-family: 'Abel', sans-serif;text-transform: uppercase; color: #5CCA87; letter-spacing: 6px;text-shadow:0 0 12px rgba(0, 0, 0, 0.5);font-size: 1.2em;}
.hero-wrap {padding: 3.5em 10px;}
.hero p.intro {font-family: 'Holtwood One SC', serif;text-transform: uppercase;letter-spacing: 1px;font-size: 3em;margin-bottom:-40px;}
.hero p.year {color: #fff; letter-spacing: 20px; font-size: 34px; margin: -25px 0 25px;}
.hero p.year i {font-size: 14px;vertical-align: middle;}
#bracket {overflow:hidden;background-color: #e1e1e1;background-color:rgba(225,225,225,0.9);padding-top: 20px;font-size: 12px;padding: 40px 0;}
.container {max-width: 1100px;margin: 0 auto;display:block;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display: -webkit-flex;display: flex;-webkit-flex-direction:row;flex-direction: row;}
.split {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;width: 42%;-webkit-flex-direction:row;-moz-flex-direction:row;flex-direction:row;}
.champion {float:left;display:block;width: 16%;-webkit-flex-direction:row;flex-direction:row;-webkit-align-self:center;align-self:center;margin-top: -15px;text-align: center;padding: 230px 0\9;}
.champion i {color: #a0a6a8; font-size: 45px;padding: 10px 0; }
.round {display:block;float:left;display: -webkit-box;display: -moz-box;display: -ms-flexbox;display: -webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;width:95%;width:30.8333%\9;}
.split-two {}
.split-one .round {margin: 0 2.5% 0 0;}
.split-two .round {margin: 0 0 0 2.5%;}
.matchup {margin:0;width: 100%;padding: 10px 0;height:60px;-webkit-transition: all 0.2s;transition: all 0.2s;}
.score {font-size: 11px;text-transform: uppercase;float: right;color: #2C7399;font-weight: bold;font-family: 'Roboto Condensed', sans-serif;position: absolute;right: 5px;}
.team {padding: 0 5px;margin: 3px 0;height: 25px; line-height: 25px;white-space: nowrap; overflow: hidden;position: relative;}
.round-two .matchup {margin:0; height: 60px;padding: 50px 0;}
.round-three .matchup {margin:0; height: 60px; padding: 130px 0;}
.round-details {font-family: 'Roboto Condensed', sans-serif; font-size: 13px; color: #2C7399;text-transform: uppercase;text-align: center;height: 40px;}
.champion li, .round li {background-color: #fff;box-shadow: none; opacity: 0.45;}
.current li {opacity: 1;}
.current li.team {background-color: #fff;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);opacity: 1;}
.vote-options {display: block;height: 52px;}
.share .container {margin: 0 auto; text-align: center;}
.share-icon {font-size: 24px; color: #fff;padding: 25px;}
.share-wrap {max-width: 1100px; text-align: center; margin: 60px auto;}
.final {margin: 4.5em 0;}
@-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes pulse {
0% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}
.share-icon {color: #fff; opacity: 0.35; }
.share-icon:hover { opacity:1; -webkit-animation: pulse 0.5s; animation: pulse 0.5s;}
.date {font-size: 10px; letter-spacing: 2px;font-family: 'Istok Web', sans-serif;color:#3F915F;}
@media screen and (min-width: 981px) and (max-width: 1099px) {
.container {margin: 0 1%;}
.champion {width: 14%;}
.split {width:43%; }
.split-one .vote-box {margin-left: 138px;}
.hero p.intro {font-size: 28px;}
.hero p.year {margin: 5px 0 10px;}
}
@media screen and (max-width: 980px) {
.container {-webkit-flex-direction:column;-moz-flex-direction:column;flex-direction:column;}
.split, .champion {width: 90%;margin: 35px 5%;}
.champion {-webkit-box-ordinal-group:3;-moz-box-ordinal-group:3;-ms-flex-order:3;-webkit-order:3;order:3;}
.split {border-bottom: 1px solid #b6b6b6; padding-bottom: 20px;}
.hero p.intro {font-size: 24px;}
.hero h1 {font-size: 3em; margin: 15px 0;}
.hero p {font-size: 1em;}
}
@media screen and (max-width: 400px) {
.split {width: 95%;margin: 25px 2.5%;}
.round {width:21%;}
.current {-webkit-flex-grow:1;-moz-flex-grow:1;flex-grow:1;}
.hero h1 {font-size: 2.15em; letter-spacing: 0;margin:0; }
.hero p.intro {font-size: 1.15em;margin-bottom: -10px;}
.round-details {font-size: 90%;}
.hero-wrap {padding: 2.5em;}
.hero p.year {margin: 5px 0 10px; font-size: 18px;}
}
.split-one ul.matchup:nth-child(odd)::after,
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after{
content: "";
position: absolute;
left: calc(100% + 5px);
top: 0;
border-left: 2px solid red;
width:4px;
border-top:2px solid red;
bottom: 50%;
}
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after {
right:calc(100% + 5px);
left:auto;
border-right: 2px solid red;
border-left:0;
}
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(even)::after{
top: 50%;
bottom: 0%;
border-bottom:2px solid red;
border-top:0;
}
.matchup {
position: relative;
}
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Kaushan+Script|Herr+Von+Muellerhoff' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Istok+Web|Roboto+Condensed:700' rel='stylesheet' type='text/css'>
<title>March Madness Stock Matchup</title>
</head>
<body>
<header class="hero">
<div class="hero-wrap">
<p class="intro" id="intro">flexbox</p>
<h1 id="headline">Tournament</h1>
<p class="year"><i class="fa fa-star"></i> 2015 <i class="fa fa-star"></i></p>
<p>Ballin' Outta Control</p>
</div>
</header>
<section id="bracket">
<div class="container">
<div class="split split-one">
<div class="round round-one current">
<div class="round-details">Round 1<br/><span class="date">March 16</span></div>
<ul class="matchup">
<li class="team team-top">Duke<span class="score">76</span></li>
<li class="team team-bottom">Virginia<span class="score">82</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Wake Forest<span class="score">64</span></li>
<li class="team team-bottom">Clemson<span class="score">56</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">North Carolina<span class="score">68</span></li>
<li class="team team-bottom">Florida State<span class="score">54</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">NC State<span class="score">74</span></li>
<li class="team team-bottom">Maryland<span class="score">92</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Georgia Tech<span class="score">78</span></li>
<li class="team team-bottom">Georgia<span class="score">80</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Auburn<span class="score">64</span></li>
<li class="team team-bottom">Florida<span class="score">63</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Kentucky<span class="score">70</span></li>
<li class="team team-bottom">Alabama<span class="score">59</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Vanderbilt<span class="score">64</span></li>
<li class="team team-bottom">Gonzaga<span class="score">68</span></li>
</ul>
</div> <!-- END ROUND ONE -->
<div class="round round-two">
<div class="round-details">Round 2<br/><span class="date">March 18</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND TWO -->
<div class="round round-three">
<div class="round-details">Round 3<br/><span class="date">March 22</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND THREE -->
</div>
<div class="champion">
<div class="semis-l">
<div class="round-details">west semifinals <br/><span class="date">March 26-28</span></div>
<ul class ="matchup championship">
<li class="team team-top"> <span class="vote-count"> </span></li>
<li class="team team-bottom"> <span class="vote-count"> </span></li>
</ul>
</div>
<div class="final">
<i class="fa fa-trophy"></i>
<div class="round-details">championship <br/><span class="date">March 30 - Apr. 1</span></div>
<ul class ="matchup championship">
<li class="team team-top"> <span class="vote-count"> </span></li>
<li class="team team-bottom"> <span class="vote-count"> </span></li>
</ul>
</div>
<div class="semis-r">
<div class="round-details">east semifinals <br/><span class="date">March 26-28</span></div>
<ul class ="matchup championship">
<li class="team team-top"> <span class="vote-count"> </span></li>
<li class="team team-bottom"> <span class="vote-count"> </span></li>
</ul>
</div>
</div>
<div class="split split-two">
<div class="round round-three">
<div class="round-details">Round 3<br/><span class="date">March 22</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND THREE -->
<div class="round round-two">
<div class="round-details">Round 2<br/><span class="date">March 18</span></div>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
<ul class="matchup">
<li class="team team-top"> <span class="score"> </span></li>
<li class="team team-bottom"> <span class="score"> </span></li>
</ul>
</div> <!-- END ROUND TWO -->
<div class="round round-one current">
<div class="round-details">Round 1<br/><span class="date">March 16</span></div>
<ul class="matchup">
<li class="team team-top">Minnesota<span class="score">62</span></li>
<li class="team team-bottom">Northwestern<span class="score">54</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Michigan<span class="score">68</span></li>
<li class="team team-bottom">Iowa<span class="score">66</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Illinois<span class="score">64</span></li>
<li class="team team-bottom">Wisconsin<span class="score">56</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Purdue<span class="score">36</span></li>
<li class="team team-bottom">Boise State<span class="score">40</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Penn State<span class="score">38</span></li>
<li class="team team-bottom">Indiana<span class="score">44</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Ohio State<span class="score">52</span></li>
<li class="team team-bottom">VCU<span class="score">80</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">USC<span class="score">58</span></li>
<li class="team team-bottom">Cal<span class="score">59</span></li>
</ul>
<ul class="matchup">
<li class="team team-top">Virginia Tech<span class="score">74</span></li>
<li class="team team-bottom">Dartmouth<span class="score">111</span></li>
</ul>
</div> <!-- END ROUND ONE -->
</div>
</div>
</section>
<section class="share">
<div class="share-wrap">
<a class="share-icon" href="https://twitter.com/_joebeason"><i class="fa fa-twitter"></i></a>
<a class="share-icon" href="#"><i class="fa fa-facebook"></i></a>
<a class="share-icon" href="#"><i class="fa fa-envelope"></i></a>
</div>
</section>
如果你想要一个完整的连接,你可以像下面这样调整:
.split-one ul.matchup:nth-child(odd)::after,
.split-one ul.matchup:nth-child(even)::after,
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after {
content: "";
position: absolute;
left: 100%;
top: 0;
width: 10px;
bottom: 50%;
background:
linear-gradient(red, red) bottom left /50% 2px,
linear-gradient(red, red) center /2px 100%,
linear-gradient(red, red) top right /50% 2px;
background-repeat: no-repeat;
}
.split-two ul.matchup:nth-child(odd)::after,
.split-two ul.matchup:nth-child(even)::after {
right: 100%;
left: auto;
transform: scaleY(-1);
}
.split-one ul.matchup:nth-child(even)::after {
top: 50%;
bottom: 0%;
transform: scaleX(-1);
}
.split-two ul.matchup:nth-child(even)::after {
top: 50%;
bottom: 0%;
transform: scale(-1);
}
.matchup {
position: relative;
}
完整代码:
关于html - 在 Div 之间绘制连接线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59672221/
我学习 SDL 二维编程已有一段时间了,现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
尝试查找可在地块中使用的不同类型项目的列表 来自不同样本的投影类型: projection = list(type = "equirectangular") projection = list(typ
我正在尝试使用 Java Graphics API 绘制 GIF,但无法使用下面的代码成功绘制 GIF。仅绘制 GIF 的第一张图像或缩略图,但不播放。 public void paintCompon
我目前正在使用 JFrame 并尝试绘制一个矩形,但我不知道如何执行代码 paint(Graphics g),如何获取 Graphics 对象? package com.raggaer.frame;
这个领域的新手,希望得到一些帮助。 我有一个"Missile.java" 类,我在那里画东西。我想绘制一个 ImageView,我正在使用以下代码: ImageView v = (ImageView)
下面列出了圆形的例子 这是我的 JavaScript 代码。 最佳答案 假设您的 randomColor 是正确的,您只需要: 从 canvas.onclick 中移除 context.clearR
我在绘制和缩放 ImageView 时遇到问题。请帮帮我.. 当我画一些东西然后拖动或缩放图像时 - 绘图保留在原处,如您在屏幕截图中所见。而且我只需要简单地在图片上绘图,并且可以缩放和拖动这张图片。
我们可以在形式之外绘制图像和文本...我的意思是在字面上... 我知道问这个问题很愚蠢但是我们能不能... 最佳答案 您可以通过创建表单并将其 TransparentColor 属性设置为背景色来“作
我在绘制/布局期间收到 3 个对象分配警告 super.onDraw(canvas); canvas.drawColor(Color.WHITE); Paint textPaint = new Pai
我有一个示例时间序列数据框: df = pd.DataFrame({'year':'1990','1991','1992','1993','1994','1995','1996',
我试图想出一种简洁的方法来绘制 R 数据框中所有列的 GridView 。问题是我的数据框中既有离散值又有数值。为简单起见,我们可以使用 R 提供的名为 iris 的示例数据集。我会使用 par(mf
我有一个由 10 列和 50 行组成的 data.frame。我使用 apply 函数逐列计算密度函数。现在我想绘制我一次计算的密度。 换句话说,而不是绘图... plot(den[[1]]) plo
我想知道我们如何才能在第一个和第二个组件之外绘制个人,如下所示: 最佳答案 这可能有效: pc.cr <- princomp(USArrests, cor = TRUE) pairs(pc.cr$lo
我是Pandas和matplotlib的新手,想绘制此DataFrame season won team matches pct_won 0 20
我正在尝试为 distplot 子图编写一个 for 循环。 我有一个包含许多不同长度列的数据框。 (不包括 NaN 值) fig = make_subplots( rows=len(asse
我想创建一个具有密度的 3d 图。 我使用函数 density 首先为特定的 x 值创建一个二维图,然后该函数创建密度并将它们放入 y 变量中。现在我有第二组 x 值并将其再次放入密度函数中,然后我得
全部, 我一直在研究全局所有 MTB 步道的索引。我是 Python 人,所以对于所有涉及的步骤,我都尝试使用 Python 模块。 我能够像这样从 OSM 立交桥 API 中获取关系: from O
我正在使用 e1071 包中的支持向量机对我的数据进行分类,并希望可视化机器实际如何进行分类。但是,在使用 plot.svm 函数时,出现无法解决的错误。 脚本: library("e1071") d
我制作了以下图表,它是使用 xts 对象创建的。 我使用的代码很简单 plot(graphTS1$CCLL, type = "l", las = 2, ylab = "(c)\nCC for I
在绘制状态图时,您如何知道哪些状态放在框中,哪些状态用于转换箭头?我注意到转换也是状态。 我正在查看 this page 上的图 1 : 最佳答案 转换不是状态。转换是将对象从一种状态移动到下一种状态
我是一名优秀的程序员,十分优秀!