(1)先拖拽放大镜图标到编辑区,双击该图标,变成如下这样后复制它(相当于复制的是文字):
(2)粘贴到文本框的属性【提示文字】输入框里,再继续输入自己想要的提示文字,比如“搜索”,设置提示样式:
(3)可以看到编辑区内容变成了这样:
(4)在发布下拉菜单修改HTML配置:
为了确保以后用来查看线框图的电脑在断网的情况下同样可以正常查看,需要采用离线字体的方式完成HTML文件的生成。如下图所示,添加Web字体时,选择@font-face,并在具体参数处填写:
font-family: FontAwesome;
src:url('fontawesome-webfont.ttf') format(‘truetype’);
(5)然后将fontawesome-webfont.ttf字体库放入HTML文件所在的文件夹里面,打包发给别人,就可以实现电脑在未安装该字体甚至断网的情况下同样可以正常查看
补充:若对方电脑是联网状态(未安装fontawesome字体),还可以通过如下方法设置:
在web字体中,新增一个web字体的css样式
链接地址 http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css
即与上面3(4)不同的是选择【链接到".css"文件】再输入链接地址,而不是选择【@font-face】
* 功能: 创建一个可以让页面滚动到顶部的按钮, 常见于各种社交网站的微博列表.
* 备注: DOM被设置成了浮动的, 用户可以自己设定位置, 传入right, bottom参数即可
还可以配置滚到条到多高的时候会显示插件图标.
(function ($) {
$.fn.scrolltop = function (options) {
var opts = $.extend({}, $.fn.scrolltop.defaults, options);
var run2top = function () {
var scrollDist = $(window).scrollTop();
if (scrollDist > 0) {
scrollDist -= opts.topSpeed;
scrollDist = Math.max(scrollDist, 0);
$(window).scrollTop(scrollDist);
setTimeout(run2top, 1);
return this.each(function () {
var $this = $(this);
$this.css("opacity", "0.3");
$this.css("background", "url('u=4251301862,936291425&fm=214&gp=0.jpg') no-repeat");
$this.css("width", opts.width);
$this.css("height", opts.height);
$this.css("position", "fixed");
$this.css("right", opts.right);
$this.css("bottom", opts.bottom);
$this.hover(
function () {
$(this).css('opacity', '1.0');
function () {
$(this).css('opacity', '0.5');
$this.click(function () {
//$(window).scrollTop(0);
run2top();
$(window).scroll(function () {
var scrollDist = $(window).scrollTop();
if (scrollDist >= opts.heightThreshhold) { //当滚动条离顶部超过阈值的时候, 就显示
$this.css("display", "block");
} else {
$this.css("display", "none");
$.fn.scrolltop.defaults = {
heightThreshhold: 1000,
width: "50px",
height: "50px",
right: "8%",
bottom: "30px",
topSpeed: 50
})(jQuery);