横向的选项卡效果

栏目: CSS · 发布时间: 6年前

核心属性

transform-origin: center right 页面参照其右侧中间位置

line-height: 1.5 设置文字的行间距为字体的1.5倍

display: none 隐藏默认的单选按钮

line-height: 5rem 使导航栏中的图标垂直居中

:checked + color + font-weight + left 选中某个选项卡改变图标的颜色，背景和粗细

:checked + display + transform + transition-delay 选中某个选项卡显示对应的页面

<link rel="stylesheet" media="screen" href="https://cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" />

```
<section>
```

<input type="radio" id="profile" value="1" name="tractor" checked='checked' />

<input type="radio" id="settings" value="2" name="tractor" />

<input type="radio" id="posts" value="3" name="tractor" />

<input type="radio" id="books" value="4" name="tractor" />

```
<nav>
```

<label for="profile" class='fa fa-camera-retro'></label>

<label for="settings" class='fa fa-film'></label>

<label for="posts" class='fa fa-calendar'></label>

<label for="books" class='fa fa-list-alt'></label>

```
</nav>
```
```
<article class='uno'>
```
```
<h2>
```
```
CSS选项卡
```
```
</h2>
```
```
<footer>
```
```
<ul>
```
```
<li class='fa fa-link'></li>
```
```
<li class='fa fa-bar-chart'></li>
```
```
<li class='fa fa-sitemap'></li>
```
```
<li class='fa fa-wrench'></li>
```
```
<li class='fa fa-magic'></li>
```
```
</ul>
```
```
</footer>
```
```
</article>
```
```
<article class='dos fa fa-wrench'>
```

<p>如果有什么网络现象是最接近的，那就是博客，课程和网络教学。关于传播人类知识的任何东西或领域，无论是Angelical还是Mefistofélico，都有自己的提议、他们的“老师”和他们有远见的老师。</p>

```
</article>
```
```
<article class='tres fa fa-beer'>
```
```
<ol>
```
```
<li>CSS图像和物体的尺寸</li>
```

<li>在做CSS时避免不必要的点击</li>

```
<li>CSS是什么？</li>
```
```
<li>CSS属性规格说明</li>
```
```
<li>一个input多个label</li>
```
```
<li>CSS句法和词汇表</li>
```
```
</ol>
```
```
</article>
```
```
<article class='cuatro fa fa-copy'>
```
```
<dl>
```
```
<dt>CSS过渡指南</dt>
```

<dd>每一个CSS属性组成的过渡组与DEMOS。</dd>

```
<dt>@Font-face及其问题</dt>
```

<dd>最常见的问题及其解决办法，通常是通过使用CSS@font-face规则来显示除Safety Fonts以外的其他字体。</dd>

```
</dl>
```
```
</article>
```
```
</section>
```

```
*, *:after, *:before {
```
```
box-sizing: border-box;
```
```
}
```
```
* {
```
```
margin:0;
```
```
padding:0;
```
```
border: 0 none;
```
```
position: relative;
```
```
}
```
```
html {
```
```
background: #f5f5f5;
```
```
width: 100%;
```
```
height: 100%;
```
```
font-weight: 300;
```
```
color: #fff;
```
```
}
```
```
section {
```
```
background: #31A66C;
```
```
width: 80vw;
```
```
max-width: 40rem;
```
```
min-width: 390px;
```
```
height: 25rem;
```
```
margin: 4rem auto;
```
```
box-shadow: 0 0 6px rgba(0,0,0,.4);
```
```
}
```
```
article {
```
```
position: absolute;
```
```
left: 0;
```
```
top: 5rem;
```
```
right: 0;
```
```
bottom: 0;
```
```
padding: 1rem 2rem 0;
```
```
overflow: auto;
```
```
transition: .7s;
```
```
transform: scale(0);
```
```
transform-origin: center right;
```
```
transition-delay: .1s;
```
```
}
```
```
article:before {
```
```
position: absolute;
```
```
bottom: 1rem;
```
```
right: 1rem;
```
```
color: rgba(0,0,0,.2);
```
```
font-size: 4rem;
```
```
font-weight: 100;
```
```
}
```
```
h2 {
```
```
font-size: 2.5rem;
```
```
font-weight: 600;
```
```
text-align: center;
```
```
color: rgba(0,0,0,.6);
```
```
}
```
```
footer ul {
```
```
width: 100%;
```
```
color: #037B49;
```
```
margin-top: 50px;
```
```
}
```
```
footer li {
```
```
list-style-type: none;
```
```
float: left;
```
```
width: 20%;
```
```
}
```
```
footer li::before {
```
```
display: block;
```
```
text-align: center;
```
```
font-size: 3rem;
```
```
font-weight: 100;
```
```
}
```
```
p, dl, ol {
```
```
line-height: 1.5;
```
```
font-size: 1.3rem;
```
```
}
```
```
ol li {
```
```
margin: 0 0 .5rem 1rem;
```
```
}
```
```
dt {
```
```
font-size: 1.6rem;
```
```
font-weight: 600;
```
```
text-indent: 1.5rem;
```
```
}
```
```
nav {
```
```
background: #fff;
```
```
width: 100%;
```
```
height: 5rem;
```
```
box-shadow: 0 0 6px rgba(0,0,0,.4);
```
```
}
```
```
nav:after {
```
```
content:'';
```
```
width: 25%;
```
```
height: 5rem;
```
```
background: #BEE3D1;
```
```
position: absolute;
```
```
transition: .5s;
```
```
}
```
```
input {
```
```
display: none;
```
```
}
```
```
label {
```
```
width: 25%;
```
```
float: left;
```
```
color: #BEE3D1;
```
```
text-align: center;
```
```
cursor: pointer;
```
```
transition: .5s;
```
```
z-index: 2;
```
```
}
```
```
label:hover {color: #1E6743;}
```
```
label:before {
```
```
display: block;
```
```
font-size: 3rem;
```
```
line-height: 5rem;
```
```
z-index: 2;
```
```
}
```
```
#profile:checked ~ nav [for='profile'],
```

#settings:checked ~ nav [for='settings'],

```
#posts:checked ~ nav [for='posts'],
```
```
#books:checked ~ nav [for='books'] {
```
```
color: #1E6743;
```
```
font-weight: 600;
```
```
}
```
```
#profile:checked ~ nav:after {
```
```
left: 0;
```
```
}
```
```
#settings:checked ~ nav:after {
```
```
left: 25%;
```
```
}
```
```
#posts:checked ~ nav:after {
```
```
left: 50%;
```
```
}
```
```
#books:checked ~ nav:after {
```
```
left: 75%;
```
```
}
```
```
#profile:checked ~ .uno,
```
```
#settings:checked ~ .dos,
```
```
#posts:checked ~ .tres,
```
```
#books:checked ~ .cuatro {
```
```
display: block;
```
```
transform: scale(1);
```
```
transition-delay: .5s;
```
```
}
```

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Convergence Culture

Henry Jenkins / NYU Press / 2006-08-01 / USD 30.00

"Convergence Culture" maps a new territory: where old and new media intersect, where grassroots and corporate media collide, where the power of the media producer, and the power of the consumer intera......一起来看看《Convergence Culture》这本书的介绍吧!

码农工具