
在网页中为了显示更多内容,界面更美观,通常会用到“跑马灯”效果。
打开 Dreamweaver
新建 HTML 文档;
修改标题为"跑马灯"
保存为 index.html 文件。
首先,编写跑马灯部分的静态 HTML 代码,把图片排列起来
在
和 标签中添加以下代码:
给上一步的 HTML 代码中的 div 标签增加 class 属性,如下:
编写跑马灯部分的 CSS 样式代码,代码放在
和 标签中,如下:ul{list-style:none; padding:0; margin:0;}
.con{ width:1105px; height:225px; overflow:hidden; border:2px solid #666; margin:10px auto 0 auto; padding:5px 0 0 5px;}
.con ul li{ float:left; margin:0 5px 10px 0;}
.con ul li img{ display:block; width:209px; height:209px; padding:2px; border:1px solid #ccc;}
引入 JQuery 库
引入 Marquee 插件
代码放在







