横向的选项卡效果

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

核心属性

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

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

查看所有标签

猜你喜欢:

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

码农书籍

算法学

哈雷尔 / 霍红卫 / 高等教育 / 2007-6 / 39.00元

本书主要论述计算机科学的基本概念、思想、方法和结果。全书内容由 5个部分组成。“预备知识”部分包括算法学中的基本概念、算法结构、算法所操纵的数据以及描述算法所用的程序设计语言。“方法和分析”部分包括算法设计的方法、算法的正确性和效率、评价算法的方法。“局限性和健壮性”部分包括可执行算法的固有局限性以及实现这些算法的计算机的固有局限性、不可计算性和不可判定性、算法学的通用性及其健壮性。此外，还讨论了......一起来看看《算法学》这本书的介绍吧!

码农工具

横向的选项卡效果

核心属性

算法学

CSS 压缩/解压工具

随机密码生成器

XML、JSON 在线转换