可视化优站边栏悬浮窗代码

 

  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(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="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>

     

时间: 2024-10-30 18:55:36

可视化优站边栏悬浮窗代码的相关文章

Android实现桌面悬浮窗、蒙板效果实例代码

现在很多安全类的软件,比如360手机助手,百度手机助手等等,都有一个悬浮窗,可以飘浮在桌面上,方便用户使用一些常用的操作. 今天这篇文章,就是介绍如何实现桌面悬浮窗效果的. 首先,看一下效果图. 悬浮窗一共分为两个部分,一个是平常显示的小窗口,另外一个是点击小窗口显示出来的二级悬浮窗口. 首先,先看一下这个项目的目录结构. 最关键的就是红框内的四个类. 首先,FloatWindowService是一个后台的服务类,主要负责在后台不断的刷新桌面上的小悬浮窗口,否则会导致更换界面之后,悬浮窗口也会随

代码-网页QQ客服悬浮窗的安装方法,怎么操作

问题描述 网页QQ客服悬浮窗的安装方法,怎么操作 如题,网页QQ客服悬浮窗的安装方法步骤是什么谁能告诉我,谢谢 解决方案 http://blog.csdn.net/yangyuankp/article/details/7840784 解决方案二: http://www.codefans.net/jscss/code/2674.shtml 解决方案三: css position fixedhttp://www.w3school.com.cn/cssref/pr_class_position.asp

模仿美团点评的Android应用中价格和购买栏悬浮固定的效果_Android

随着移动互联网的快速发展,它已经和我们的生活息息相关了,在公交地铁里面都能看到很多人的人低头看着自己的手机屏幕,从此"低头族"一词就产生了,作为一名移动行业的开发人员,我自己也是一名"低头族",上下班时间在公交地铁上看看新闻来打发下时间,有时候也会看看那些受欢迎的App的一些界面效果,为什么人家的app那么受欢迎?跟用户体验跟UI设计也有直接的关系,最近在美团和大众点评的App看到如下效果,我感觉用户好,很人性化,所以自己也尝试着实现了下,接下来就讲解下实现思路!

Android学习教程之悬浮窗菜单制作(9)_Android

本文实例为大家分享了Android悬浮窗菜单的具体代码,供大家参考,具体内容如下 MainActivity.java代码: package siso.multilistview; import android.os.Build; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; public class MainActivity extends

Android实现App中导航Tab栏悬浮的功能_Android

首先是"饿了么"导航Tab栏悬浮的效果图. 大家可以看到上图中的"分类"."排序"."筛选"会悬浮在app的顶部,状态随着ScrollView(也可能不是ScrollView,在这里姑且把这滑动的UI控件当作ScrollView吧)的滚动而变化.像这种导航Tab栏悬浮的作用相信大家都能体会到,Tab栏不会随着ScrollView等的滚动而被滑出屏幕外,增加了与用户之间的交互性和方便性. 看到上面的效果,相信大家都跃跃欲试了,那

Android实现App中导航Tab栏悬浮的功能

首先是"饿了么"导航Tab栏悬浮的效果图. 大家可以看到上图中的"分类"."排序"."筛选"会悬浮在app的顶部,状态随着ScrollView(也可能不是ScrollView,在这里姑且把这滑动的UI控件当作ScrollView吧)的滚动而变化.像这种导航Tab栏悬浮的作用相信大家都能体会到,Tab栏不会随着ScrollView等的滚动而被滑出屏幕外,增加了与用户之间的交互性和方便性. 看到上面的效果,相信大家都跃跃欲试了,那

Android 悬浮窗权限各机型各系统适配大全(总结)

这篇博客主要介绍的是 Android 主流各种机型和各种版本的悬浮窗权限适配,但是由于碎片化的问题,所以在适配方面也无法做到完全的主流机型适配,这个需要大家的一起努力,这个博客的名字永远都是一个将来时. 悬浮窗适配 悬浮窗适配有两种方法:第一种是按照正规的流程,如果系统没有赋予 APP 弹出悬浮窗的权限,就先跳转到权限授权界面,等用户打开该权限之后,再去弹出悬浮窗,比如 QQ 等一些主流应用就是这么做得:第二种就是利用系统的漏洞,绕过权限的申请,简单粗暴,这种方法我不是特别建议,但是现在貌似有些

百度云管家悬浮窗怎么隐藏关闭

  1.登陆百度云管家 登陆百度云管家后,悬浮窗一般显示在右上角. 2.悬浮窗有什么用 悬浮窗就是百度云管家简化后的一个菜单功能栏,你可以把文件直接拖入悬浮窗上传到百度云. 3.悬浮窗怎么隐藏 方法一.右键单击悬浮窗界面,点击"隐藏悬浮窗" 方法二.在百度云管家主界面点击菜单,选择"隐藏悬浮窗" 4.其他说明 百度云管家安装完成后,软件默认设置的是开机后自动运行,这点可能对有的朋友不是很方便,你可以在菜单栏中依次点击设置,然后勾选掉开机时启动百度云管家即可!

Android桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

首先是一个小的悬浮窗显示的是当前使用了百分之多少的内存,点击一下小悬浮窗,就会弹出一个大的悬浮窗,可以一键加速.好,我们现在就来模拟实现一下类似的效果. 先谈一下基本的实现原理,这种桌面悬浮窗的效果很类似与Widget,但是它比Widget要灵活的多.主要是通过WindowManager这个类来实现的,调用这个类的addView方法用于添加一个悬浮窗,updateViewLayout方法用于更新悬浮窗的参数,removeView用于移除悬浮窗.其中悬浮窗的参数有必要详细说明一下. WindowM