axure学习之路.第三弹_html/css_WEB-ITnose

这次我做的是一个简单的web版的一个简单的qq登录页面。

不过在此之前，我想分享一下自己刚学到的一个小tip，很多同学很想抠网站上的原图，但一般情况下都难以实现，如果直接鼠标右键点击然后另存为的话，存下来的一般是该网页的html。

正确的步骤应该是这样的：

首先请打开谷歌浏览器（其他浏览器不敢保证），然后任意位置点击鼠标右键，再点击审查元素

将会出现这样一个界面，在这里面就可以看到该网页的css、html、前端代码、网页里的图片等

然后看到最上方最右边有一个“resources”，点击“resources”：

会出现一个frames的文件夹，点击该文件夹，下方就会出现images这一栏目，点击images:

然后这就是该网页里面所有出现过的图片了，直接双击，会跳转到另一个html，然后再这个html里面，就可以直接右键另存为了，如果没有反应，重复上述操作在做一遍即可。

那现在进入正题吧。

首先，先看下这次做出来是个什么样子的。

大概就是这样子的，一打开首先选中在QQ账号这一页面，左边是三种不同的账号注册方式，下面是QQ账号的搜索栏。右边就是各个页面的具体交互了。

这次的这个交互有三个地方给我造成了一定的困难，所以我就着重说说这三个地方。

●左边三个不同页面的切换以及切换前后图标颜色的变化。

●右边交互界面输入框颜色的变化以及焦点位置的变化。

●如何保持多个下拉列表框中具有联系的内容的对应性。

一：左边三个不同页面的切换以及切换前后图标颜色的变化。

首先，先说三个页面的不同切换。

这里最方便最高效的方法应该是用动态面板去做。

每个分页面直接放到动态面板的几个不同的状态里，然后添加动作，选中切换时点击的图标以及图标旁边的小图片，然后再设置动态面板状态，使当前按钮与所对应的页面相一致：

然后接下来的就是随着页面的切换左边三个图标的颜色也随之改变。

这个时候就需要用到图片属性里面的选中按钮了，点击选中，在image一栏导入在切换时你想要变换的图片：

这样就可以，在不被选中时还是原来的图片，在选中时就会显示你所导入的图片。

二：右边交互界面输入框颜色的变化以及焦点位置的变化。

其实这个输入框是由两部分组成：一个矩形和一个文本框

想要达到点击时获取焦点并且外边框变成蓝色，离开时外边框变成红色的效果，首先，在外边框属性栏里设置选中时和禁用时的变化效果，选中时外边框设置成红色，禁用时设置成蓝色：

选中时外边框设置成红色

禁用时外边框设置成蓝色

然后接下来就可以直接添加动作了，鼠标单击时：外边框禁用（颜色变蓝），显示输入框（因为输入框的颜色和矩形有所不同，避免色差，所以先隐藏起来了），输入框获取焦点；然后再设置输入框动作：获取到焦点时，设置未选中外边框，然后禁用外边框（从而真正达到变蓝效果），失去焦点时，启用并选中外边框，外边框变红。好了，这样一系列动作就完成了。

三：如何保持多个下拉列表框中具有联系的内容的对应性。

就拿后面两个下拉列表，即：省市和辖区为例。

如何做到一一对应呢，当然，我们可以对省市进行一一判断，如果省市是北京，那么调整辖区所在的动态面板（辖区需要设置动态面板），使北京对应到相应的动态面板的状态中去，但是一旦数据量大了，这样做会非常麻烦，要录入的东西太多。

所以得换一种方法。

直接设置动态面板（辖区）的状态，选择状态为value，设置一个局部变量，然后把省市的数据赋值给该局部变量，然后再把动态面板状态给定到该局部变量：

然后它就可以自动匹配不同下拉列表里面有对应关系的数据了。