当前位置:Gxlcms > html代码 > axure学习之路.第三弹_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:13人阅读

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

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

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

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

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

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

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

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

那现在进入正题吧。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

选中时外边框设置成红色

禁用时外边框设置成蓝色

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

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

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

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

所以得换一种方法。

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

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

人气教程排行