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>

去掉HTML Img标签下的间距空白?img标签的间隙

今天在用img标签是时候突然发现的我问题 然后没解决 就去百度找了找发现很多方法都难以解决 最后黄天不负有心人

最后让我找到了align标签 下面的是align标签的值和描述:

AbsBottom 图像的下边缘与同一行中最大元素的下边缘对齐。
AbsMiddle 图像的中间与同一行中最大元素的中间对齐。
Baseline 图像的下边缘与第一行文本的下边缘对齐。
Bottom 图像的下边缘与第一行文本的下边缘对齐。
Left 图像沿网页的左边缘对齐,文字在图像右边换行。
Middle 图像的中间与第一行文本的下边缘对齐。
NotSet 未设定对齐方式。
Right 图像沿网页的右边缘对齐,文字在图像左边换行。
TextTop 图像的上边缘与同一行上最高文本的上边缘对齐。
Top 图像的上边缘与同一行上最高元素的上边缘对齐。

你们可以一一去试试 现在我就不做什么演示了  下面是代码:

<img src=”http://www.zklhy.com/wp-content/uploads/2016/04/140.jpg”  align=”absmiddle”  />

<div style=”margin:0;padding:0;border:1px solid blue;”>间隙何在</div>

表格标签 table标签 上下左右对齐

table标签对于网站来说还是经常用的一个标签 然而有时候就会遇到 不上不下 非要填充东西他才会动 所以很不爽 加上 valign=”top” 就可以顶部对齐 不过这个是适用于单个<td>标签 而除了可以顶部对齐以外还有 还可以加一个

align="left" 或者这些valign="bottom" align="right" 都是可以的 然后我刚才上班休闲了一下 做了一个简单的演示可以看下:
QQ截图20160408164333
然后源码是这样的:
<table width="445" height="283" border="1" bordercolor="#FF0000">
  <tr>
    <td valign="top" align="left"width="90" height="58">我是左上</td>
    <td valign="top" align="right"width="94" height="58">我是右上</td>
  </tr>
  <tr>
    <td valign="bottom" align="left"width="90" height="50">我是左下</td>
    <td valign="bottom" align="right"width="94" height="50">我是右下</td>
  </tr>
</table>

wordpress建设 检测当前页面使用的哪个模板 获取当前使用模板

wordpress建设 检测当前页面使用的哪个模板 获取当前使用模板

说实话这个真的很有用,特别是对于我这种懒人来说不喜欢记东西(其实是我记不住) 然后主题都是直接看到好就下下来直接改 然后遇到的主题多了 总有些无法理解的 真的是无法理解 不知道它弄的什么鬼  然后就用这个办法 一拿一个准  所以真的很好 好了废话这么多 直接开说把!

方法:

1.查找wordpress源文件:wp-includes\template-loader.php, 找到以下代码:

else :
$template = get_index_template();
endif;

2.在其下面添加以下代码:

if($_GET[tpl]=='die'){
die($template);
}

3.打开当前页面,在域名后面输入引号内的内容:“?tpl=die”,即可显示当前页面调用的模板文件,如图:

QQ截图20160408143752

wordpress根据分类别名(名称)获取分类链接和分类ID(或分类别名)

根据分类别名获取分类其它信息,可以通过使用 get_category_by_slug($slug)函数可以实现根据分类别名获取分类的相关数据数组,数组包含了分类ID、分类名称等数据,然后通过使用 get_category_link($category_id) 函数获取分类链接;根据分类名称获取分类ID,可以通过get_cat_ID($cat_name)函数获取

根据分类别名获取示例:

<?php  
    $cat=get_category_by_slug('wordpress'); //获取分类别名为 wordpress 的分类数据  
    $cat_links=get_category_link($cat->term_id); // 通过$cat数组里面的分类id获取分类链接      
?> 
<a href="<?php echo $cat_links; ?>" title="<?php echo $cat->name; ?>"><?php echo $cat->name; ?></a>

根据分类名称获取示例:

$cat_ID = get_cat_ID($cat_name);  // $cat_name为分类名称
$cat = get_category($cat_ID);
echo $cat->slug;
//echo $cat->name;获取分类名称

WordPress标题优化 Title标签

简单粗暴 直接放在header.php文件里面 找到title标签 修改成下面这样就可以

<title> 
   <?php 
         if (is_home()||is_search()) { bloginfo('name'); } 
         else{wp_title(''); echo ' | '; bloginfo('name');} 
    ?> 
 </title>

这样,文章所在页面标题的显示形式是:” 文章标题 | 站点标题 “了,如果你不想加 站点标题,可以在else后面只添加wp_title(”);代码,注意,不要漏掉括号里面的单引号,否则会在标题前面出现<<符号。

wordpress调用文章内容

wordpress调用文章内容 字数是可以变换的

<p><?php echo mb_strimwidth(strip_tags(apply_filters('the_excerpt', $post->post_content)), 0, 200,"..."); ?> </p>

纯属记录  最近在弄公司的网站 各种要求 我感觉还是把我弄过了的东西记下来 以后用的时候直接来自己的博客看 多爽!

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”

设置WordPress网站指定分类内容不在首页显示方法

在帮公司修改网站的时候需要用到的,记录下来以后肯定会用到的  所有还是记录下来

第一、修改functions.php修改

//在首页中排除某些分类
function exclude_category_home( $query ) {
if ( $query->is_home ) {
$query->set( ‘cat’, ‘-6, -6’ ); //你要排除的分类ID
}
return $query;
}
add_filter( ‘pre_get_posts’, ‘exclude_category_home’ );
?>

第一、修改index.php

<?php if ( have_posts() ) : query_posts($query_string .’&cat=-20,-22′);
while ( have_posts() ) : the_post(); ?>

 

纯手写 JQ+CSS 实现轮播图功能代码

javascript

1.HTML

 <div class="baner_box"> 
   <ul class="baner"> 
    <li><img src="https://icejane.b0.upaiyun.com/wp-content/uploads/2015/12/0b2397259b7580eaf4d5db98d3cd9386.jpg" /></li> 
    <li><img src="https://icejane.b0.upaiyun.com/wp-content/uploads/2015/12/2ea5cc3df71f7c1d1de200e1e8220638.jpeg" /></li> 
    <li><img src="https://icejane.b0.upaiyun.com/wp-content/uploads/2015/12/0b2397259b7580eaf4d5db98d3cd9386.jpg" /></li> 
    <li><img src="https://icejane.b0.upaiyun.com/wp-content/uploads/2015/12/2ea5cc3df71f7c1d1de200e1e8220638.jpeg" /></li> 
   </ul> 
   <ol></ol>
   <a class="left">&lt;</a> 
   <a class="right">&gt;</a> 
  </div>

2.CSS

*{padding:0;margin:0;list-style:none}
.baner_box{position:relative;width:1000px;height:300px;overflow:hidden;margin:200px auto 0}
.baner{height:300px;overflow:hidden;z-index:0;margin:0 auto 0;position:absolute}
.baner li{float:left;height:300px;z-index:0;text-align:center;position:relative;overflow:hidden}
.baner li img{width:100%;height:100%}
a{position:relative;top:120px;z-index:10;cursor:pointer;text-align:center;font-size:32px}
.left{float:left;width:30px;height:52px;line-height:52px;color:#fff;left:10px;background:rgba(0,0,0,.7)}
.right{float:right;width:30px;height:52px;line-height:52px;color:#fff;right:10px;background:rgba(0,0,0,.7)}
ol{position:relative;display:table;margin:0 auto 0;top:270px;z-index:10}
ol li{float:left;width:12px;height:12px;margin-left:5px;margin-right:5px;border-radius:50%;background:#ccc;cursor:pointer}
ol li.red{background:red}

3.JS

$(function() {
    var len = $(".baner li").index();
    var speed = 500; //animate time
    var setsed = 4300; //setInterval time
    var width = $(".baner_box").width(); //每次滚动距离
    var twidth = parseInt(width * (len + 1)); //baner总宽度设置	   	    	
    var set;

    //baner总宽度赋值	    	
    $(".baner").width(twidth);

    $(".baner li").width(width); //可以动态选择像li中添加宽度,根据父元素盒子的宽度
    //根据图片的index数,加载原点
    var olh = '<li></li>';

    for (var i = 0; i < (len + 1); i++) {
        $("ol").append(olh);
    }
    $("ol").find('li').first().addClass('red');

    //左滚动
    $(".left").on('click',
    function() {
        var pleft = parseInt($(".baner").css("left")) + width + 'px';
        var cpleft = '-' + parseInt(len * width) + 'px';
        var cleft = parseInt($(".baner").css("left"));
        var cindex = parseInt( - (cleft / width));

        if (cleft == 0) {
            $(".baner").stop().animate({
                left: cpleft
            },
            speed);
        } else {
            $(".baner").stop().animate({
                left: pleft
            },
            speed);
        }

        if (cindex == 0) {
            $("ol li").eq(len).addClass('red').siblings('li').removeClass('red');
        } else {
            $("ol li").eq(cindex - 1).addClass('red').siblings('li').removeClass('red');
        }
    });
    //右滚动
    $(".right").on('click',
    function() {

        var nleft = parseInt($(".baner").css("left")) - width + 'px';
        var npleft = parseInt( - width * len);
        var cleft = parseInt($(".baner").css("left"));
        var cindex = parseInt( - (cleft / width));

        if (cleft <= npleft) {
            $(".baner").stop().animate({
                left: 0
            },
            speed);
        } else {
            $(".baner").stop().animate({
                left: nleft
            },
            speed);
        }

        if (cindex == len) {
            $("ol li").eq(0).addClass('red').siblings('li').removeClass('red');
        } else {
            $("ol li").eq(cindex + 1).addClass('red').siblings('li').removeClass('red');
        }

    });
    //当前状态
    $("ol li").on('click',
    function() {
        var colindex = $(this).index();
        var collert = '-' + colindex * width;
        $(".baner").stop().animate({
            left: collert
        },
        speed);
        $(this).addClass('red').siblings('li').removeClass('red');
    });

    //定时器
    function seTime() {
        set = setInterval(function() {
            $(".right").click();
        },
        setsed);
    }
    //清除定时器
    $(".baner_box").hover(function() {
        clearInterval(set);
    },
    function() {
        seTime();
    });
    seTime();
});