我下载了滑块显示的脚本，它没有问题，但在实现了这个幻灯片后，我在HTML5的seo优化中遇到了问题。因为这个代码使用这个<div u="">或<img u="">，它仍然告诉我，我不能使用这个组合div与标签"u"。
这是幻灯片的完整脚本:
<!-- Jssor Slider Begin -->
<!-- To move inline styles to css file/block, please specify a class name for each element. -->
<!-- ================================================== -->
<div id="slider1_container" style="display: none; position: relative; margin: 0 auto;
top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block;
top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
<div style="position: absolute; display: block; background: url(../img/loading.gif) no-repeat center center;
top: 0px; left: 0px; width: 100%; height: 100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 0px; top: 0px; width: 1300px; height: 500px; overflow: hidden;">
<div>
<img u="image" src2="../img/1920/red.jpg" />
</div>
<div>
<img u="image" src2="../img/1920/purple.jpg" />
</div>
<div>
<img u="image" src2="../img/1920/blue.jpg" />
</div>
</div>
<!--#region Bullet Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
<style>
/* jssor slider bullet navigator skin 21 css */
/*
.jssorb21 div (normal)
.jssorb21 div:hover (normal mouseover)
.jssorb21 .av (active)
.jssorb21 .av:hover (active mouseover)
.jssorb21 .dn (mousedown)
*/
.jssorb21 {
position: absolute;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
position: absolute;
/* size of bullet elment */
width: 19px;
height: 19px;
text-align: center;
line-height: 19px;
color: white;
font-size: 12px;
background: url(../img/b21.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
</style>
<!-- bullet navigator container -->
<div u="navigator" class="jssorb21" style="bottom: 26px; right: 6px;">
<!-- bullet navigator item prototype -->
<div u="prototype"></div>
</div>
<!--#endregion Bullet Navigator Skin End -->
<!--#region Arrow Navigator Skin Begin -->
<!-- Help: http://www.jssor.com/development/slider-with-arrow-navigator-jquery.html -->
<style>
/* jssor slider arrow navigator skin 21 css */
/*
.jssora21l (normal)
.jssora21r (normal)
.jssora21l:hover (normal mouseover)
.jssora21r:hover (normal mouseover)
.jssora21l.jssora21ldn (mousedown)
.jssora21r.jssora21rdn (mousedown)
*/
.jssora21l, .jssora21r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url(../img/a21.png) center center no-repeat;
overflow: hidden;
}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora21l" style="top: 123px; left: 8px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora21r" style="top: 123px; right: 8px;">
</span>
<!--#endregion Arrow Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">Bootstrap Slider</a>
</div>
<!-- Jssor Slider End -->
我尝试将样式从这个代码转换为css，但之后滑块不工作。因为我删除了所有的标签"u"，我只使用了"class"作为样式。但是之后就不工作了。
这是一个css文件，我尝试将样式从html转换为css，但它不工作只有这样:
#slider1_container {
display: none;
position: relative;
margin: 0 auto;
top: 0px;
left: 0px;
width: 1300px;
height: 580px;
overflow: hidden;
}
.slider_background {
background-position: center top;
background-color: black;
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 0% 0%;
background-clip: border-box;
background-origin: padding-box;
background-size: 100% 100%;
width: 100%;
height: 580px;
}
.loading {
position: absolute;
top: 0px;
left: 0px;
}
#slider_filter {
filter: alpha(opacity=70);
opacity: 0.7;
position: absolute;
display: block;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.slides {
cursor: move;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 580px;
overflow: hidden;
}
.jssorb21 div, .jssorb21 div:hover, .jssorb21 .av {
position: absolute;
/* size of bullet elment */
width: 19px;
height: 19px;
text-align: center;
line-height: 19px;
color: white;
font-size: 12px;
background: url(../img/b21.png) no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb21 div { background-position: -5px -5px; }
.jssorb21 div:hover, .jssorb21 .av:hover { background-position: -35px -5px; }
.jssorb21 .av { background-position: -65px -5px; }
.jssorb21 .dn, .jssorb21 .dn:hover { background-position: -95px -5px; }
.jssora21l, .jssora21r {
display: block;
position: absolute;
/* size of arrow element */
width: 55px;
height: 55px;
cursor: pointer;
background: url(../img/a21.png) center center no-repeat;
overflow: hidden;
}
.jssora21l { background-position: -3px -33px; }
.jssora21r { background-position: -63px -33px; }
.jssora21l:hover { background-position: -123px -33px; }
.jssora21r:hover { background-position: -183px -33px; }
.jssora21l.jssora21ldn { background-position: -243px -33px; }
.jssora21r.jssora21rdn { background-position: -303px -33px; }
#slider_image {
position: absolute;
display: block;
background: url(../img/loading.gif) no-repeat center center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
这是我的网站，我仍然试图实现这没有html错误的seo优化。
输出错误验证WEB
请使用类名而不是id来定义css。
.slider1_container {
...
}
要通过html验证，请将u属性替换为data-u。
参考:http://www.jssor.com/development/pass-html-validation.html