这些CSS类应如何定位？

时间：2018-01-06 22:14:18

标签： html css

您如何定位这些CSS类？

我说的是从头到尾的订单。从上到下。

以 .wrap 开头，以 .hide 结尾。

我刚刚重新调整了所有这些类，但这对于这些类很好吗？

非常感谢所有帮助。

这样的事情？

https://jsfiddle.net/49ajbhte/35/ 

<div class="wrape">
  <div class="covere" title="OPEN"></div>
  <ul class="nav">

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.covere {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.covere {
  display: none;
}

.inactivee .covere {
  display: block;
}

.covere::before,
.covere::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.covere::after {
  left: 177px;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  float: left;
}

.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.nav li:nth-of-type(8) a {
  opacity: 0;
}

.nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}

.left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}

.left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.middle-background {
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}

.inactivee a {
  display: none;
}

.inactivee .playButtone {
  display: none;
}

.activee .playButtone {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #aaff00;
}

.activee {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
}

.pausee {
  left: 0;
}

.hide {
  display: none;
}

或者像这样：

https://jsfiddle.net/49ajbhte/33/ 

<div class="wrape">
  <div class="covere" title="OPEN"></div>
  <ul class="nav">

.wrap {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.nav li:nth-of-type(8) a {
  opacity: 0;
}

.nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}
.nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}

.left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}

.left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.middle-background {
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}

.inactivee a {
  display: none;
}

.inactivee .playButtone {
  display: none;
}

.covere {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.covere {
  display: none;
}

.inactivee .covere {
  display: block;
}

.covere::before,
.covere::after {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.covere::after {
  left: 177px;
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  float: left;
}

.activee .playButtone {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #aaff00;
}

.activee {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
}

.pausee {
  left: 0;
}

.hide {
  display: none;
}

根据html

这是第一次 

.wrape {
  position: relative;
  width: 266px;
  height: 174px;
  margin-top: 8px;
  overflow: hidden;
}

然后封面： 

.covere {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

然后这些会在“a”锚标记之前出现。 

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav li {
  float: left;
}

接下来会出现'a'锚标记： 

.nav a {
  float: left;
  width: 50px;
  height: 50px;
  margin: 0 4px 12px 0;
  color: transparent;
  background: rgba(0, 0, 0, .2);
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.nav a:hover {
  border: 3px solid red;
}

.nav li:nth-of-type(5n) a {
  margin-right: 0;
}

.nav li:nth-of-type(8) a {
  opacity: 0;
}

.nav li:nth-of-type(15) a {
  position: relative;
  border: 3px solid #0059dd;
  background: none;
}

.left-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 12px;
  height: 100%;
  background: rgba(0, 255, 255, 0.5);
}

.left-border {
  position: absolute;
  top: 0;
  left: 12px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.middle-background {
  position: absolute;
  top: 0;
  left: 15px;
  width: 14px;
  height: 100%;
  background: rgba(255, 255, 255, 0.5);
}

.right-border {
  position: absolute;
  top: 0;
  left: 29px;
  width: 3px;
  height: 100%;
  background: #0059dd;
}

.right-background {
  position: absolute;
  top: 0;
  left: 32px;
  width: 12px;
  height: 100%;
  background: rgba(255, 0, 255, 0.5);
}

然后这些会接下来呢？但我不明白为什么。 

.wrape.inactivee a {
  display: none;
}

.wrape.inactivee .playButtone {
  display: none;
}

然后这些就会出现。 

.activee .playButtone {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, .7);
  cursor: pointer;
  fill: #aaff00;
}

.activee {
  background: url("https://i.imgur.com/dCneQvW.png") no-repeat -260px 0;
}

.playe,
.pausee {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 6px;
  margin: auto;
}

.pausee {
  left: 0;
}

.hide {
  display: none;
}

1 个答案:

答案 0 :(得分：0)

这两项工作都不会影响您的代码。但是，第一个将使您免于迷失在您的代码中。总是很好地安排你的HTML与CSS一样。

相关问题
最新问题