舞林cuzn blog

css 步骤引导页面

作者：sarah【2016-12-7】
分类：css
847 views
0 条评论

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;
}

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：cuzn【2016-3-25】
分类：css
1090 views
0 条评论
标签: css

<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>

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

</script>

<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>

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：sarah【2015-10-12】
分类：css
1008 views
0 条评论

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

【HTML】扣的弹窗居中广告

Continue Read..

作者：cuzn【2015-6-26】
分类：css
1175 views
0 条评论
标签: css html

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');

</script>

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

【HTML】扣的滑动门

Continue Read..

作者：cuzn【2015-6-26】
分类：css
1228 views
0 条评论
标签: css html

<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>

<ul>

<li><a href="list.php?cid=16">公开课新闻</a></li>

</ul>

</div>

<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>

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>

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

【css】弹窗+居中跟随

Continue Read..

作者：cuzn【2015-6-26】
分类：css
1244 views
0 条评论
标签: html

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

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

Continue Read..

作者：cuzn【2015-6-26】
分类：css
1055 views
0 条评论
标签: css

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

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

【CSS】修改file样式

Continue Read..

作者：cuzn【2015-5-14】
分类：css
1174 views
0 条评论
标签: css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>input file的另类做法</title>

<!--

* { 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>

</span>

</div>

</body>

</html>

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

【Html】去除input file 虚框

Continue Read..

作者：cuzn【2015-5-4】
分类：css
1322 views
0 条评论
标签: html

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

input:focus{outline:none;}

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

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

css 样式兼容代码

Continue Read..

作者：sarah【2013-11-29】
分类：css
1522 views
0 条评论

.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;

声明：此文系舞林cuzn（www.wulinlw.org）原创稿件，转载请保留版权

舞林cuzn blog舞林cuzn blog

css 步骤引导页面

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

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

【HTML】扣的弹窗居中广告

【HTML】扣的滑动门

【css】弹窗+居中跟随

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

【CSS】修改file样式

【Html】去除input file 虚框

css 样式兼容代码

Hot Posts 热门文章

Lastest Posts 最新日志

Random Posts 随机文章

搜索

分类

日历

存档

最新评论

链接