记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[HTML5/CSS3] CSS教程-响应布局与平滑过渡[含1P]

[复制链接]
发表于 2017-5-24 12:54:39 | 显示全部楼层 |阅读模式
     在本教程中,我们将创建一个响应式的全屏页面布局。这个页面是由导航模块+简单的内容面板构造而成的,出发导航条,内容区域会以平滑的方式滚动出现在相应位置。
CSS教程-响应布局与平滑过渡 Happiness,checked 【HTML】 125508th55kk2c5ckpfsp7 1

html代码:
我们将用html5标记写出一个简单的代码结构。
  1. <div class="st-container">
  2.                   
  3.     <input type="radio" name="radio-set" checked="checked" id="st-control-1"/>
  4.     <a href="#st-panel-1">Serendipity</a>
  5.          
  6.     <input type="radio" name="radio-set" id="st-control-2"/>
  7.     <a href="#st-panel-2">Happiness</a>
  8.          
  9.     <input type="radio" name="radio-set" id="st-control-3"/>
  10.     <a href="#st-panel-3">Tranquillity</a>
  11.          
  12.     <input type="radio" name="radio-set" id="st-control-4"/>
  13.     <a href="#st-panel-4">Positivity</a>
  14.          
  15.     <input type="radio" name="radio-set" id="st-control-5"/>
  16.     <a href="#st-panel-5">Passion</a>
  17.          
  18.     <div class="st-scroll">
  19.       
  20.         <section class="st-panel" id="st-panel-1">
  21.             <div class="st-deco" data-icon="H"></div>
  22.             <h2>Serendipity</h2>
  23.             <p>Banksy adipisicing eiusmod banh mi sed...</p>
  24.         </section>
  25.               
  26.         <section class="st-panel st-color" id="st-panel-2">
  27.             <!-- ... -->
  28.         </section>
  29.               
  30.         <!-- ... st-panel-3, st-panel-4, st-panel-5 -->
  31.       
  32.     </div><!-- // st-scroll -->
  33.          
  34. </div><!-- // st-container -->
复制代码
我们通过锚点链接出发内容区域转换。

CSS样式

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

将上下、左右滚动条隐藏。
  1. body {
  2.     overflow: hidden;
  3. }
复制代码
主容器的样式:
  1. .st-container {
  2.     position: absolute;
  3.     width: 100%;
  4.     height: 100%;
  5.     top: 0;
  6.     left: 0;
  7.     font-family: 'Josefin Slab', 'Myriad Pro', Arial, sans-serif;
  8. }
复制代码
设置导航样式,让其一直在底部浮动,并设置导航链接超链接样式。
  1. .st-container > input,
  2. .st-container > a {
  3.     position: fixed;
  4.     bottom: 0px;
  5.     width: 20%;
  6.     cursor: pointer;
  7.     font-size: 16px;
  8.     height: 34px;
  9.     line-height: 34px;
  10. }
  11.    
  12. .st-container > input {
  13.     opacity: 0;
  14.     z-index: 1000;
  15. }
  16.    
  17. .st-container > a {
  18.     z-index: 10;
  19.     font-weight: 700;
  20.     background: #e23a6e;
  21.     color: #fff;
  22.     text-align: center;
  23.     text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
  24. }
复制代码
通过:before设置主容器加载之前的样式
  1. .st-container:before {
  2.     content: '';
  3.     position: fixed;
  4.     width: 100%;
  5.     height: 34px;
  6.     background: #e23a6e;
  7.     z-index: 9;
  8.     bottom: 0;
  9. }
复制代码
定位导航超链接项目位置
  1. #st-control-1, #st-control-1 + a {
  2.     left: 0;
  3. }
  4.    
  5. #st-control-2, #st-control-2 + a {
  6.     left: 20%;
  7. }
  8.    
  9. #st-control-3, #st-control-3 + a {
  10.     left: 40%;
  11. }
  12.    
  13. #st-control-4, #st-control-4 + a {
  14.     left: 60%;
  15. }
  16.    
  17. #st-control-5, #st-control-5 + a {
  18.     left: 80%;
  19. }
复制代码
通过百分比定位可以准确的适应屏幕。

定义导航超链接项目鼠标悬停状态下样式:
  1. .st-container > input:checked + a,
  2. .st-container > input:checked:hover + a{
  3.     background: #821134;
  4. }
复制代码
通过css伪类元素:after,制作出一个倒三角图形
  1. .st-container > input:checked + a:after,
  2. .st-container > input:checked:hover + a:after{
  3.     bottom: 100%;
  4.     border: solid transparent;
  5.     content: '';
  6.     height: 0;
  7.     width: 0;
  8.     position: absolute;
  9.     pointer-events: none;
  10.     border-bottom-color: #821134;
  11.     border-width: 20px;
  12.     left: 50%;
  13.     margin-left: -20px;
  14. }
复制代码


让我们也定义一个悬停状态的链接元素:
  1. .st-container > input:hover + a{
  2.     background: #AD244F;
  3. }
  4.    
  5. .st-container > input:hover + a:after {
  6.     border-bottom-color: #AD244F;
  7. }
复制代码
这是内容展示区域的样式及滚动效果
  1. .st-scroll,
  2. .st-panel {
  3.     position: relative;
  4.     width: 100%;
  5.     height: 100%;
  6. }
  7.    
  8. .st-scroll {
  9.     top: 0;
  10.     left: 0;
  11.     -webkit-transition: all 0.6s ease-in-out;
  12.     -moz-transition: all 0.6s ease-in-out;
  13.     -o-transition: all 0.6s ease-in-out;
  14.     -ms-transition: all 0.6s ease-in-out;
  15.     transition: all 0.6s ease-in-out;
  16.         
  17.     /* Let's enforce some hardware acceleration */
  18.     -webkit-transform: translate3d(0, 0, 0);
  19.     -webkit-backface-visibility: hidden;
  20. }
  21.    
  22. .st-panel{
  23.     background: #fff;
  24.     overflow: hidden;
  25. }
复制代码
逐个定义每个内容块的样式:
  1. body {
  2.     overflow: hidden;
  3. }0
复制代码
定义块内容头部倒三角
  1. body {
  2.     overflow: hidden;
  3. }1
复制代码
通过字体图标工具结合css中的:after伪类元素定义块图标
  1. body {
  2.     overflow: hidden;
  3. }2
复制代码
设置块内容H2标题样式:
  1. body {
  2.     overflow: hidden;
  3. }3
复制代码
设置H2标签转换效果样式
  1. body {
  2.     overflow: hidden;
  3. }4
复制代码
设置块内容P标签样式
  1. body {
  2.     overflow: hidden;
  3. }5
复制代码
设置辅助性个别样式
  1. body {
  2.     overflow: hidden;
  3. }6
复制代码


这篇老外的教程写的相当详细,非常感谢原作者。
本文翻译的如有不正确的地方,请及时纠正。
原文链接
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表