css 步骤引导页面

Continue Read..

 1.

点击查看原图

html:

<div class="odContent">
    <ul class="tpinfo">
        <li class="active">
            <p>退票申请</p>
            <p>2016-11-2 08:45</p>
        </li>
        <li>
            <p>退票受理中</p>
            <p>2016-11-2 08:45</p>
        </li>
        <li>
            <p>退票完成</p>
            <p>2016-11-2 08:45</p>
        </li>
    </ul>
</div>
css:
.odContent .tpinfo{
    overflow: hidden;
    counter-reset:step;
}
.odContent .tpinfo li{
    width: 20%;
    text-align: center;
    clear:none;
    border-top:none;
    list-style-type: none;
    text-transform: uppercase;
    float: left;
    position: relative;
}
.odContent .tpinfo li:before {
    content: counter(step);
    counter-increment: step;
    width: 20px;
    line-height: 20px;
    display: block;
    font-size: 10px;
    color: #fff;
    background: #E8E8E8;
    border-radius: 3px;
    margin: 0 auto 5px auto;
}
/*progressbar connectors*/
.odContent .tpinfo li:after {
    content: '';
    width: 100%;
    height: 2px;
    background: #E8E8E8;
    position: absolute;
    left: -50%;
    top: 18px;
    z-index: -1; /*put it behind the numbers*/
}
.odContent .tpinfo li:first-child:after {
    /*connector not needed before the first step*/
    content: none;
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
.odContent .tpinfo li.active:before,  .odContent .tpinfo li.active:after{
    background: #0099FF;
    color: white;
}
.odContent .tpinfo li p{
    line-height:20px;
    font-size:14px;

}

2.

点击查看原图

html:

<div class="odContent">
                            <ul class="tpinfo">
                                <li class="box">
                                    <span class="big blue"><b class="small blue-inner"></b></span>
                                    <span class="step">退票申请</span>
                                    <span class="time">2016-11-02 08:45</span>
                                </li>
                                <hr class="line1 line-blue"/>
                                <li class="box middle">
                                    <span class="big blue"><b class="small blue-inner"></b></span>
                                    <span class="step">退票受理中</span>
                                    <span class="time">2016-11-02 08:50</span>
                                </li>
                                <hr class="line2 line-gray"/>
                                <li class="box">
                                    <span class="big gray"><b class="small gray-inner"></b></span>
                                    <span class="step">退票完成</span>
                                    <span class="time">2016-11-02 21:45</span>
                                </li>
                            </ul>
                        </div>
css:
.odContent .tpinfo{
    position: relative;
    height: 95px;
    /*border-bottom: 1px solid #DDDEE3;*/
    /*border-top: 1px solid #DDDEE3;*/
    /*background: #fff;*/
    box-sizing: border-box;
    margin-left:30px;
}
.odContent .tpinfo li{
    /*width: 20%;*/
    float:left;
    text-align:center;
    clear:none;
    border-top:none;
}
.odContent .tpinfo li .big {
    margin-top: 15px;
    display: inline-block;
    vertical-align: middle;
    width: 23px;
    height: 23px;
    line-height: 23px;
    border-radius: 50%;
    text-align: center; }
.odContent .tpinfo li .big .small {
    display: inline-block;
    vertical-align: middle;
    width: 9px;
    height: 9px;
    border-radius: 50%; }
.odContent .tpinfo li .gray {
    background: rgba(149, 152, 159, 0.2); }
.odContent .tpinfo li .gray .gray-inner {
    background: rgba(149, 152, 159, 0.9); }
.odContent .tpinfo li .blue {
    background: rgba(51, 149, 255, 0.2); }
.odContent .tpinfo li .blue .blue-inner {
    background: rgba(51, 149, 255, 0.6);
}
.odContent .tpinfo li .step {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: #777E8C; }
.odContent .tpinfo li .time {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    color: #777E8C; }
.odContent .tpinfo .middle {
    margin-left: 43px;
    margin-right: 44px; }
.odContent .tpinfo .line1 {
    width: 74px;
    border-top: 1px solid #DDDEE3;
    position: absolute;
    top: 35px;
    left:80px; }
.odContent .tpinfo .line2 {
    width: 74px;
    border-top: 1px solid #DDDEE3;
    position: absolute;
    top: 35px;
    left:227px; }
.odContent .tpinfo .line-blue {
    /*background: #3395FF; */
    border-top: 1px solid #3395FF;
}
.odContent .tpinfo .line-gray {
    /*background: #DDDEE3;*/
    border-top: 1px solid #DDDEE3;
}

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【html】扣今日头条顶部样式

Continue Read..

点击查看原图

 

 

 

 

<style>

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, a, code, em, img, q, small, strong, dd, dl, dt, li, ol, ul, fieldset, form, label, table, tbody, tr, th, td, input {

    margin: 0;

    padding: 0;

    border: 0;

}

#mohAhv.mohAhv-KmHmFr {

    display: block;

}

 

#mohAhv.mohAhv-KmHmFr{position:fixed;top:0;width:100%;height:50px;z-index:1400;background:rgba(0,0,0,.7);background-repeat:no-repeat;background-position:center bottom;background-size:100% 100%;color:#fff}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr{height:100px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr{height:150px}#mohAhv.mohAhv-KmHmFr .open,#mohAhv.mohAhv-KmHmFr .logo,#mohAhv.mohAhv-KmHmFr .close,#mohAhv.mohAhv-KmHmFr .banner-label{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}#mohAhv.mohAhv-KmHmFr .logo{height:30px;width:30px;left:15px;background:url(http://chexiaopang.qiniudn.com/144965254166.jpg) no-repeat;overflow:hidden;background-size:30px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo{height:60px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo{height:90px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo{width:60px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo{width:90px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo{left:30px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo{left:45px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo{background-size:60px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo{background-size:90px}#mohAhv.mohAhv-KmHmFr .logo .mask{height:20px;background:rgba(255,255,255,.6);width:0;margin-top:10px;margin-left:10px;-webkit-animation-delay:3s;-webkit-box-shadow:0 0 20px 4px #fff;-webkit-transform:rotate(15deg);-webkit-animation:ani-mask 1s;-webkit-animation-fill-mode:forwards;-webkit-animation-iteration-count:infinite}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo .mask{height:40px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo .mask{height:60px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo .mask{margin-top:20px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo .mask{margin-top:30px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .logo .mask{margin-left:20px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .logo .mask{margin-left:30px}#mohAhv.mohAhv-KmHmFr .banner-label{left:50px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .banner-label{left:100px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .banner-label{left:150px}#mohAhv.mohAhv-KmHmFr .banner-label p{color:#fff;font-size:12px;line-height:15px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .banner-label p{font-size:24px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .banner-label p{font-size:36px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .banner-label p{line-height:30px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .banner-label p{line-height:45px}#mohAhv.mohAhv-KmHmFr .banner-label .tb{font-size:15px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .banner-label .tb{font-size:30px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .banner-label .tb{font-size:45px}#mohAhv.mohAhv-KmHmFr .close{height:40px;width:20px;padding:5px;position:absolute;right:0;background:url(http://s2.pstatp.com/resource/growth_fe/toutiao_wap/static/image/banner_ic_close_d13c775.png) no-repeat center center;background-size:14px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .close{height:80px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .close{height:120px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .close{width:40px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .close{width:60px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .close{padding:10px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .close{padding:15px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .close{background-size:28px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .close{background-size:42px}#mohAhv.mohAhv-KmHmFr .open{right:40px;background:#ff424b;display:inline-block;width:60px;font-size:13px;line-height:30px;color:#fff;border-radius:6px;text-align:center}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .open{right:80px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .open{right:120px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .open{width:120px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .open{width:180px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .open{font-size:26px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .open{font-size:39px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .open{line-height:60px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .open{line-height:90px}#mohAhv.mohAhv-KmHmFr .has_top_banner{padding-top:50px}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .has_top_banner{padding-top:100px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .has_top_banner{padding-top:150px}#mohAhv.mohAhv-KmHmFr .has_top_banner .mohAhv-KmHmFr{display:block!important}#mohAhv.mohAhv-KmHmFr .app_download_tip{display:none;position:fixed;top:0;left:0;bottom:0;background:#fff;right:0;z-index:1000}#mohAhv.mohAhv-KmHmFr .app_download_tip img{display:block;margin:0 auto;width:270px;max-width:100%}[data-dpr="2"] #mohAhv.mohAhv-KmHmFr .app_download_tip img{width:540px}[data-dpr="3"] #mohAhv.mohAhv-KmHmFr .app_download_tip img{width:810px}#mohAhv.mohAhv-KmHmFr .has_app_download_tip .app_download_tip{display:block}

</style>

<script lang="JavaScript">

$("#mohAhv").hide();

</script>

<div id="mohAhv" class="mohAhv-KmHmFr">

<a href="javascript:void(0)" class="close"></a><a href="http://m.chexiaopang.com" target="_self" class="download vwo-top-banner" ga_category="top_banner" ga_label="" ga_event="click" rel="nofollow" data-position="top"><div class="logo"><div class="mask"></div></div><div class="banner-label"><p class="tb">车小胖</p><p>最大的二手车批发平台</p></div><div class="open">

立即打开

</div></a></div>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

css 网站底部定位(随内容区域高度而变化)

Continue Read..
1、<html>标签属性:min-height:100%;position:relative;
2、<footer>标签属性:position:absolute;bottom:0;

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【HTML】扣的弹窗居中广告

Continue Read..
<script type="text/javascript">
function insertBaPing(url, img, title) {
    document.write("<div id='baping' style='width:700px; height:400px; position:fixed; z-index:999;'>");
    document.write("<div style='text-align:right;'><a href='javascript:void(0);' onclick='closeba();'><img src='images/close.gif' alt='关闭' /></a></div>");
    document.write("<div><a href='" + url + "' target='_blank'><img src='" + img + "' alt='" + title + "' /></a></div></div>");
}
insertBaPing('http://www.xtfw.cn/zhuanti/2013/aipuHTML/', 'http://images.chufw.com/attachment/loupan/201506/25/201506250925415976.jpg', '爱普广场');function closeba(){document.getElementById('baping').style.display = 'none';}setTimeout('closeba()', 25000);
showid('baping');
function showid(idname){var isIE = (document.all) ? true : false;var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6);var newbox = document.getElementById(idname);newbox.style.zIndex = '9999';newbox.style.display = 'block';newbox.style.position = !isIE6 ? 'fixed':'absolute';newbox.style.top = newbox.style.left = '50%';newbox.style.marginTop = -newbox.offsetHeight / 2 + 18 + 'px';newbox.style.marginLeft = -newbox.offsetWidth / 2 + 'px';function newbox_iestyle(){newbox.style.marginTop = document.documentElement.scrollTop - newbox.offsetHeight / 2 + 18 + 'px';newbox.style.marginLeft = document.documentElement.scrollLeft - newbox.offsetWidth / 2 + 'px';};if (isIE6){newbox_iestyle();window.attachEvent('onscroll', function(){newbox_iestyle();})}};
</script>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【HTML】扣的滑动门

Continue Read..
<style>
    
.slideTxtBox_{ width:491px; text-align:left; height:256px; overflow:hidden ; }
.slideTxtBox_ .hd{ height:31px; line-height:31px;  padding:0 10px 0 20px;   position:relative; }
.slideTxtBox_ .hd ul{ float:left; position:absolute; left:20px; top:5px; height:31px;   }
.slideTxtBox_ .hd ul li{ float:left; width:82px; cursor:pointer; line-height:25px; text-align:center; font-size:14px; font-weight:bold  }
.slideTxtBox_ .hd ul li.on{ height:25px; line-height:25px; width:82px; background:url(http://www.hszh.net.cn/templets/images/tit_032.png);color:#fff;font-size:12px; font-weight: normal }
.slideTxtBox_ .bd ul{ padding:7px 10px;  zoom:1;   border-top:none;  }
.slideTxtBox_ .bd li{ height:30px; line-height:30px; padding-left:25px; }
.slideTxtBox_ .bd li .date{ float:right; color:#999;  }
/* 下面是前/后按钮代码,如果不需要删除即可 */
.slideTxtBox_ .arrow{  position:absolute; right:10px; top:0; }
.slideTxtBox_ .arrow a{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
cursor:pointer; background:url("http://www.hszh.net.cn/templets/images/arrow.png") 0 0 no-repeat; }
.slideTxtBox_ .arrow .next{ background-position:0 -50px;  }
.slideTxtBox_ .arrow .prevStop{ background-position:-60px 0; }
.slideTxtBox_ .arrow .nextStop{ background-position:-60px -50px; }
.slideTxtBox_ .hd li.on a{color:#fff}
</style>
                
                
                
<div class="slideTxtBox_ mt10">
            <div class="hd">
                <ul>
                <li><a  href="list.php?cid=16">公开课新闻</a></li>
                <li><a  href="list.php?cid=17">内训新闻</a></li>
                <li><a  href="list.php?cid=17">内训新闻</a></li>
                <li><a  href="list.php?cid=17">内训新闻</a></li>
                </ul>
            </div>
            <div class="bd">
                <ul>
                       <li><a    style="color:red;"  href="show.php?nid=1502" title="华商纵横第19届总经理高峰论坛开幕:电商的“边界”已找到,我们要做的只需练好内功" >华商纵横第19届总经理高峰论坛开幕</a></li>
                       <li><a    href="show.php?nid=1504" title="做好“表姐”才能管理好商品结构与互联网思维下的人资革命" >做好“表姐”才能管理好商品结构与</a></li>
                       <li><a    href="show.php?nid=1503" title="狼群战术开启便利店新时代与营销采购新思维" >狼群战术开启便利店新时代与营销采</a></li>
                       <li><a    href="show.php?nid=1348" title="【湖南公开课盛况】作为店长,你还处在劳模型阶段吗?OUT了,店长已进入教练模式了!" >【湖南公开课盛况】作为店长,你还</a></li>
               </ul>
                <ul>
                      <li><a    style="color:red;"  href="show.php?nid=1126" title="华商纵横能给您提供什么?" >华商纵横能给您提供什么?</a></li>
                      <li><a    href="show.php?nid=698" title="重磅推出环式内训——内训管家婆计划" >重磅推出环式内训——内训管家婆计</a></li>
                      <li><a    href="show.php?nid=569" title="知识接力,快人一步——汉商广场企业内训书写精彩" >知识接力,快人一步——汉商广场企</a></li>
                      <li><a    href="show.php?nid=512" title="内训风采:银泰百货新世纪之行" >内训风采:银泰百货新世纪之行</a></li>
              </ul>
                <ul>
                      <li><a    style="color:red;"  href="show.php?nid=1126" title="华商纵横能给您提供什么?" >华商纵横能给您提供什么?</a></li>
                      <li><a    href="show.php?nid=698" title="重磅推出环式内训——内训管家婆计划" >重磅推出环式内训——内训管家婆计</a></li>
                      <li><a    href="show.php?nid=569" title="知识接力,快人一步——汉商广场企业内训书写精彩" >知识接力,快人一步——汉商广场企</a></li>
                      <li><a    href="show.php?nid=512" title="内训风采:银泰百货新世纪之行" >内训风采:银泰百货新世纪之行</a></li>
              </ul>
                <ul>
                      <li><a    style="color:red;"  href="show.php?nid=1126" title="华商纵横能给您提供什么?" >华商纵横能给您提供什么?</a></li>
                      <li><a    href="show.php?nid=698" title="重磅推出环式内训——内训管家婆计划" >重磅推出环式内训——内训管家婆计</a></li>
                      <li><a    href="show.php?nid=569" title="知识接力,快人一步——汉商广场企业内训书写精彩" >知识接力,快人一步——汉商广场企</a></li>
                      <li><a    href="show.php?nid=512" title="内训风采:银泰百货新世纪之行" >内训风采:银泰百货新世纪之行</a></li>
              </ul>
            </div>
        </div>
<script id="jsID" type="text/javascript">
         var ary = location.href.split("&");
        jQuery(".slideTxtBox_").slide( { effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],pnLoop:ary[6] });
        </script>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【css】弹窗+居中跟随

Continue Read..
这个也是扣的别人的 以后方便自己用!

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【CSS】扣的别人网站的幻灯

Continue Read..

直接扣的别人的东西,不必要的 代码全部删掉了的  。。。方便以后自己用@!

 

有 2个 一个适合做新闻幻灯 一个适合做导航幻灯

 

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【CSS】修改file样式

Continue Read..
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>input file的另类做法</title> 
<style type="text/css"> 
<!-- 
* { font-size:12px} 
body { margin:0} 
.line { position:relative; float:left; padding:8px 0} 
.line span { float:left} 
input { border:1px solid #888; vertical-align:middle} 
.file { position:absolute; left:90px; top:8px; display:none;filter:alpha(opacity=0);opacity:0} 
.file1 { padding:2px 10px; display:block; float:left; background:#FF66CC; color:#fff; z-index:1; margin-left:5px; vertical-align:middle; cursor: pointer} 
.inputstyle { width:150px; border:1px solid #888; z-index:99} 
--> 
</style> 
</head> 
<body> 
<div class="line"> <span> 
<label>上传文件:</label> 
<input name="" type="text" id="viewfile" onmouseout="document.getElementById('upload').style.display='none';" class="inputstyle" /> 
</span> 
<label for="unload" onmouseover="document.getElementById('upload').style.display='block';" class="file1">浏览...</label> 
<input type="file" onchange="document.getElementById('viewfile').value=this.value;this.style.display='none';" class="file" id="upload" /> 
</div> 
</body> 
</html>

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

【Html】去除input file 虚框

Continue Read..
首先在 html代码中添加hidefocus="true"(这段代码是为了消除ie的虚线框,因为ie可能的bug,其实只要是出现了hidefocus这个属性就会起作用,即使属性值为“false”、“hidefocus”也是可以消除虚线框的),然后再在css里面设置outline:none;(兼容其他标准浏览器),即如下代码:
<input type="text" hidefocus="true" value="" / >

input:focus{outline:none;}



弄好之后  只想说一句 IE  法克

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权

css 样式兼容代码

Continue Read..

.typecbl input{margin-right:5px;*margin-right:3px;_margin-right:3px;}

 【注::不管是什么方法,书写的顺序都是firefox的写在前面,IE7的写在中间,IE6的写在最后面。】

或则用!important  区分。

 

浏览器/符号 IE6 IE7 FF(FireFox) 

*(星号)      √ √  × 

!important   × √  √ 

_(下划线)    √ ×  × 

 

*width:96px; /*IE6/7的属性*/

_width:96px;  /*ie6*/

width:96px\0; /*ie8*/

width:96px\9;  /*IE6/7/8的属性*/

 

margin-top:7px\9; /*ie8*/

*+margin-top:0px; /*ie7*/

 

 

注:IE都能识别*;标准浏览器(如FF)不能识别*; 

 

IE6能识别*,但不能识别 !important, 

IE7能识别*,也能识别!important; 

FF不能识别*,但能识别!important; 

所以标准的写法FF,IE7,IE6: 

color:#fff; *color:#000 !important; *color:#ff6600; 

firefox:白色,IE7:黑色,IE6:橙色 

 

另外再补充一个,下划线”_”, 

IE6支持下划线,IE7和firefox均不支持下划线。 

于是大家还可以这样来区分IE6,IE7,firefox 

: background:orange;*background:green;_background:blue; 

声明:此文系舞林cuznwww.wulinlw.org)原创稿件,转载请保留版权