html - 我正在寻找与我给定图像相似的标签

我正在尝试创建与此类似的标签-http://i.stack.imgur.com/KdBi0.jpg

在网上搜索后，我找到了标签的代码。我面临根据上述屏幕截图进行设计的问题。

我想创建一个全宽度选项卡，在右侧带有静态内容。如果您查看屏幕截图，则选项卡顶部和底部都有全角边框。

在屏幕快照的右侧，有“奖励”部分，即使用户单击其他选项卡，我也希望保留类似的内容。

这是我的代码

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");


main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top: 1px solid #ddd;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 11px 11px;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #878585;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 5px;
}

label[for*='1']:before {
  content: '\f040';
}

label[for*='2']:before {
  content: '\f27b';
}

label[for*='3']:before {
  content: '\f003';
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #252424;
  border: 1px solid #ddd;
  border-top: 2px solid #ed1c24;
  border-bottom: 1px solid #fff;
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    font-size: 15px;
  }

  label:before {
    margin: 5px;
    font-size: 15px;
  }
}
@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}

 <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Campaign</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Comments</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Contact</label>

  <section id="content1">
    <h2>
      Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </h2>
    <p>
      Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>

  <section id="content2">
   <p>comments</p>
  </section>

  <section id="content3">
    <p>contact</p>
</section>

最佳答案

你要这个 ？考虑你的形象。
只是根据您的要求添加。只需将one parent添加到tab div和right side content div并根据需要应用CSS。希望对您有帮助。谢谢。

@import url("http://fonts.googleapis.com/css?family=Open+Sans:400,600,700");
@import url("http://netdna.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.css");


main {
  min-width: 320px;
  max-width: 800px;
  padding: 50px;
  margin: 0 auto;
  background: #fff;
}

section {
  display: none;
  padding: 20px 0 0;
  border-top:1px solid #eee;
}

input {
  display: none;
}

label {
  display: inline-block;
  margin: 0 0 -1px;
  padding: 11px 11px;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  color: #878585;
  border: 1px solid transparent;
}

label:before {
  font-family: fontawesome;
  font-weight: normal;
  margin-right: 5px;
}

label[for*='1']:before {
  content: '\f040';
}

label[for*='2']:before {
  content: '\f27b';
}

label[for*='3']:before {
  content: '\f003';
}

label:hover {
  color: #888;
  cursor: pointer;
}

input:checked + label {
  color: #252424;
  border-bottom: 2px solid #29DE75
}

#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
  display: block;
}

@media screen and (max-width: 650px) {
  label {
    font-size: 15px;
  }

  label:before {
    margin: 5px;
    font-size: 15px;
  }
}
@media screen and (max-width: 400px) {
  label {
    padding: 15px;
  }
}
.parent{
  width:100%;
}
.child{
  width:60%;
  float:left;
}
.side-content{
     width: 30%;
    display: inline-block;
    margin: 75px 20px;
}

<div class="parent">
  <div class="child">
  <input id="tab1" type="radio" name="tabs" checked>
  <label for="tab1">Campaign</label>

  <input id="tab2" type="radio" name="tabs">
  <label for="tab2">Comments</label>

  <input id="tab3" type="radio" name="tabs">
  <label for="tab3">Contact</label>

  <section id="content1">
    <h2>
      Bacon ipsum dolor sit amet beef venison beef ribs kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutto brisket meatloaf short ribs.
    </h2>
    <p>
      Brisket meatball turkey short loin boudin leberkas meatloaf chuck andouille pork loin pastrami spare ribs pancetta rump. Frankfurter corned beef beef tenderloin short loin meatloaf swine ground round venison.
    </p>
  </section>

  <section id="content2">
   <p>comments</p>
  </section>

  <section id="content3">
    <p>contact</p>
</section>
  </div>

<div class="side-content">
    <p>kielbasa. Sausage pig leberkas, t-bone sirloin shoulder bresaola. Frankfurter rump porchetta ham. Pork belly prosciutt</p>
  </div>

  </div>

关于html - 我正在寻找与我给定图像相似的标签，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38437392/