CSS教程-响应布局与平滑过渡


在本教程中,我们将创建一个响应式的全屏页面布局。这个页面是由导航模块+简单的内容面板构造而成的,出发导航条,内容区域会以平滑的方式滚动出现在相应位置。html代码:我们...

     在本教程中,我们将创建一个响应式的全屏页面布局。这个页面是由导航模块+简单的内容面板构造而成的,出发导航条,内容区域会以平滑的方式滚动出现在相应位置。

html代码:


我们将用html5标记写出一个简单的代码结构。

<div class="st-container">
                  
    <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
    <a href="#st-panel-1">Serendipity</a>
          
    <input type="radio" name="radio-set" id="st-control-2"/>
    <a href="#st-panel-2">Happiness</a>
          
    <input type="radio" name="radio-set" id="st-control-3"/>
    <a href="#st-panel-3">Tranquillity</a>
          
    <input type="radio" name="radio-set" id="st-control-4"/>
    <a href="#st-panel-4">Positivity</a>
          
    <input type="radio" name="radio-set" id="st-control-5"/>
    <a href="#st-panel-5">Passion</a>
          
    <div class="st-scroll">
      
        <section class="st-panel" id="st-panel-1">
            <div class="st-deco" data-icon="H"></div>
            <h2>Serendipity</h2>
            <p>Banksy adipisicing eiusmod banh mi sed...</p>
        </section>
              
        <section class="st-panel st-color" id="st-panel-2">
            <!-- ... -->
        </section>
              
        <!-- ... st-panel-3, st-panel-4, st-panel-5 -->
      
    </div><!-- // st-scroll -->
          
</div><!-- // st-container -->

我们通过锚点链接出发内容区域转换。


CSS样式

现在,我们如何使这布局灵活的页面内容做成全屏幕的大小?诀窍在于定义内容主区域容器为浮动状态,并将宽度高度设置为:100%,这样能够获得良好的兼容性。

将上下、左右滚动条隐藏。

body {
    overflow: hidden;
}

主容器的样式:

.st-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
}

设置导航样式,让其一直在底部浮动,并设置导航链接超链接样式。

.st-container > input,
.st-container > a {
    position: fixed;
    bottom: 0px;
    width: 20%;
    cursor: pointer;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
}
    
.st-container > input {
    opacity: 0;
    z-index: 1000;
}
    
.st-container > a {
    z-index: 10;
    font-weight: 700;
    background: #e23a6e;
    color: #fff;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
}

通过:before设置主容器加载之前的样式

.st-container:before {
    content: '';
    position: fixed;
    width: 100%;
    height: 34px;
    background: #e23a6e;
    z-index: 9;
    bottom: 0;
}

定位导航超链接项目位置

#st-control-1, #st-control-1 + a {
    left: 0;
}
    
#st-control-2, #st-control-2 + a {
    left: 20%;
}
    
#st-control-3, #st-control-3 + a {
    left: 40%;
}
    
#st-control-4, #st-control-4 + a {
    left: 60%;
}
    
#st-control-5, #st-control-5 + a {
    left: 80%;
}

通过百分比定位可以准确的适应屏幕。

定义导航超链接项目鼠标悬停状态下样式:

.st-container > input:checked + a,
.st-container > input:checked:hover + a{
    background: #821134;
}

通过css伪类元素:after,制作出一个倒三角图形

标签: CSS