div+CSS+JS+UL=图片加文字无缝对接 图片滚动

昨天还是前天发了一个marquee标签无缝滚动 但是这个优缺点那就在下面不好加文字进行一个滚动  然后老板果然不满意 需要一个文字在图片下面 所以就有了今天这个

其实这个有很多各种叫法什么 图片滚动 js自动轮播 图片轮播 图片自动轮播 什么什么的好多个叫法 所以看文字名字这个叫法不错吧!

废话不多说:(有点不好看 原谅我审美比较差)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>zklhy</title>
<style type="text/css">
<!--
#S_LIST{
 PADDING-RIGHT: 0px;
 PADDING-LEFT: 0px;
 LIST-STYLE-POSITION: outside;
 PADDING-BOTTOM: 0px;
 MARGIN: 0px;
 PADDING-TOP: 0px;
 LIST-STYLE-TYPE: none;
 overflow: hidden;
}

#S_LIST LI {
 width:755px;
 height:auto;
 float:left;
 padding: 0px;
 margin: 0px;
 list-style-image: none;
 list-style-type: none;
}
#S_LIST A {
 DISPLAY: block;
 MARGIN: 0px;
 WIDTH: 755px;
 HEIGHT: auto;
 TEXT-ALIGN: center;
 padding-top: 3px;
 padding-right: 0px;
 padding-bottom: 3px;
 padding-left: 0px;
}
#demo {
 background: #FFF;
 overflow:hidden;
 border: 1px dashed #CCC;
 width: 100%;
 height:240px;
}
#demo img {
border: 1px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
 float: left;
}
#demo2 {
float: left;
}
-->
</style>
</head>
<body>
<div id="demo">
<div id="indemo">
<div id="demo1">
    <ul id="S_LIST">    
      <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/68.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
      <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/67.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/66.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/65.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/64.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/68.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/63.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/64.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/62.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
	        <li><a href="http://zklhy.com"><img src="http://www.zklhy.com/wp-content/uploads/2016/04/60.jpg" width="750" height="210" border="0" /></a>
      <a href="http://zklhy.com" >特色</a></li>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>

Font Awesome:图标字体 完全CSS控制

完全是自己留着以后用 有需要的可以过来看看 !

下面是全部的Font Awesome图标:

  • “\f000”
  • “\f001”
  • “\f002”
  • “\f003”
  • “\f004”
  • “\f005”
  • “\f006”
  • “\f007”
  • “\f008”
  • “\f009”
  • “\f00a”
  • “\f00b”
  • “\f00c”
  • “\f00d”
  • “\f00e”
  • “\f010”
  • “\f011”
  • “\f012”
  • “\f013”
  • “\f014”
  • “\f015”
  • “\f016”
  • “\f017”
  • “\f018”
  • “\f019”
  • “\f01a”
  • “\f01b”
  • “\f01c”
  • “\f01d”
  • “\f01e”
  • “\f021”
  • “\f022”
  • “\f023”
  • “\f024”
  • “\f025”
  • “\f026”
  • “\f027”
  • “\f028”
  • “\f029”
  • “\f02a”
  • “\f02b”
  • “\f02c”
  • “\f02d”
  • “\f02e”
  • “\f02f”
  • “\f030”
  • “\f031”
  • “\f032”
  • “\f033”
  • “\f034”
  • “\f035”
  • “\f036”
  • “\f037”
  • “\f038”
  • “\f039”
  • “\f03a”
  • “\f03b”
  • “\f03c”
  • “\f03d”
  • “\f03e”
  • “\f040”
  • “\f041”
  • “\f042”
  • “\f043”
  • “\f044”
  • “\f045”
  • “\f046”
  • “\f047”
  • “\f048”
  • “\f049”
  • “\f04a”
  • “\f04b”
  • “\f04c”
  • “\f04d”
  • “\f04e”
  • “\f050”
  • “\f051”
  • “\f052”
  • “\f053”
  • “\f054”
  • “\f055”
  • “\f056”
  • “\f057”
  • “\f058”
  • “\f059”
  • “\f05a”
  • “\f05b”
  • “\f05c”
  • “\f05d”
  • “\f05e”
  • “\f060”
  • “\f061”
  • “\f062”
  • “\f063”
  • “\f064”
  • “\f065”
  • “\f066”
  • “\f067”
  • “\f068”
  • “\f069”
  • “\f06a”
  • “\f06b”
  • “\f06c”
  • “\f06d”
  • “\f06e”
  • “\f070”
  • “\f071”
  • “\f072”
  • “\f073”
  • “\f074”
  • “\f075”
  • “\f076”
  • “\f077”
  • “\f078”
  • “\f079”
  • “\f07a”
  • “\f07b”
  • “\f07c”
  • “\f07d”
  • “\f07e”
  • “\f080”
  • “\f081”
  • “\f082”
  • “\f083”
  • “\f084”
  • “\f085”
  • “\f086”
  • “\f087”
  • “\f088”
  • “\f089”
  • “\f08a”
  • “\f08b”
  • “\f08c”
  • “\f08d”
  • “\f08e”
  • “\f090”
  • “\f091”
  • “\f092”
  • “\f093”
  • “\f094”
  • “\f095”
  • “\f096”
  • “\f097”
  • “\f098”
  • “\f099”
  • “\f09a”
  • “\f09b”
  • “\f09c”
  • “\f09d”
  • “\f09e”
  • “\f0a0”
  • “\f0a1”
  • “\f0f3”
  • “\f0a3”
  • “\f0a4”
  • “\f0a5”
  • “\f0a6”
  • “\f0a7”
  • “\f0a8”
  • “\f0a9”
  • “\f0aa”
  • “\f0ab”
  • “\f0ac”
  • “\f0ad”
  • “\f0ae”
  • “\f0b0”
  • “\f0b1”
  • “\f0b2”
  • “\f0c0”
  • “\f0c1”
  • “\f0c2”
  • “\f0c3”
  • “\f0c4”
  • “\f0c5”
  • “\f0c6”
  • “\f0c7”
  • “\f0c8”
  • “\f0c9”
  • “\f0ca”
  • “\f0cb”
  • “\f0cc”
  • “\f0cd”
  • “\f0ce”
  • “\f0d0”
  • “\f0d1”
  • “\f0d2”
  • “\f0d3”
  • “\f0d4”
  • “\f0d5”
  • “\f0d6”
  • “\f0d7”
  • “\f0d8”
  • “\f0d9”
  • “\f0da”
  • “\f0db”
  • “\f0dc”
  • “\f0dd”
  • “\f0de”
  • “\f0e0”
  • “\f0e1”
  • “\f0e2”
  • “\f0e3”
  • “\f0e4”
  • “\f0e5”
  • “\f0e6”
  • “\f0e7”
  • “\f0e8”
  • “\f0e9”
  • “\f0ea”
  • “\f0eb”
  • “\f0ec”
  • “\f0ed”
  • “\f0ee”
  • “\f0f0”
  • “\f0f1”
  • “\f0f2”
  • “\f0a2”
  • “\f0f4”
  • “\f0f5”
  • “\f0f6”
  • “\f0f7”
  • “\f0f8”
  • “\f0f9”
  • “\f0fa”
  • “\f0fb”
  • “\f0fc”
  • “\f0fd”
  • “\f0fe”
  • “\f100”
  • “\f101”
  • “\f102”
  • “\f103”
  • “\f104”
  • “\f105”
  • “\f106”
  • “\f107”
  • “\f108”
  • “\f109”
  • “\f10a”
  • “\f10b”
  • “\f10c”
  • “\f10d”
  • “\f10e”
  • “\f110”
  • “\f111”
  • “\f112”
  • “\f113”
  • “\f114”
  • “\f115”
  • “\f118”
  • “\f119”
  • “\f11a”
  • “\f11b”
  • “\f11c”
  • “\f11d”
  • “\f11e”
  • “\f120”
  • “\f121”
  • “\f122”
  • “\f122”
  • “\f123”
  • “\f124”
  • “\f125”
  • “\f126”
  • “\f127”
  • “\f128”
  • “\f129”
  • “\f12a”
  • “\f12b”
  • “\f12c”
  • “\f12d”
  • “\f12e”
  • “\f130”
  • “\f131”
  • “\f132”
  • “\f133”
  • “\f134”
  • “\f135”
  • “\f136”
  • “\f137”
  • “\f138”
  • “\f139”
  • “\f13a”
  • “\f13b”
  • “\f13c”
  • “\f13d”
  • “\f13e”
  • “\f140”
  • “\f141”
  • “\f142”
  • “\f143”
  • “\f144”
  • “\f145”
  • “\f146”
  • “\f147”
  • “\f148”
  • “\f149”
  • “\f14a”
  • “\f14b”
  • “\f14c”
  • “\f14d”
  • “\f14e”
  • “\f150”
  • “\f151”
  • “\f152”
  • “\f153”
  • “\f154”
  • “\f155”
  • “\f156”
  • “\f157”
  • “\f158”
  • “\f159”
  • “\f15a”
  • “\f15b”
  • “\f15c”
  • “\f15d”
  • “\f15e”
  • “\f160”
  • “\f161”
  • “\f162”
  • “\f163”
  • “\f164”
  • “\f165”
  • “\f166”
  • “\f167”
  • “\f168”
  • “\f169”
  • “\f16a”
  • “\f16b”
  • “\f16c”
  • “\f16d”
  • “\f16e”
  • “\f170”
  • “\f171”
  • “\f172”
  • “\f173”
  • “\f174”
  • “\f175”
  • “\f176”
  • “\f177”
  • “\f178”
  • “\f179”
  • “\f17a”
  • “\f17b”
  • “\f17c”
  • “\f17d”
  • “\f17e”
  • “\f180”
  • “\f181”
  • “\f182”
  • “\f183”
  • “\f184”
  • “\f185”
  • “\f186”
  • “\f187”
  • “\f188”
  • “\f189”
  • “\f18a”
  • “\f18b”
  • “\f18c”
  • “\f18d”
  • “\f18e”
  • “\f190”
  • “\f191”
  • “\f192”
  • “\f193”
  • “\f194”
  • “\f195”
  • “\f196”

在线Html、CSS、JavaScript、XML、PHP代码高亮工具

去别人网站的时候种是看到别人代码都是高亮的,看起来好漂亮,所以就自己捣鼓捣鼓了下!

20151106005913

感觉还不错支持Html、CSS、JavaScript、XML、PHP代码高亮。

测试:

<p><!-- Html Mix:在线处理Html代码高亮 --><br />
<!-- CSS:在线处理CSS代码高亮 --><br />
<!-- JavaScript:在线处理JavaScript代码高亮 --><br />
<!-- XML:在线处理XML代码高亮 --><br />
<!-- PHP:在线处理PHP代码高亮 --></p>
<p class="demo">如果您觉得好用,别忘了推荐给朋友!</p>
<p>在线Html、CSS、JavaScript、XML、PHP代码高亮工具:http://www.zklhy.com/dmgl.html</p>

使用方法很简单,去点击这里获取到代码高亮的代码,在文本里面输入就好了

代码高亮工具

在导航栏上面的工具里面有代码高亮工具地址。