拥Bootstrap入怀--幻灯片大屏轮播篇_html/css_WEB-ITnose
作者:myvin
写在前面在该博文中,我依旧结合自己做的那个山水网页来聊一下Bootstrap的使用,网页截图如下:
完整网页的效果和代码可以点击这里查看或者到CodePen上查看。我们再在这里重复一下这个网页要达到的几个主要效果,看过上一篇博文的帅哥美女们可以直接跳过这一段了:
导航栏的登陆、注册按钮点击后弹出登陆、注册modal框,并且登陆、注册窗口可切换,菜单栏为响应式
导航栏中的山水选项可下拉,点击下拉中的九寨沟``丽江``水帘洞会定位到相应的tab
幻灯片大屏轮播
tab页点击切换
上一篇博文中我们简单聊了聊导航栏的相关内容,想了解或回顾一下的可以点击这里查看上一篇博文。今天我们再聊聊幻灯片大屏轮播这部分。想先目睹下大屏轮播效果实现的可以点击这里查看。
幻灯片大屏轮播先给出大屏轮播的准完整代码:
其中,该段代码是轮播图下方的三个快速切换的小圆点:
该段代码是轮播图切换的前后两个箭头:
Previous Next
大屏轮播下是带有风景圆图的三段简介:
其中,col-md-10类使得下方三段简介总共占10列,col-md-4类使得每段简介分别占4列。
运行以上代码后,我们面对的其实并不是我们想要的效果,轮播图紧挨着下面的三段简介,图片大的有些畸形,而且还有没有填充满的边缘,所以上面说的是准代码,所以我们还需要填补一些代码来完善。
首先我们给carousel类添加代码,限制整个轮播区域的大小,为了视觉上的美观,并和下方的三段简介间隔70px:
.carousel{ height:500px; margin-bottom: 70px; }同时也给carousel类下的item类添加样式:
.carousel .item{ height:500px; }最后为了填充侧边的空白,将轮播的图片百分百占满浏览器宽度:
.carousel .item img{ width:100%; }自行添加上这三段代码后运行,貌似没有什么bug,但如果将浏览器缩小缩小再缩小,令人“欣慰”的情况终于出现了:
我们看下面的那段黑白过度的条儿。因为我们给轮播图片容器限制了500px的高度,所以当页面缩小自适应时由于容器500px的高度限制,图片虽然在缩小,容器依然保持不变。明白了原因,当然修改的方法也非常简单,我们可以将height属性替换成max-height属性:
.carousel .item{ max-height:500px; }这样,图片容器也能随着自适应。
至于三段简单介绍,大家简单看看就可以。
小了个结下回接着聊tab切换。
祝大家一切安好。
转载请记得说明作者和出处哦-.-
上一篇:《拥Bootstrap入怀??导航栏篇》 置顶文章:《纯CSS打造银色MacBook Air(完整版)》
作者:myvin
原文出处:声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章
相关视频