码迷,mamicode.com
首页 > 其他好文 > 详细

有用的前端demo

时间:2016-04-21 20:12:40      阅读:136      评论:0      收藏:0      [点我收藏+]

标签:

1.给li a加一个gif new ico图标

技术分享

<style type="text/css"> 
.icon{position:absolute;top:20px;right: 588px;line-height:15px;}
</style>

<li>
       <a href="http://doc.idouly.com/" target="_blank">开发手册</a>
      <em class="icon"><img src="http://7xp0e8.com1.z0.glb.clouddn.com/new.gif"></em>

</li>

 

2.js定时器循环切换字体和背景颜色

<script type="text/javascript">
        var flashId = 0;
        setInterval(function(){
        if(flashId++ == 1) {
        flashId = 0;
        $(#title).css({color: white});
        $(#add).removeClass(add-red).addClass(add-green);
        }else{
        $(#title).css({color: red});
        $(#add).removeClass(add-green).addClass(add-red);
        }
        }, 500);
</script>

<ul class="header">
    <li class="left white" id="title"><h1>2016微信最火账号曝光</h1></li>
    <li class="right"><span id="add" class="add-green" style="width:80px;margin-right:-45px;" >+免费加入</span></li>
</ul>

 

固定在页面底部的button

<div class="msg" style="margin-top:10px;">
	<div class="weui_msg">
        <div class="btn-wrap">
            <div class="btn-return">查看排行</div>
        </div>
	</div>
</div>
<style>
.btn-wrap {
    position: fixed;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-color: rgba(0,0,0,.7);
    max-width: 640px;
}
.btn-return {
    height: 30px;
    line-height: 30px;
    width: 100px;
    background: #fff;
    color: #528C10;
    border-radius: 10px;
    text-align: center;
    margin: 0 auto;
    margin-top: 10px;
}

  




 

有用的前端demo

标签:

原文地址:http://www.cnblogs.com/zhoumeng780/p/5105245.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!