制作左侧的广告栏

简介: 制作左侧的广告栏
  .leftloginbox{
    height: 320px;
    width: 127px;
    position: fixed;
    left: 10px;
    top:60%;
    .pic{
        // 如果不给背景图片宽高,背景图片可能显示不出来哦
        width: 127px;
        height:320px ;
        background:url("../imgs/left-banner-04.min.png") no-repeat;
    }
    // 制作一个小的关闭图标。
    .left-banner i {
        position: absolute;
        display: block;
        width: 10px;
        height: 10px;
        cursor: pointer;
        background-position: -59px -375px;
        top: 0px;
        left: 117px;
        z-index: 100;
    }
    }
<div class="leftloginbox"> // 最大的盒子
            <div class="pic">      //装图片和按钮
              <i class="close"></i>  //关闭按钮。
            </div>
    </div>
它的js代码时:给关闭按钮绑定一个点击的事件,然后让最外层的div吟唱起来就可以了。
       $(".close").on("click",function(){
           $(".leftloginbox").hide();
       })
相关文章
|
8月前
|
容器
uniapp中制作侧边导航栏
uniapp中制作侧边导航栏
555 0
|
3月前
|
前端开发
前端如何制作简易的菜单多级导航栏
前端如何制作简易的菜单多级导航栏
104 0
|
8月前
uniapp项目怎么删除顶部导航栏
uniapp项目怎么删除顶部导航栏
367 0
|
8月前
|
前端开发 JavaScript
uniapp联动左侧导航栏分类?
uniapp联动左侧导航栏分类?
|
8月前
|
前端开发 JavaScript
左侧导航菜单
左侧导航菜单
|
小程序 算法 Java
微信小程序制作顶部导航栏
微信小程序制作顶部导航栏
180 0
|
小程序 JavaScript 数据库
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
小程序分类页实现三级分类,顶部导航栏,左侧分类栏,右侧数据列表
220 0
|
自然语言处理 C++
制作有道词典——导航栏
制作有道词典——导航栏
|
前端开发 JavaScript 开发者
分类页-左侧栏 |学习笔记
快速学习 分类页-左侧栏
分类页-左侧栏 |学习笔记
|
前端开发 开发者 容器
页面-顶部通栏 |学习笔记
快速学习 页面-顶部通栏
211 0
页面-顶部通栏 |学习笔记