基于Bootstrap实现下图所示效果的页面,一个基本的滚动广告页,带有图片和文字:
效果图:
库引用地址:
bootstrap框架: //netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css
jquery库: http://libs.baidu.com/jquery/1.9.0/jquery.js
bootstrap.min.js://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js
1. 搭建基础的bootstrap页面
2. 根据课程所学或官方文档搭建基础滚动广告结构
3. 图片和文字如下:
引用地址: http://img1.sycdn.imooc.com//5412ad400001e52014280484.jpg
文字: 11 英寸 MacBook Air 充电一次可运行长达 9 小时,而 13 英寸机型则可运行长达 12 小时。
引用地址: http://img1.sycdn.imooc.com//5412ad7c0001d2eb10880541.jpg
文字: 无论是什么任务,配备 Intel HD Graphics 5000 图形处理器的第四代 Intel Core 处理器都能应对自如。
引用地址: http://img1.sycdn.imooc.com//5412ae5c0001653b12800644.jpg
文字: 有了新一代 802.11ac 技术,MacBook Air 令 Wi-Fi 速度超越极限。
注意:设置样式,让滚动广告高度固定,如:
<style> .carousel { height: 500px; } .carousel .item { height: 500px; } .carousel .item img { width: 100%; } </style>
右下角"代码下载"区可以下载参考代码。
请验证,完成请求
由于请求次数过多,请先验证,完成再次请求
打开微信扫码自动绑定
绑定后可得到
使用 Ctrl+D 可将课程添加到书签
举报