横向的选项卡效果

栏目: 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;
```
```
}
```

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

查看所有标签

猜你喜欢:

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

码农书籍

Text Processing in Python

David Mertz / Addison-Wesley Professional / 2003-6-12 / USD 54.99

Text Processing in Python describes techniques for manipulation of text using the Python programming language. At the broadest level, text processing is simply taking textual information and doing som......一起来看看《Text Processing in Python》这本书的介绍吧!

码农工具

XML 在线格式化

在线 XML 格式化压缩工具

html转js在线工具

HEX CMYK 转换工具

HEX CMYK 互转工具