可视化优站边栏悬浮窗代码_ Div+Css教程-查字典教程网
可视化优站边栏悬浮窗代码
可视化优站边栏悬浮窗代码
发布时间:2015-05-12 来源:查字典编辑
摘要:打开U站装修,自定义编辑器。可以看到有两个栏。一个是CSS的,另外一个是HTML的CSS编辑框,然后选择CSS代码编辑,接着把下面的CSS代...

 

  1. 打开U站装修,自定义编辑器。可以看到有两个栏。一个是CSS的,另外一个是HTML的

     

  2. CSS编辑框,然后选择CSS代码编辑,接着把下面的CSS代码修改好,复制粘贴到编辑框里面。需要注意的是下面的图片网址,需要自己下载下来按照自己需要修改

  3. CSS代码如下:

  4.                                                          .link-tit{color:#5E3500;overflow:hidden;font-weight:normal;padding-left:12px;height:27px;font-size:14px;line-height:27px;background-color:#F2F5E4;background-repeat:repeat-x;text-align:left;display:block;}.brand a:hover{background-color:#EC017B;color:#FFF;text-decoration:none;border:1px solid #F6D0B9;-webkit-border-radius:2px;border-radius:2px;}.brand{display:block;background-color:#FFF1D0;text-align:center;}.menu-cate li a{font-size:12px;line-height:30px;height:30px;display:block;color:#996A25;text-decoration:none;overflow:hidden;border-top:1px dashed #E7CD9E;width:132px;}.list li{list-style-type:none;}.menu-cate li a i{float:left;margin-top:6px;width:20px;height:18px;margin-right:10px;background-repeat:no-repeat;display:none;}ul.category li a{color:#644B4F;padding-left:0px;text-align:center;display:block;}.bt{width:137px;margin-left:2px;height:38px;cursor:default;background-image:url(http://img01.taobaocdn.com/imgextra/i1/730663373/T2.KN4XvBXXXXXXXXX-730663373.png);background-repeat:repeat;background-position:-5px -315px;}.STYLE2{color:#644B4F;}

  5. html编辑框,然后选择代码编辑,接着把下面的代码修改好,复制粘贴到编辑框里面。

  6. HTML代码如下:

    <div class="zdy_box4 cbu-iframe" style="width:137px;height:auto;z-index:10000000;top:100px;left:60px;padding-bottom:0px;color:#644B4F;font-size:12px;line-height:14px;">

    <ul style="margin-top:0px;margin-right:0px;margin-left:0px;margin-bottom:0px;padding-left:0px;list-style:none;">

    <li>

    <img height="59" src="http://img01.taobaocdn.com/imgextra/i1/730663373/T2MXx6XtdXXXXXXXXX-730663373.png" width="137" /></li>

    </ul>

    <div style="background-color:#FFF;">

    <h2>

    <a class="link-tit">快捷入口</a></h2>

    <ul class="menu-cate">

    <li class="brand">

    <a href="#">9块9包邮专区</a></li>

    <li class="brand">

    <a href="#">精品女装</a></li>

    <li class="brand">

    <a href="#" target="_self" title="">男装</a></li>

    <li class="brand">

    <a href="#">包包</a></li>

    <li class="brand">

    <a href="#">鞋子</a></li>

    <li class="brand">

    <a href="#">配饰</a></li>

    <li class="brand">

    <a href="#">美容</a></li>

    <li class="brand">

    <a href="#" target="_self" title="">婚礼</a></li>

    <li class="brand">

    <a href="#">家居</a></li>

    <li class="brand">

    <a href="#">美食</a></li>

    </ul>

    <h2>

    <a class="link-tit" href="#" style="color:#000;margin-bottom:8px;display:block;margin-top:8px;" target="_blank">我是商家[我要报名]</a></h2>

    <ul class="category">

    <li style="display:block;">

    <a href="#" target="_blank"><span>招商</span></a></li>

    <li style="margin-bottom:8px;display:block;margin-top:8px;">

    <a href="#" target="_blank"><span>帮派</span></a></li>

    </ul>

    客服&nbsp;<a href="#" target="_blank"><img alt="点击这里给我发消息" border="0" src="http://amos.alicdn.com/realonline.aw?v=2&amp;uid=tb056673_11&amp;site=cntaobao&amp;s=1&amp;charset=utf-8" /></a>

    <div class="love-site">

    <h2>

    &nbsp;</h2>

    <div align="center" class="dg-like-btn dg-like-site-btn sns-like sns-widget-ui simple-like" data-type="site">

    <div class="sns-like-wrap">

    <div align="center">

    <a class="dig-button" title="我的淘宝,大家一起赞!"> <span class="dig-icon"></span> <span class="dig-button-title">喜欢小站[立即收藏]</span> </a></div>

    <div class="hide">

    <div class="tip-content">

    &nbsp;</div>

    <s class="arrow"></s></div>

    </div>

    </div>

    <div align="center">

    <ul>

    <li style="display:block;">

    <a class="STYLE2" href="#" target="_blank">Ctrl+D</a></li>

    <li style="margin-top:8px;display:block;">

    <a class="STYLE2" href="#" target="_blank">收藏</a></li>

    <li style="margin-top:8px;">

    <a class="STYLE2" href="#">给我留言</a></li>

    </ul>

    </div>

    </div>

    <div class="bt">

    &nbsp;</div>

    </div>

    </div>

     

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类