@charset "utf-8"; /* @功能:重设浏览器默认样式 */ /* 防止用户自定义背景颜色对网页的影响,添加让用户可以自定义字体 */ html { -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; } /* 内外边距通常让各个浏览器样式的表现位置不同 */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { margin:0; padding:0; } /* 重设 HTML5 标签,IE 需要在 js 中 createElement(TAG) */ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; } /* HTML5 媒体文件跟 img 保持一致 */ audio,canvas,video { display:inline-block; *display:inline; *zoom:1; } /* 要注意表单元素并不继承父级 font 的问题 */ body,button,input,select,textarea { font:12px/1.5 "微软雅黑"; } input,select,textarea { font-size:100%; } /* 去掉各Table cell 的边距并让其边重合 */ table { border-collapse:collapse; border-spacing:0; } /* IE bug fixed:th 不继承 text-align*/ th { text-align:inherit; } /* 去除默认边框 */ fieldset,img { border:0; } /* ie6 7 8(q) bug 显示为行内表现 */ { display:block; } /* 去掉 firefox 下此元素的边框 */ abbr,acronym { border:0; font-variant:normal; } /* 一致的 del 样式 */ del { text-decoration:line-through; } address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:500; } /* 去掉列表前的标识,li 会继承 */ ol,ul { list-style:none; } /* 对齐是排版最重要的因素,别让什么都居中 */ caption,th { text-align:left; } /* 来自yahoo,让标题都自定义,适应多个系统应用 */ h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:500; } q:before,q:after { content:''; } /* 统一上标和下标 */ sub,sup { font-size:75%; line-height:0; position:relative; vertical-align:baseline; } sup { top:-0.5em; } sub { bottom:-0.25em; } /* 让链接在 hover 状态下显示下划线 */ a:hover { text-decoration:underline; } /* 默认不显示下划线,保持页面简洁 */ ins,a { text-decoration:none; } /* 清理浮动 */ .fn-clear:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; } .fn-clear { zoom:1; /* for IE6 IE7 */ } #box29Main { width:800px; height:234px; margin:0 auto; position:relative; } #box29Main li { position:absolute; left:200px; top:0; } #box29Main li img { width:100%; height:100%; } #box29Main .box29-clt { opacity:0; } #box29Main .box29-clt-prev { position:absolute; top:50%; left:20px; margin-top:-36px; width:72px; height:72px; line-height:72px; cursor:pointer; font-size:70px; color:#80848f; text-align:center; z-index:10; } #box29Main .box29-clt-next { position:absolute; top:50%; right:20px; margin-top:-36px; width:72px; height:72px; line-height:72px; font-size:70px; color:#80848f; text-align:center; cursor:pointer; z-index:10; }
1、获取需要的标签
2、鼠标移入盒子显示左右箭头
3、利用数组方法完成左右切换