分类：技术

IP又变了，可以上facebook了，不过有些网站则不让上了

这面墙，不仅围住里面，也会阻止外面的进入。

2013年3月4日
慕课网js练习一

new document

2013年2月28日
向日葵远程控制：PC主控端远控

    向日葵远程控制是一款免费的面向企业和专业人员的远程PC管理和控制软件。在任何可链接互联网的地点，都可以通过PC主控端方式轻松控制和访问安装了向日葵被控端的远程主机。

     向日葵PC主控端是为便捷的批量远程主机而生，操作管理简单，具有超炫的界面效果和创新的多屏幕查看模式。

1.PC主控端介绍
     向日葵PC主控端具有简单易操作的特点，三种展示模式，可自由切换。

1.1.向日葵PC主控端登录
     向日葵主控端登录只需填写护照及密码即可。

图1.1向日葵主控端登录

1.2.向日葵主控端界面介绍
     登录后可直接进入向日葵主控端界面。如图所示。
     向日葵主控端界面简单易操作。主要包括远程控制、远程协助、屏幕查看、远程桌面、远程文件、命令行、添加主机七个部分。
图1.2向日葵主控端界面

1.3.展示模式
     向日葵主控端共有三种展示模式：普通模式、迷你模式、导航模式。点击面板右下角的模式切换图标，即可切换到不同的显示模式。如下图所示。
     普通模式，点击可切换到迷你模式。

图1.3.1普通模式

     迷你模式，点击后可切换到导航模式。

图1.3.2迷你模式

     导航模式，点击可切换到普通模式。

图1.3.3导航模式

2.PC主控端远程控制
     使用PC主控端如何实现远控控制呢？
2.1.登录远程主机
     向日葵PC主控端登录远程主机提供两种验证方式：windows验证和访问密码验证。
     注：访问密码是在被控端主机设置中的安全中进行设置的。

图2.1.1windows帐号登录

图2.1.2访问密码登录

     成功登录后，进入远程主机桌面，选择模式。如下图所示。

图2.1.3选择模式

     选择模式后，即可进入到远程主机桌面。
     注：控制模式可进入到远程主机桌面控制台，对远程主机进行管理操作。观看模式则只用于观看，不可进行远程操作。
2.2.远程控制
     在向日葵远程控制中可以看到远程主机名称、创建时间、标记、葵码、登录账户等信息。

图2.2.1远程控制

     右键点击远程主机，也可对远程主机进行远程桌面、远程文件、发送即时消息、屏幕查看、删除主机、查看主机属性等操作。

图2.2.2远程主机操作

2.3.远程桌面
     登录远程主机后即可进入到远程主机桌面，对远程主机进行管理操作。
图2.3远程桌面

2.4.远程文件
     通过向日葵远程文件可以方便的对远程主机文件进行传输和管理操作。支持断点续传，让远程文件和本地文件互相传输和同步。

图2.4远程文件

2.5.命令行
     使用向日葵远程控制的命令行功能，可以直接输入命令来查找原因，就跟在自己的电脑上进行操作一样。

图2.5命令行

2.6.添加主机
     向日葵远程控制支持批量添加主机，可以方便用户对远程主机进行批量监控与管理。

图2.6添加主机

3.PC主控端特色功能
3.1.远程协助
     向日葵远程控制也可以进行远程协作操作。只需主控端发一个链接，对方安装一个插件，待对方接受邀请后便可帮同事、朋友解决PC使用中所遇到的各类问题。具体操作步骤如下。
     在向日葵PC主控端上，点击远程协助。

图3.1.1选择远程协助

     右键单击远程协助主机，在属性中选择远程协助，复制URL链接地址发送给对方，或者求助者通过访问8005566.com输入葵码方式即可发起远程协助。

图3.1.2复制链接发起远程协助

     在对方电脑上，会显示需要安装浏览器插件的提示，点击在线安装。

图3.1.3在线安装插件

     下载安装文件。

图3.1.4下载安装文件

     运行安装文件，进入安装程序。

图3.1.5运行安装文件

     安装完成。

图3.1.6安装完成

     插件安装成功后，点击“请求协助”，等待对方接受。在此也可以添加附言。

图3.1.7请求协助

     对方收到远程协助请求，选择接受。

图3.1.8对方收到请求

     对方接受请求后即可进入远程桌面，开始控制对方电脑帮忙解决问题了。在远程桌面右侧也可以和对方聊天，发送文件。

图3.1.9进入远程桌面

3.2.多屏幕查看
     向日葵远程控制支持多屏幕查看功能，用户可以在同一桌面上实现对多个被控端的管理。

图3.2多屏幕查看

     更多向日葵详情请登录向日葵官网：http://www.oray.com/sunlogin
     向日葵被控端下载地址：http://www.oray.com/sunlogin/download_sunlogin.php
     向日葵主控端下载地址：http://www.oray.com/sunlogin/download_cclient_beta.php

2013年1月8日
设计师Oliver作品：创意涂鸦插画

设计师Oliver 创作出了自己的涂鸦作品，把简单的盘子加上一些创意可爱的插画后，就变得与众不同。

2012年12月26日
button,submit, image的区别点onclick后隐藏行

button,submit, image的区别点onclick后隐藏行

Posted on 2010-02-05 13:59 wj-conquer 阅读(142) 评论(0) 编辑收藏

<input type="button" name="Submit" value="显示表单button" onclick="showAddData()"/>

<input type="submit" name="Submit" value="显示表单submit" onclick="showAddData()"/>

<input type="image" alt="add" src="<%=request.getContextPath() %>/images/btnImg/btn_add.gif" onclick="showAddData()" />

如何让input type="image" onclick不提交

        function OpenEAView(itemId) {

            if (itemId.length != 0) {

                var pageEA = "MonthPlanItemExamineAndApprove.aspx?SessionKey=<%=this.SessionKey %>";

                var pageUrl = pageEA + "&ItemId=" + itemId + "&action=View";

                //var result =

                window.showModalDialog(pageUrl, null, features);

                //               if (result == 'Success') {

                //                    __doPostBack("", "");

                //                }

            }

             return false;//等于false 如果是提交1仍然会提交，必须加上Return

//1 提交：  <input type="image" onclick="OpenEAView('10021921')" />

//2 不提交：onclick="return OpenEAView('10021921');"

        }

——————————

1.  type="button" onclick=onclick="showAddData()"      不会提交页面，只对按钮有效.

2.  type="submit" onclick=onclick="showAddData()"      会提交页面

3.   type="image" onclick=onclick="showAddData()"      会提交页面

———————————

例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>关于“显示表单”与“关闭表单”的演示</title>

<script type="text/javascript">

function showform()

{

document.getElementById("lizi").style.display="block";

}

function closeform()

{

document.getElementById("lizi").style.display="none";

}

</script>

</head>

<body>

<form id="form2" name="form2" method="post" action="">

  <table width="98%" border="1" cellspacing="0" cellpadding="0" >

    <tr>

      <td height="68"><label>

        <input type="button" name="Submit" value="显示表单" onclick="showform()"/>

        <input type="button" name="Submit2" value="关闭表单" onclick="closeform()"/>

      </label></td>

    </tr>

    <tr>

      <td height="63">wwwwww</td>

    </tr>

    <tr id="lizi" style="display: none;">

      <td height="63"><input type="text" name="test" value="aaa" /></td>

    </tr>

  </table>

</form>

</body>

</html>

2012年12月5日
实现侧边栏/分栏高度自动相等-overflow：hidden

今天群有人说，侧边栏问题。然后突然想总结。各种搜索试验。不过还是很不明白那么大的数值正负，有知道跟分享下~

布局一律是这个

<div class="main">
    <div class="left"></div>
    <div class="right"></div>

</div>

有5种方法可以实现侧边栏高度自适应

1、采用背景图模拟2栏等高。父容器，main实现背景图垂直平铺填充模拟两栏等高。

但会增加一个额外的背景图片的HTTP请求，延缓页面的加载速度；同时也只有等到背景图被完全加载以后才会在视觉上实现“等高。若是布局两栏宽度改变，图片也要进行改变。

2、是采用超大的负值下外边距+下内填充的方法来实现，需要给父容器加一个overflow:hidden。

不好的地方在于，如果恰巧你的2栏被设置了边框，那你会损失掉下边框。

3、是采用display:table-cell的方式将需要等高的容器模拟成表格列，我们知道表格列是默认等高的。只是此属性IE7-不支持。

4、在父容器里面加上overflow:hidden;此清除方法强制使 .main了解列的结束位置，以便显示在 .container 中放置的任何边框或背景颜色。

5、使用min-height属性，IE6不支持min-height但是height会自动撑高，所以min-height + _height的组合也是常用手段之一。

其中第二种和第四种做了对比，第二种若是左右两栏的颜色一致，那么只需要overflow：hidden即可。在父容器设置背景色为同一颜色。若是左右两栏颜色不一致，可加上正负边距。（这个地方我不明白为什么要加上那么大的正负边距，且要超过你的最大网页分辨率）

说明：核心CSS代码部分的3000像素是个可变值，如果您的分栏高度不可能高度超过2000像素，您就可以设为2000像素，如果会超过3000像素，那么您要修改值为4000像素或是更高。
父标签的overflow:hidden属性是必须的，否则会显示溢出的内容

css：body为黑色，定义父容器为白色，左栏为灰色右栏为黄色以示区分。

.main{ width:1000px; background:#fff; margin:0 auto; padding:0;  }
.right{  width:700px; background:#ff0; float:left;}
.left{  width:300px; background:#ccc; }

图：好犬牙交错参差不齐啊~

css：

.main{ width:1000px; background:#fff; margin:0 auto; padding:0; overflow:hidden;  }
.right{  width:700px; background:#ff0; float:left;}
.left{  width:300px; background:#ccc; }

图：出现了main的背景色哟~ 背景色一致的时候推荐使用。

css：

.main{ width:1000px; background:#fff; margin:0 auto; padding:0; overflow:hidden;  }
.right{  width:700px; background:#ff0; float:left;margin-bottom:-3000px; padding-bottom:3000px;}
.left{  width:300px; background:#ccc;margin-bottom:-3000px; padding-bottom:3000px;}

图：短的那栏也在自己的颜色基础上对齐了~ 各栏目颜色不一致的时候使用~

2012年11月28日
生活中那些温馨的用户体验

大家可能记得前一阵，一对情侣在海底捞吵架，收到服务员温馨的卡片和黄玫瑰。你有这样的生活中美好的用户体验么？
一、【舒肤佳的肥皂】
很久很久以前，所有的肥皂都是方的，然后演变成了圆的。
肥皂遇水之后是很滑的。洗澡的时候，一不小心就掉地上了。有些就掉到了“坑里”……
舒肤佳的肥皂，设计成了细腰状的。这种设计，很容易就能握住肥皂，不易滑脱。

二、【西湖边的景观灯和音箱】
西湖边的景观灯都装在树上，草丛里。音箱主要在草丛里。
电线直接暴露在外面，很影响美观，而且又有触电的危险。于是，电线外部就包了一层皮。设计成藤蔓的形状。
音箱设计成了石头的形状。和景观融为一体。

三、【杭州外婆家餐饮】
外婆家吃饭，发现用了新的叫号系统。输入手机号码用餐人数，取号码纸，就可以去闲逛了。在还有两桌就轮到时，短信会发到手机上提醒可以去等候了。（据说，短信很温馨“ **号，外婆喊你吃饭了! ”）进去之后前一桌的人刚刚走，菜点完10分钟后就上齐了。这是多么可怕的一个效率啊。科学的叫号系统，严密的服务流程，一天至少可以多做两成生意。

四、【红绿灯】
以前的红绿灯都是圆的，三种颜色，红黄绿。不论红灯还是绿灯右拐都容易碰到行人，绿灯左拐弯会和对面直行的车辆交汇。现在大多数的红绿灯都改成箭头了，除了能不能走之外再多加了一个箭头表示通行方向。避免了许多交汇，提高了路口的交通安全度。

原文来自天猫衣吧官方团队www.tme8.com

2012年11月14日
当你的banner平铺还是不同色设计时，怎么切？

当你所切的网页类似于这种情况的时候，左侧有投影是深绿色，右侧是另一种颜色而且还是修饰过得形状。
中间网页部分宽度固定，两侧自适应浏览器宽度。
现在有个问题是一般两侧的纹络或者颜色一致，这样能直接设置背景色或者背景图片平铺。现在是两侧图片形状不一致，应该怎么切呢？

我个人的解决思路：
在整个网页容器切图按照常用规律切固定宽度（如红线显示），然后居中。头部和底部的自适应浏览器宽度用table（分为一行两列）加上绝对定位position:absoulute;用z-index为付，放在下面实现右50%是一种背景平铺，左50%为一种背景平铺。

总结：
1、利用table的百分比，分成一行两列，每个列为50%，实现在一行两列之内平铺不同背景宽度总和为100%。
2、利用定位和z-index放置在背景下面。

head html代码

<div class="head">

<table width="100%" border="0" >

<tr>

<td width="50%" class="bl"></td>

<td width="50%" class="br"></td>

</tr>

</table>

<div class="header"> <a href="#"><img src="images/logo.jpg" height="107" width="199" /></a>

<div class="hright">

<p class="mt p1">置业顾问：霍云兰　　　联系电话：15611111111　　　所在门店：海淀区南小庄</p>

<p class="p2">登录次数：19　　　　　累计下载：12 　　　　　　　暂存架：6<a href="#">去打包</a></p>

</div>

</div>

</div>

上面图片head例子css代码

.head{ width:100%; height:107px; }

.head table{z-index:-1; position:absolute; top:0; height:107px; left:0;}

.head .header{ width:1001px; margin:0 auto;color:#585f02; font-size:14px;}

.br{background:url(../images/desc_06.jpg) repeat-x; }

.bl{background:url(../images/headbg.jpg) repeat-x; }

html代码

<div class="foot mt2">

<table border="0" width="100%">

<tr>

<td width="50%" class="td_l"></td>

<td width="50%" class="td_r"></td>

</tr>

</table>

<div class="footer"> <a href="#"><img src="images/logo_b.jpg" height="38" width="152" /></a>

<div class="hright">版权所有安悦·家</div>

</div>

</div>

上面图片foot例子css

/*foot*/

.foot{ width:100%; height:38px; line-height:38px;}

.foot table{ position:absolute; z-index:-1; height:38px; left:0;}

.foot .td_l{ background:#014715;}

.foot .td_r{background:#c3d600;}

2012年10月31日
超过一行隐藏变省略号

今天有人问td 百分比内的内容，超出部分能变成省略号吗？她说知道div的固定宽度能隐藏变省略号。

之前我没有注意过这个问题。只记过divli什么的可以固定具体的宽度，变省略号。然后我百度了下，有用overflow:hidden; white-space:nowrap;在td百分比中隐藏的，之前我总结过一份文档里面的第79条是这个的。应该有些人在群里下载过吧，也许都没看过吧。好多都喜欢把所有人为或者别人认为好的东西装在自己的口袋里，却不加以利用，占用了口袋了，要是储存的过久坏了什么的就更不好了。

再多试一次你就会了，但是你就是不试，然后说，哎呀所有的样式都在行内的，还是麻烦，我又把他们调出来ok也是可以的。然后，举一反三。亲手尝试。行内样式，链接样式，嵌入式都ok，都试验了。

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />

<title>无标题文档</title>

<style type=”text/css”>

.a{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}

</style>

</head>

<body>

<table width=”100%” border=”1″ cellspacing=”0″ cellpadding=”0″ style=”table-layout:fixed”>

<tr>

    <td width=”20%”> </td>

    <td width=”60%” class=”a” >brbrblfbrgtrbtrfrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrblfbrgtrbtrfbrrbrb[d[v</td>

    <td width=”20%”> </td>

</tr>

</table>

</body>

</html>

overflow属性–原本是ie浏览器独自开发的属性，由于在css3中被采用，得到了其他浏览器的支持。

指定对于盒内容纳不下的内容显示的方法。

Overflow：hidden 对于超出容纳范围的文字会被隐藏。

Overflow：scroll div元素出现固定的水平滚动条与垂直滚动条

Overflow：auto 当文字超出是根据需要才会出现水平滚动条或者垂直滚动条

Overflow：visible  则显示效果与不使用overflow属性时一样

Overflow-x、Overflow-y可以单独指定水平方向上或者垂直方向上内容超出盒的容纳范围时的显示方法。出现滚动条。

Text-overflow：设置内容在水平方向出现省略号。（white-space：nowrap使得盒右端内容不能换行显示。）

.text{

width:200px;/*有宽度才有限制*/

overflow:hidden;/*多出来的隐藏*/

text-overflow:ellipsis;/*显示省略号*/

white-space:nowrap;/*不换行*/

-o-text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

-moz-text-overflow:ellipsis;

}

表格也显示

<div class=”text”>文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例</div>

3、某些模板的控制字符，超出显示省略号“…”

<!–%
For each Item In GCMS.Channels
GCMS.ContentID = Item.ContentID
%–>
<li class=”linea”><a href=”<!–%Response.Output GCMS.Content(“Url”)%–>” title=”<!–%Response.Output GCMS.Content(“Title”)%–>”><!–%Response.Output GCMS.ContentLenWithMark(“Title”,103,”…”)%–></a><span><!–%
‘时间
Response.Output FormatDateTime(GCMS.Content(“SubmitDate”),vbShortDate)
%–></span></li>
<!–%
Next
%–>

2012年10月17日
重新认识table
因为不了解table，就入主为先了，以为table不好用，后来发现是因为自己对于table里面的标签不熟悉的原因。特此一记。

HTML有10个表格相关标签。下面是一个带有简介的列表，但是首先，文档要被正确的定义在HTML 4.01/XHTML 1或HTML 5下面:
- <caption> 定义表格标题
- <col> 为表格的列定义属性
- <colgroup> 定义表格列的分组
- <table> 定义表格
- <tbody> 定义表格主体
- <td> 定义一个单元格
- <tfoot> 定义表格的表注(底部)
- <th> 定义表格的表头
- <thead> 定义表格的表头
- <tr> 定义表格的行
一个基本的表格结构如下:

它包含一个标题、头部、主体和底部。正确的HTML元素顺序是：
1. <table>
2. <caption>
3. <thead>
4. <tfoot>
5. <tbody>
你也可以使用<col>和<colgroup>来定义表格的列或为列分组：
1. <table>
2. <caption>
3. <colgroup>
4. <col>
5. <thead>
6. <tfoot>
7. <tbody>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>重新认识table</title>
<style>
body{font-size:14px;text-align:center; line-height:24px;}
.warp_tb{ border-collapse:collapse; width:550px; border-bottom:1px dashed #ccc; }
.warp_tb tr{ border-bottom:1px dashed #ccc;width:550px;}

.warp_table{ border-collapse:collapse; width:550px; border:1px solid #ddd; }
.warp_table td,.warp_table th,.warp_table tfoot,.warp_table thead,warp_table thead{border:1px solid #ddd;}

</style>
</head>

<body>
<table border="0" cellspacing="0" cellpadding="0" class="warp_tb">
  <tr>
   <th scope="col">姓名</th>
    <th scope="col">身高</th>
    <th scope="col">体重</th>
    <th scope="col">班级</th>
  </tr>
  <tr>
   <td>1.98</td>
    <td>1.98</td>
    <td>90kg</td>
    <td>三四</td>
  </tr>
  <tr>
   <td>1.98</td>
    <td>1.98</td>
    <td>90kg</td>
    <td>三四</td>
  </tr>
</table><br />
<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
  <tr>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
  </tr>
  <tr>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
  </tr>
  <tr>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
  </tr>
</table><br />

<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
  <tr>
    <th scope="row">姓名</th>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
  </tr>
  <tr>
    <th scope="row">性别</th>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
  </tr>
  <tr>
    <th scope="row">自我介绍</th>
    <td>没有特点的table</td>
    <td>没有特点的table</td>
  </tr>
</table><br />

<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
  <tr>
    <th scope="col">身高</th>
    <th scope="col">体重</th>
    <th scope="col">班级</th>
  </tr>
  <tr>
    <td>1.98</td>
    <td>90kg</td>
    <td>三四</td>
  </tr>
  <tr>
    <td>1.98</td>
    <td>90kg</td>
    <td>三四</td>
  </tr>
</table><br />

<table border="0" cellspacing="0" cellpadding="0" class="warp_table">
  <tr>
    <th scope="col">编号</th>
    <th scope="col">姓名</th>
    <th scope="col">学号</th>
  </tr>
  <tr>
    <th scope="row">1</th>
    <td>武清区</td>
    <td>223</td>
  </tr>
  <tr>
    <th scope="row">2</th>
    <td>刘易阳</td>
    <td>123</td>
  </tr>
</table><br />

<table border="0" cellspacing="0" cellpadding="0"  cla
ss="warp_table">
<caption>Table caption here</caption>
<colgroup span="1" style="background:#f5f5f5;"/>
<colgroup span="2" style="background:#EFEFEF;"/>

<!– Table Header–>
<thead>
<tr>
  <th>Head 1</th>
   <th>Head 2</th>
   <th>Head 3</th>
  </tr>
</thead>

<!– Table Footer–>
<tfoot>
  <tr>
   <td>Foot 1</td>
   <td>Foot 2</td>
   <td>Foot 3</td>
  </tr>
</tfoot>

<!– Table Body–>
<tbody>
  <tr>
   <td>A</td>
   <td>B</td>
   <td>C</td>
  </tr>
  <tr>
   <td>D</td>
   <td>E</td>
   <td>F</td>
  </tr>
</tbody>
</table>

</body>
</html>
2012年9月19日

分类： 技术

分类：技术