Question

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

在网上搜索后，我找到了标签的代码。我正面临着根据上面的截图设计它的问题。

我想在右侧创建一个带有静态内容的全宽标签。如果您检查屏幕截图，则标签的顶部和底部有全宽边框。

在屏幕截图中，右侧有＆＃34;奖励＆＃34;部分，即使用户点击不同的标签，我希望保留这样的内容。

这是我的代码

＆＃13;

@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;
  }
}

＆＃13;

 <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>

＆＃13;

Answer 1

你想要这个吗？考虑你的形象。只是根据您的要求添加。刚刚向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>

我正在寻找类似于我给定图像的Tabs

1 个答案: