响应式网页上banner使用，unslider

网站上banner对应的css代码

<!-- banner开始 -->
<section>
<div class="banner"><ul><li style="background-color:#5CC9E0; text-align: center;"><img src="<{$site_info.s_url}>/theme/images/banner1.jpg" /><h1>企业逼格靠网站，网站逼格靠兼容<br /><small>懒人出品的网站，在电脑、平板、手机、微信，都正常浏览！</small></h1></li><li style="text-align: center;"><img src="<{$site_info.s_url}>/theme/images/banner2.jpg" /><h1>企业400热线电话<br /><small>一个号码，一致对外！</small></h1></li><!-- <{foreach from=$index_img item=con name=foo}><li style="background-color:#333;"><a href="<{$con.link}>"  title="<{$con.title}>"><img src="<{$site_info.s_url}>/attached/<{$con.img}>" alt="<{$con.title}>" /></a></li><{/foreach}> --></ul><a href="javascript:void(0);" class="unslider-arrow prev"></a><a href="javascript:void(0);" class="unslider-arrow next"></a>
</div>
<script type="text/javascript" src="//unslider.com/unslider.js"></script>
<script type="text/javascript">$(function() {var unslider = $('.banner').unslider({speed: 500,               // 动画的滚动速度，数字越大越慢delay: 8000,              //  每个滑块的停留时间complete: function() {},  //  每个滑块动画完成时调用的方法keys: true,               //  是否支持键盘dots: true,               //  是否显示翻页圆点fluid: true              //  支持响应式设计（有可能会影响到响应式）});// banner箭头部分$('.unslider-arrow').click(function() {var fn = this.className.split(' ')[1];unslider.data('unslider')[fn]();});});
</script>
</section>
<!-- banner结束 -->

网站上banner对应的css代码

   .banner { position: relative; overflow: auto; }.banner ul { padding:0; margin:0; }.banner li { list-style: none; }.banner ul li { float: left; }/*--banner中的圆点部分 --*/.banner .dot {-webkit-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));-moz-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));-ms-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));-o-filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));}.banner .dots {position: absolute;left: 0;right: 0;bottom: 10px;width: 100%;text-align: center;}.banner .dots li {display: inline-block;*display: inline;zoom: 1;width: 10px;height: 10px;line-height: 10px;margin: 0 4px;text-indent: -999em;*text-indent: 0;border: 2px solid #fff;border-radius: 6px;cursor: pointer;opacity: .4;-webkit-transition: background .5s, opacity .5s;-moz-transition: background .5s, opacity .5s;transition: background .5s, opacity .5s;}.banner .dots li.active {background: #fff;opacity: 1;}/*用到了houweb.css里的网络字体,让左右箭头显示出来，注意下！*/.banner .unslider-arrow {font-family:"lanren2016";font-size:50px;font-style:normal;position: absolute;width: 60px; height: 60px;top:50%;margin-top: -30px;text-decoration: none;}.banner .prev {left: 15px;}.banner .next {right: 15px;}

响应式网页上banner使用，unslider相关推荐

响应式网页设计_响应式网页设计–如何使网站在手机和平板电脑上看起来不错
响应式网页设计 In the rapidly evolving landscape of connected devices, responsive web design continues to b ...
《响应式网页设计》系列分享专栏
2019独角兽企业重金招聘Python工程师标准>>> <响应式网页设计>已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/ ...
12个最佳的响应式网页设计教程，轻松带你入门！
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
12个最佳的响应式网页设计教程，轻松带你入门
如何让你的网站在其出现的任何设备和屏幕尺寸上能够完美的呈现?响应式设计完美的解决了这一难题,作为现在的网页设计师都应该了解响应式网页设计的原则.而对于刚步入网页设计的新手设计师,如果你还不了解什么是响 ...
来和小伙伴一起学习响应式网页设计吧
响应式设计现在已经成为网页设计师学习的焦点.优设哥发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多. 你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎 ...
FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
20个响应式网页设计中的“神话”误区
关于响应式网页的重要性我们已经证实了很长时间了,现在是该把焦点放到如何做出好的响应式网页设计的时候了.一起来看看吧! 虽然很多人都在谈论响应式网页,但并不是每个人都知道他们在说什么.很多时候你看到网上 ...
设计师必读的15个响应式网页设计教程
@陈子木响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势.正如同Ethan所说:"响应式网站设计提 ...
响应式网页设计应该注意的9个原则
响应式网站越来越受到大家的欢迎,有利也有弊的因素.它没有固定的页面尺寸.没有毫米或英寸,没有任何物理限制,让人感到无从下手.下面就和大家分析如何运用响应式web设计的各项基本原则来实现.为了简单起见, ...

响应式网页上banner使用，unslider

响应式网页上banner使用，unslider相关推荐

最新文章

热门文章