纯CSS制作的类轮播简历

 第一次制作网页版的简历是在慕课网上看的一次视频资料，当时按照教程制作出来之后就被自己给忘记了_(:зゝ∠)_。直到半年之后，也就是不久之前，在学校里参加的一个校外公司组织的一周培训的时候，他们最后的大作业就是做一个网页版的简历。当时看到他们示范的简历使用fullpage制作的。这个时候才想起来自己也做过一个类似的东西。但是自己作为一个爱折腾的人，绝对不想按照他们的做法跟别人一样。因此就在想能不能用纯粹的css来实现一个具有点击切换功能的简历。
 下面为实现步骤

1. HTML结构

 首先制作一个纯css的简历，页面的结构是至关重要的一环，这关系到后来css选择器使用的时候是否方便。

<input name="slide" class="slide-base" type="radio" id="base" checked>
<label class="nav nav-base" for="base">基本<br/>资料</label>
<input name="slide" class="slide-skills" type="radio" id="skills">
<label class="nav nav-skills" for="skills">技能<br/>掌握</label>
<input name="slide" class="slide-experience" type="radio" id="experience">
<label class="nav nav-experience" for="experience">工作<br/>经验</label>
<input name="slide" class="slide-my" type="radio" id="my">
<label class="nav nav-my" for="my">自我<br/>评价</label>
<div class="container" id="container">
    <section class="page page-base">
        <div class="base-left">
            <div class="clearfix">
                <h2 class="base-tit">基本资料</h2>
            </div>
            <dl class="clearfix" id="base-name">
                <dt class="base-title">姓名：</dt>
                <dd class="base-detail">苏</dd>
            </dl>
            <dl class="clearfix" id="base-age">
                <dt class="base-title">年龄：</dt>
                <dd class="base-detail">22</dd>
            </dl>
            <dl class="clearfix base-gender" id="base-gender">
                <dt class="base-title">性别：</dt>
                <dd class="base-detail">男</dd>
            </dl>
            <dl class="clearfix" id="base-mail">
                <dt class="base-title">邮箱：</dt>
                <dd class="base-detail">sulinghao0@foxmail.com</dd>
            </dl>
            <dl class="clearfix" id="base-tel">
                <dt class="base-title">联系方式：</dt>
                <dd class="base-detail">1886260xxxx</dd>
            </dl>
            <dl class="clearfix" id="base-schools">
                <dt class="base-title">学校：</dt>
                <dd class="base-detail">江苏科技大学苏州理工学院</dd>
            </dl>
            <dl class="clearfix" id="base-major">
                <dt class="base-title">专业：</dt>
                <dd class="base-detail">信息管理与信息系统</dd>
            </dl>
            <dl class="clearfix" id="base-graduate">
                <dt class="base-title">毕业时间：</dt>
                <dd class="base-detail">2017年6月</dd>
            </dl>
            <dl class="clearfix" id="base-address">
                <dt class="base-title">所在地：</dt>
                <dd class="base-detail">xxxxxxx</dd>
            </dl>
        </div>
        <div class="base-right">
            <img src="image/1.jpg" width="400">
        </div>
    </section>
    <section class="page page-skills">
        <div class="skills-container">
            <div class="skills-inner">
                <h3>技能点数</h3>
                <p>1、熟练使用HTML，css，JavaScript，并能使用bootstrap快速搭建一个网站</p>
                <p>2、了解jquery，angular</p>
                <p>3、熟悉git指令，并在学习中有所使用</p>
                <p>4、了解php，MySQL，nodejs</p>
                <p>5、有微信端网页开发经验</p>
            </div>
        </div>
    </section>
    <section class="page page-experience clearfix">
        <input type="radio" class="btn btn-1" name="btn" id="exp1">
        <label class="circle cir-1" for="exp1"></label>
        <input type="radio" class="btn btn-2" name="btn" id="exp2" checked>
        <label class="circle cir-2" for="exp2"></label>
        <input type="radio" class="btn btn-3" name="btn" id="exp3">
        <label class="circle cir-3" for="exp3"></label>
        <div class="exp-inner">
            <div class="exp exp-1">s</div>
            <div class="exp exp-2">s</div>
            <div class="exp exp-3">s</div>
        </div>
    </section>
    <section class="page page-my">
        <div class="my-inner">
        </div>
    </section>
</div>

以上是整体的结构代码，下面进行分块解释。

第一部分，也就是整体界面的结构，我将页面分为了四个部分，基本资料，技能掌握，工作经验，自我评价。这里仅仅是示例，如果你有其他想加进来，也是没有任何关系的。

<div class = "container" id = "container">
    <section class = "page page-base"></section>
    <section class = "page page-skills"></section>
    <section class = "page page-experience"></section>
    <section class = "page page-my"></section>
</div>

你以为写完这些就算完了么，当然不是！如果只有这里我们大概只能做一个用滚动条来拖动的页面，这明显不是我们想要的。因此我们还需要一个能让他切换的东西。并且以此只能选择一个。

这么一说，大概都能想到我们下面即将出场的一位朋友，那就是radio，单选按钮。

我们都知道，单选按钮在具有相同的name属性的情况下，他们之中只有一个是可以被选中的状态，这和我们所需要的功能是很相似的，因此，我们就选择它，作为我们的一个切换用的工具。

如果你想说，单选按钮的默认样式太难看了，我是非常赞同的！对！太丑了！所以！作为一个有着想和别人不一样心思的我们绝对不能这么做。这个时候，label标签具有的for属性就派上用场了，label标签的for属性被赋予与radio按钮id相同的值得时候，或者radio被包裹在label中的时候，当我们点击label标签时，相应的radio会被选中，这与直接点击radio是具有相同的效果的。

因此下面是我的结构

<input name="slide" class="slide-base" type="radio" id="base" checked>
<label class="nav nav-base" for="base">基本<br/>资料</label>
<input name="slide" class="slide-skills" type="radio" id="skills">
<label class="nav nav-skills" for="skills">技能<br/>掌握</label>
<input name="slide" class="slide-experience" type="radio" id="experience">
<label class="nav nav-experience" for="experience">工作<br/>经验</label>
<input name="slide" class="slide-my" type="radio" id="my">
<label class="nav nav-my" for="my">自我<br/>评价</label>

至于为什么不把label标签写在input前面，我们在css样式部分，将会进行讲解。

因此到这里我们HTML结构部分就完成了。

以下是完整的结构代码

<input name="slide" class="slide-base" type="radio" id="base" checked>
<label class="nav nav-base" for="base">基本<br/>资料</label>
<input name="slide" class="slide-skills" type="radio" id="skills">
<label class="nav nav-skills" for="skills">技能<br/>掌握</label>
<input name="slide" class="slide-experience" type="radio" id="experience">
<label class="nav nav-experience" for="experience">工作<br/>经验</label>
<input name="slide" class="slide-my" type="radio" id="my">
<label class="nav nav-my" for="my">自我<br/>评价</label>

<div class = "container" id = "container">
    <section class = "page page-base"></section>
    <section class = "page page-skills"></section>
    <section class = "page page-experience"></section>
    <section class = "page page-my"></section>
</div>

2、CSS部分

我所做的轮播是竖直方向的轮播，因此，当然方法也同样适用于横向的轮播，这里不再多说，想说一下整体的思路。
我们所谓的轮播，无非就是从这个页面平滑的切换到另一个页面。因此，我的做法是制作四个撑满屏幕的页面，使他们自然排列。然后使用radio标签使他们与对应的页面联动，如此一来，当选中我们想要的页面对应的radio时，我们让外部包裹的container相应的进行移动。使得我们想要的页面在显示区域显示。

A、轮播页面

首先这里我们要知道一个点。就是关于平时我们给块级元素设置高度为100%有时候会失效的原因。是因为这个高度是根据其父级元素的高度进行百分比的设置的。
所以如果想让我们的四个主要页面撑满整个屏幕首先要给他们的父级元素，也就是body以及HTML设置高度为100%。这样的话，给这几个盒子设置高度就不会失效了。

<style>
*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
    overflow: hidden;
}
.container{
    height:100%;
}
.page{
    height:100%;
}
</style>

因此我们将页面中的所需要成面屏幕的盒子设置为100%，这样我们所需要的四个页面就成为四个高度为100%的页面了。

B、导航部分

完成了页面，下面我们来做导航，能够让我们在四个页面之间进行切换。
首先根据我们前面所说的那样，原始的radio标签不能满足我们的需求，因此，我们将原始的radio进行隐藏。

<style>
input{
    display:none;
    visibility: hidden;
    width:0;
    height:0;
}
</style>

这个时候，我们的label标签就派上用场了。
由于导航的特殊性，我们需要把导航始终固定在屏幕的可视区域，因此，我们需要把导航部分的定位设置成fixed。本来为了方便设置，本想在导航的几个按钮外面套一个div标签，然后在div上在设置定位，然而，由于还需要其选中时进行对页面的一些切换，因此就无法在多一个盒子套在外面了。。。因为对父级元素的选中在当前的css标准中是不存在的。不过据说，官方也将考虑在以后的标准中进行添加。

于是设置一些导航元素共同的样式

<style>
.nav{
    position: fixed;
    width:60px;
    height:60px;
    border-radius: 50%;
    right:20px;
    top:45%;
    background-color: #5561ff;
    font-size: 16px;
    padding-top: 8px;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
    z-index: 5;
}
</style>

这里有一点需要说的是，我们需要设置box-sizing。也就是将它设置为border-box属性。我们知道，将它设置为这个属性意味着我们将padding以及border属性的宽度大小也算在盒子大小之中。因此，此时设置border-radius不会变形成椭圆。

这个时候设置完以上的一些属性，我们的三个导航应该是重叠在一起的。所以，此时再对，每一个导航元素进行单独的设置。

<style>
.nav-base{
    margin-top: -120px;
    background-color: #9999dd;
}
.nav-skills{
    margin-top: -40px;
    background-color: rgb(122,211,123);
}
.nav-experience{
    margin-top: 40px;
    background-color: rgb(123,123,123);
}
.nav-my{
    margin-top:120px;
    background-color: rgb(111,222,33);
}
</style>

用其他的方法也是可以实现的。以上仅仅提供一种方法。

C、切换部分

设置完样式，此时我们的四个页面，以及我们的导航应该已经就位了。
下面就要提到我们这次的重点了。就是选择器‘~’
A~B意为选中A之后的同级的B
而我们又知道，当radio被选中时，它会被选择器:checked选中。
这个时候我们就可以对其进行设置了。

.slide-base:checked~.nav-base{
    background-color: white;
    color:#9999dd;
}
.slide-skills:checked~.nav-skills{
    background-color: white;
    color:rgb(122,211,123);
}
.slide-experience:checked~.nav-experience{
    background-color: white;
    color:rgb(123,123,123);
}
.slide-my:checked~.nav-my{
    background-color: white;
    color:rgb(111,222,33);
}

这一部分是当我们的当行被选中时，导航元素的变化，以显示其现在已经被选中。

.container{
    transition: 500ms;
    transition-timing-function: ease-in;
}
.slide-base:checked~.container{
    transform: translateY(0);
}

.slide-skills:checked~.container{
    transform: translateY(-100%);
}
.slide-experience:checked~.container{
    transform: translateY(-200%);
}
.slide-my:checked~.container{
    transform: translateY(-300%);
}

对container进行设置，是为了保留我们轮播的动画过程。
每一次元素被选中时，如果需要进行位移，我们就将外层的container这个盒子进行一定的移动，让它处于我们的视窗区域。
这样一来。我们的轮播就完成了。

总结

我们这一次主要使用了css3的几个特殊的选择器进行实现，所以，对低版本浏览器存在必然的不兼容性。当然制作这个东西的原因，也只是因为自己一时的心血来潮。总的来说，这一次关键点是利用了radio被选中之后的可被单独选中的特性，以及label标签与radio标签之间的联动特性和最重要的关键，我们的~选择器。它能让我们选中之后同级的元素，使我们使用纯css实现轮播成为了可能。