常用css模板

自定义滚动条

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>自定义滚动条</title>
<style type="text/css">
body,ul,dl,dd{ margin:0; padding:0; font-size:12px; font-family:'微软雅黑';}
.clear{ zoom:1}
.clear:after{ display:block; content:""; clear:both}
.box{margin:28px auto; width:164px; height:440px; background:#000; padding:8px;}
#wrap{ width:170px; height:386px; background:#1c1c1d; overflow:hidden; position:relative; }
#listbox{ float:left; width:160px; position:absolute; left:0; top:0; }
#scrollbox{ float:right; width:3px; height:386px; background: #333; position:relative;}
#scrollbar{ width:3px; height:30px; background:#cc3f2e; position:absolute; left:0; top:0;}

li{ height:80px; margin-bottom:8px; list-style:none;}
.picbox,.div{ float:left;}
.picbox{ width:150px; position:relative; }
.picbox span{ position:absolute; left:0px; bottom:0px; width:90px; height:22px;}
dl{ width:139px; height:76px; color:#fff; padding:4px 0 0 10px;line-height:18px; position:absolute;left:0; top:0; opacity:0.2; filter:alpha(opacity=20); }
.div{width:149px; height:80px; position:relative; }
.mark{width:149px; height:80px; position:absolute; top:0; left:0; background:#fff; opacity:0.1; filter:alpha(opacity=10);}

.nav{ width:160px; height:35px; font-family:'微软雅黑';background:#1c1c1d; padding-top:5px;}
.a,.b{ width:152px; height:24px; line-height:24px; background:#666; text-align:center; float:left; color:#fff; cursor:pointer}
.a{margin-right:5px; display:inline; background:#333; color:#666; }

li.active .mark{opacity:0.2; filter:alpha(opacity=20);}
li.active dl{ opacity:0.7; filter:alpha(opacity=70);}
</style>
</head>
<body>
  <div class="box">
    <div class="nav">
      <div class="a">猜你喜欢</div>
    </div>
    <div id="wrap">
      <ul id="listbox">
        <li class="active">
          <div class="picbox">
            <span class="a1"></span>
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
            <span class="a2"></span>
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
            <span class="a2"></span>
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
            <span></span>
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
        <li>
          <div class="picbox">
          </div>
          <div class="div">
            <div class="mark"></div>
            <dl class="textbox">
              <dt>飞狐外传</dt>
              <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
              <dd>史上身材最棒狐仙</dd>
            </dl>
          </div>
        </li>
      </ul>
      <div id="scrollbox">
        <div id="scrollbar"></div>
      </div>
    </div>
  </div>
</body>

<script>
    /**
 * javascript自定义滚动条(滚动条高度可以动态改变)
 * @param opts
 * 调用方式
 * new tinyScroll({
        wrapBox : document.getElementById('wrap'),
        wrapList : document.getElementById('listbox'),
        scrollBox :document.getElementById('scrollbox'),
        scrollBar : document.getElementById('scrollbar')
    })
 */
function tinyScroll(opts) {
    this.wrapBox = opts.wrapBox;
    this.wrapList = opts.wrapList;
    this.scrollBox = opts.scrollBox;
    this.scrollBar = opts.scrollBar;
    this.scale = 0;
    this.height = 0;
    this.maxTop = 0;
    this.ListMaxTop = 0;
    this.top = 0;

    this.bindEvent();
}
tinyScroll.prototype = {
    constructor: tinyScroll,
    init: function() {
        this.scale = this.wrapBox.clientHeight / this.wrapList.scrollHeight;
        if (this.scale > 1) this.scale = 1;
        this.height = this.scale * this.scrollBox.scrollHeight;
        this.maxTop = this.scrollBox.scrollHeight - this.height;
        this.ListMaxTop = this.wrapBox.clientHeight - this.wrapList.scrollHeight;
        if (this.scale == 1) this.scrollBox.style.display = 'none';
        this.scrollBar.style.height = this.height + 'px';
    },
    bindEvent: function() {
        var that = this;
        var mouseScroll = function(ev) {
            ev = ev || event;
            var fx = ev.wheelDelta || ev.detail;
            var bDown = true;
            if (ev.detail) {
                bDown = fx > 0 ? true: false;
            } else {
                bDown = fx > 0 ? false: true;
            }
            if (bDown) {
                that.top += 10;
            } else {
                that.top -= 10;
            }
            that.fnScroll();
            if (ev.preventDefault) {
                ev.preventDefault();
            }
            return false;
        };
        this.init();
        this.scrollBar.onmousedown = function(ev) {
            ev = ev || event;
            var disY = ev.clientY - this.offsetTop;
            document.onmousemove = function(ev) {
                ev = ev || event;
                that.top = ev.clientY - disY;
                that.fnScroll();
            };
            document.onmouseup = function() {
                document.onmouseup = document.onmousemove = null;
            };
            return false;
        };
        this.wrapBox.onmousewheel = mouseScroll;
        if (this.wrapList.addEventListener) {
            this.wrapList.addEventListener('DOMMouseScroll', mouseScroll, false);
        }
    },
    fnScroll: function() {
        if (this.top < 0) this.top = 0;
        if (this.top > this.maxTop) this.top = this.maxTop;
        var scale = this.top / this.maxTop;
        var listTop = scale * this.ListMaxTop;
        this.scrollBar.style.top = this.top + 'px';
        this.wrapList.style.top = listTop + 'px';
    }
};

    new tinyScroll({
        wrapBox : document.getElementById('wrap'),
        wrapList : document.getElementById('listbox'),
        scrollBox :document.getElementById('scrollbox'),
        scrollBar : document.getElementById('scrollbar')
    })
</script>
</html>

View Code

全屏背景

html { 
    background: url('images/bg.jpg') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

View Code

垂直居中内容

min-height: 6.5em;
display: table-cell;
vertical-align: middle;

View Code

@font-face，可以给页面自定义字体

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* Modern Browsers */
    url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
    url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
    
body {
    font-family: 'MyWebFont', Arial, sans-serif;
}

View Code

字符美化

.amp {
    font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
    font-style: italic;
    font-weight: normal;
}

View Code

段落首字母样式

p:first-letter{
    display: block;
    margin: 5px 0 0 5px;
    float: left;
    color: #ff3366;
    font-size: 5.4em;
    font-family: Georgia, Times New Roman, serif;
}

View Code

盒子模型内部阴影

-moz-box-shadow: inset 2px 0 4px #000;
-webkit-box-shadow: inset 2px 0 4px #000;
box-shadow: inset 2px 0 4px #000;

View Code

盒子模型外部阴影

#mydiv { 
    -webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    -moz-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
    box-shadow: 0 2px 2px -2px rgba(0, 0, 0, 0.52);
}

View Code

文本分成三列

text-align: justify;
-moz-column-count: 3;
-moz-column-gap: 12px;
-moz-column-rule: 1px solid #c4c8cc;
-webkit-column-count: 3;
-webkit-column-gap: 12px;
-webkit-column-rule: 1px solid #c4c8cc;

View Code

固定页脚

#footer {
    position: fixed;
    left: 0px;
    bottom: 0px;
    height: 30px;
    width: 100%;
    background: #444;
}
 
/* IE 6 */
* html #footer {
    position: absolute;
    top: expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

View Code

发光的input框

input[type=text], textarea {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none;
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid #ddd;
}
 
input[type=text]:focus, textarea:focus {
    box-shadow: 0 0 5px rgba(81, 203, 238, 1);
    padding: 3px 0px 3px 3px;
    margin: 5px 1px 3px 0px;
    border: 1px solid rgba(81, 203, 238, 1);
}

View Code

网页顶端阴影

body:before {
    content: "";
    position: fixed;
    top: -10px;
    left: 0;
    width: 100%;
    height: 10px;

    -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    box-shadow: 0px 0px 10px rgba(0,0,0,.8);
    z-index: 100;
}

View Code

对话气泡

.chat-bubble {
    background-color: #ededed;
    border: 2px solid #666;
    font-size: 35px;
    line-height: 1.3em;
    margin: 10px auto;
    padding: 10px;
    position: relative;
    text-align: center;
    width: 300px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px #888;
    font-family: 'Bangers', arial, serif; 
}
.chat-bubble-arrow-border {
    border-color: #666 transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -42px;
    left: 30px;
}
.chat-bubble-arrow {
    border-color: #ededed transparent transparent transparent;
    border-style: solid;
    border-width: 20px;
    height: 0;
    width: 0;
    position: absolute;
    bottom: -39px;
    left: 30px;
}

View Code

页面卷曲的效果

ul.box {
    position: relative;
    z-index: 1; /* prevent shadows falling behind containers with backgrounds */
    overflow: hidden;
    list-style: none;
    margin: 0;
    padding: 0; 
}

ul.box li {
    position: relative;
    float: left;
    width: 250px;
    height: 150px;
    padding: 0;
    border: 1px solid #efefef;
    margin: 0 30px 30px 0;
    background: #fff;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
}

ul.box li:before,
ul.box li:after {
    content: '';
    z-index: -1;
    position: absolute;
    left: 10px;
    bottom: 10px;
    width: 70%;
    max-width: 300px; /* avoid rotation causing ugly appearance at large container widths */
    max-height: 100px;
    height: 55%;
    -webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    -webkit-transform: skew(-15deg) rotate(-6deg);
    -moz-transform: skew(-15deg) rotate(-6deg);
    -ms-transform: skew(-15deg) rotate(-6deg);
    -o-transform: skew(-15deg) rotate(-6deg);
    transform: skew(-15deg) rotate(-6deg); 
}

ul.box li:after {
    left: auto;
    right: 10px;
    -webkit-transform: skew(15deg) rotate(6deg);
    -moz-transform: skew(15deg) rotate(6deg);
    -ms-transform: skew(15deg) rotate(6deg);
    -o-transform: skew(15deg) rotate(6deg);
    transform: skew(15deg) rotate(6deg); 
}

View Code

css展示横条

.featureBanner {
    position: relative;
    margin: 20px
}
.featureBanner:before {
    content: "Featured";
    position: absolute;
    top: 5px;
    left: -8px;
    padding-right: 10px;
    color: #232323;
    font-weight: bold;
    height: 0px;
    border: 15px solid #ffa200;
    border-right-color: transparent;
    line-height: 0px;
    box-shadow: -0px 5px 5px -5px #000;
    z-index: 1;
}
.featureBanner:after {
    content: "";
    position: absolute;
    top: 35px;
    left: -8px;
    border: 4px solid #89540c;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

View Code

posted @ 2018-09-06 20:33 玲珑塔阅读(565) 评论(0) 编辑收藏举报

刷新页面返回顶部

玲珑塔

每一个不曾起舞的日子，都是对生命的辜负。

常用css模板

公告