页面分为三部分,顶部,左边和右边。其中点击左边的超链接,右边的框架页面会相应变化。...5、如何在子页面中获取父页面所在的frameset中的其它的frame中的元素?...taskCreat").attr("class","list-group-item"); 6、frameset 的优缺点 我们知道,目前的 HTML5 标准已经不支持 frameset 了,虽然使用它重载页面时不需要重载整个页面...,只需要重载页面中的一个框架页(减少了数据的传输,加快了网页下载速度)。...但是它也有很多缺点,比如浏览器的后退按钮是没用的;会产生很多页面,不易管理;代码复杂,不易被搜索引擎搜索;小型移动设备显示不全;多框架的页面会增加服务器 http 请求等等。
对于单张页面上的信息排布和节奏并没有太多的感知,只是不知道的时候看看竞品,然后抄抄改改。虽然最后开发出来并没有问题但是总觉得自己没有提高。...现在在部门老大和导师的强行带飞下,发现原来单张页面的信息(框架层)是可以梳理的很清楚,并不断打磨的。...现在归纳一下页面信息设计方法: 1、这个页面要传达什么概念,需要包含什么信息 2、这些信息能被整合成几个大部分,每个部分传递了什么概念 3、这些大部分在页面应该以什么顺序排列才能让用户更好的理解页面想要传达的信息...4、每一个大部分能被分成几个小部分,每个小部分能让用户传递了什么概念 5、这些小部分在页面应该以什么顺序排列才能让用户更好的理解大部分想要传达的信息 6、让自己成为一个一无所知的用户,看进入这个页面后能获得什么信息...,这些信息是不是当时设计时想要传达的 举个例子(还可以继续拆分) 支付宝乘车码 感觉自己每天都在被带飞,每天都有新收获,开心~
一、效果图 image.png image.png image.png 二、前端页面 1、商品列表: reserveCommodityOnShelfList.jsp 2、结算弹出框:reserveCommodityPayForm.jsp <%@ page contentType="text/html;charset=UTF-8" language="<em>java</em>...$("#contentTable tbody tr button").each(function () { $(this).removeAttr("disabled");//页面刷新将所有的
这是一个基于BS的页面设计器,通过拖拽和配置就可以实现增删查改功能,适合于各种专注业务的应用场景。配一配程序就开发完了,看图: 页面设计器 原文地址
本来没有想到会有2的,结果最近的活动让我有了一些新的思考,就赶快梳理一下~ 页面思考信息1主要梳理的是面对一堆信息时如何通过不断的划分后优雅地展示,然而如果信息量本来就超出了用户能够理解的范围该怎么办?...选所在区域 3、公益捐赠 捐赠条件: 当日步数达到1000步时贡献步数即可捐赠0.1元 以下是实际沟通的流程: 1、分析需求 虽然这三个奖励的获得都能通过“贡献步数”这个动作获得,但是这3个事情要在一个活动页面中让用户短时间内理解清楚并不是一件简单的事...4、制作原型 总结 作为交互设计师,接到需求时其实是可以有所控制的,包括信息量、信息之间的关联程度、用户的理解成本等。
在前面的技术文章中已经很系统的介绍了UI自动化测试的技术栈的知识体系,但是在维护的成本而言还是需要考虑进一步的优化,那么我们可以使用页面对象设计模式,它的优势具体可以总结为如下: 创建可以跨多个测试用例共享的代码...减少重复代码的数量 如果用户界面发生了维护,我们只需要维护一个地方,这样修改以及维护的成本相对而言是比较高的 目录结构设计 下面我们具体针对这部分的目录进行设计,具体的目录结构为: 下面我详细的解释下每个目录的是干什么的...下存放的主要是工具类的代码,比如针对JSON文件,YAML文件的处理 common下主要存放的是公共类的代码,比如文件目录的处理 data主要存放测试过程中使用到的数据 report主要存储的是测试报告这部分 页面对象设计模式...上面已经很详细的解释了页面对象设计模式它的优势,以及目录结构的设计,下面依次来实现各个部分的代码。...': '/Library/Java/JavaVirtualMachines/jdk1.8.0_241.jdk/Contents/Home', 'WORKSPACE': '/Users/liwangping
article/details/71750893 背景: 每个网站开发中,多多少少会需要一些默认的配置项,相对而言一条条的手动添加是极为繁琐的,要分类各种图片、文字、文件、单选、多选按钮等,在此提供一种设计思路...一.数据库设计 1.数据库设计截图 ?...二.前端设计 1.添加页面展示 ? ? 2.核心代码参考 ?...三.后台代码设计 1.ConfigController.class.php 代码 private $confModel; public function __construct() {...五.附录 1.补录 可建议自行添加配置项排序功能 如果时间允许,建议将不同类型的配置项进行剥离处理,方便统一页面设计,美观适用性增强。 2.源代码下载 >>>
每一个网站都必须有404页面,404页面指的是显示网站错误链接的页面,可能是该访问的页面不存在,也可能是页面已经被删除。...设计404页面 Jacob Nielsen在十大可用性设计原则中曾提到: 帮助用户识别、诊断错误,以及解决错误:错误信息应以简单平实的语言(无代码语言)来表示,准确指出问题,并建设性地提出解决方案。...践行这个原则可以考虑到以下几点: 404页面的设计一定要与网站风格一致,不然会让用户感觉进入另一个网站,会立马关闭网页。...可以使用简洁明了的幽默文字或者动画,趣味性的引导用户返回上一级或者进入网站首页和其他页面。 不能直接把404页面指向首页,这种很容易让搜索引擎误认为多个重复页面,不利于优化。...---- 其实,404页面出现主要原因是无法满足用户的需求,用户无法得到自己所想要的东西而出现了404页面,所以404页面是一个值得重视的页面,不仅需要为每一个网站设置404页面,并且在其页面中要表达出对用户的歉意
一、功能测试用例设计: 1、正常登录场景 测试用例1:输入正确的用户名和密码,验证用户能否成功登录并跳转到主页面。...3、响应时间测试 测试用例12:测量从用户输入用户名密码到成功登录页面加载完成的时间,确认是否满足性能要求。...四、兼容性测试用例设计: 1、跨浏览器兼容性 测试用例18:在主流的浏览器(如Chrome、Firefox、Safari、Edge等)中进行登录操作,验证页面布局、功能及表现一致性。...测试用例21:测试横竖屏切换时,登录页面元素的位置调整和功能正确性。...十九、用户权限管理测试用例设计: 测试用例46:对于拥有不同角色和权限级别的用户,在登录后验证其能否访问对应的权限资源,以及对无权访问的页面或功能是否进行了有效拦截和提示。
页标题的设计 图一中的页标题设计非常经典:公司logo+竖线+报告名称。字体/字号/颜色的变化显得很活泼,同时采用深色主题色反衬以达到醒目的效果。...图一 第一届Power BI可视化大赛获奖作品—Project Progress Tracking System 图二的页标题设计与图一类似,但行宽字体都要大号一些,所以页标题行成为这个页面的强调重点。...背景色的设计 通常黑色系的背景会让报告显得很高端,很专业,如图一。但这绝不是简单随意的选个纯黑就可以了,不信你试试,一个随意的纯黑背景照样会很LOW。...图表元素越少越好 这里的图表元素是指网格线,边框,数据标签,甚至坐标轴,如果可以不用就不用,当然前提是不影响信息传递,如果非要用可以把颜色调的浅淡一些,这样整个页面会显得很简洁进而进一步突出重点。...创建导航页 相对于直接进入报告页,并利用页标签切换,创建导航页进行页面切换要专业美观很多,如图四、图五。
表单中的一切元素均左对齐 尽管新的设计占据了更多的垂直空间,但是标签/字段组却显得更加清晰。用户能够直接自上而下地扫视信息,而不必从左到右再循环往复。...预填充关联字段 一些细节记录页面都包含「发布器/publisher」,允许用户快速记录号码或创建新任务/活动。比如下面这张表单: ? 通过发布器记录号码 ?...为了解决这个问题,我们设计了一种折衷方案:系统会根据上下文预先填充某些关键信息。这样做就能够扫除填写表单时的潜在障碍,因为用户需要填写的字段从4个变成了2个。...键盘友好型&易用性 全新的 Lightning Experience 设计初衷就是更加容易使用。用户只使用键盘,就能够进行编辑和更改任何字段。
页面重构中的设计模式 由 Ghostzhang 发表于 2014-07-02 02:40 查了下最开始的创建日期,竟然是2011年12月19日,这文章断断续续写了快3年,终于了算比较完整了,但可能相对还是写得有些简单了...本地下载PDF 页面重构中的设计模式 from Ghost Zhang 以前写过的系列文章《 前言——页面重构中的设计模式 》,可以帮助理解,但需要注意的是,因为这期间有些想法上的变法,可能一些细节会不太一样
分析设计: 背景和要求都介绍清楚了,下面我们来分析一个这个页面, 刚刚拿到这个页面设计图的时候真的是一脸懵逼,多个表格嵌套还不算难,但是点击表格中编辑操作在此条记录下显示编辑的表单,这个要怎么实现.因为每条记录都是用...当时我的内心是一万个拒绝的.但是,但是,但是.....我没有当面拒绝而是先默不作声,会后再下去搜索资料,分析方案.虽然产品的要求很奇葩,而且这样设计也可能有很大风险,比如,页面逻辑不清,操作复杂,用户不会操作...接下来开始设计数据结构,别慌在这之前我想先谈一下前端数据驱动的页面设计 数据驱动: 关于数据驱动有的人解释为:当数据发生变化的时候,用户界面发生相应的变化,开发者不需要手动的去修改dom 相比以往jquery...那种拿到数据后再使用选择器,操作dom的方法渲染页面,数据驱动有很好的扩展性和效率,要想改变页面,直接操作数据,多一条,少一条都可以直接在页面上反应出来.这也是得益于目前前端框架的飞速发展.这种数据驱动的方法解放了前端开发人员的双手...数据结构: 根据分析我设计的页面的大致数据结构为 const FAList = [] // FA表单列表对象 const TATable = [ { // 正常tr对象 formItem:
前端的中后台管理系统相比于其他普通项目,从开发设计的角度来说有几点比较特殊: 一个是权限设计,具体实现可参考:传送门。 一个是页面布局的设计,也是本文要说的。...一个好的页面布局设计,无论是对于页面结构的稳定性,还是功能拓展的方便性,亦或是用户体验上,都有着重要的作用。 一、市面参考 先来看看市面上的一些优秀的开源系统项目的页面布局。...文本就围绕这种布局结构来设计。...三、css布局 良好的css布局代码才能保证页面布局的稳定性。 而对于整体布局来说,flex是首选,稳定性更好,不兼容ie9。...height: 100%; overflow: auto; padding: 15px; // 内容区域可以在这里统一设置下边距 } } c-PageLayout-index 页面整体容器
java代码 public String getAllForum(){ List forumEntity=forumService.getAllAppForum...forumEntity); System.out.println(json); return "flightHandler("+json+")";//跨域请求 } HTML页面
http://www.open-open.com/jsoup/parsing-a-document.htm jsoup: Java HTML Parser jsoup is a Java library
因为是静态化的网站,所有文章都是静态html页面。所以首先想到的就是直接js获取访问者ip然后再判断是否在白名单内,不在白名单内就到没有权限页面。...最后还是觉得用Java来实现比较好吧,前端文章页写个ajax,每次进入文章先判断文章是否需要限制IP访问,如果需要就请求下后端,后端获取Ip判断是否在白名单内。注意ajax要用同步。...Java获取访问者Ip方法: String ip = request.getHeader("x-forwarded-for"); if (ip == null || ip.length
</LinearLayout </LinearLayout 真个页面最大的难点就是这个自定义的布局文件:ScrollViewContainer 不过非常爽的就是大家不用自己写,直接从demo
Elementor是一款非常流行的WordPress页面设计插件,它可以帮助用户轻松地创建漂亮的网站页面。在本教程中,我们将介绍如何使用Elementor来设计一个页面。...第三步:选择一个模板 在Elementor页面编辑器中,您可以选择一个模板来开始设计您的页面。Elementor提供了许多预制模板,您可以选择一个适合您的网站的模板。...第五步:保存页面 完成页面设计后,您需要保存页面。您可以点击页面编辑器右上角的“更新”按钮来保存页面。如果您想预览页面,可以点击“预览”按钮。 第六步:发布页面 最后,您需要将页面发布到您的网站上。...您可以点击页面编辑器右上角的“发布”按钮来发布页面。一旦页面发布成功,您可以在网站上查看它。 总结 Elementor是一个非常强大的页面设计插件,它可以帮助您轻松地创建漂亮的网站页面。...在本教程中,我们介绍了如何使用Elementor来设计一个页面。希望这个教程对您有所帮助。
功能要求 1.页面具有标题 2.具有四个页面,页面具有底部选择框,同时具有选择事件,当点击选择事件的时候进行页面切换 3.页面内容不超出边界且清晰 思路分析 该微信界面由三部分组成 页面顶部标题栏(top.xml... 中间内容页面:由于本app是仿微信界面,所以设置了四个页面,分别显示不同的内容 底部导航栏:四个图标,单击可以切换中间内容页面,故该布局文件中包含四个ImageButton,界面切换部分需要用...Fragment实现 设计过程 1.资源文件导入 把图片等资源文件导入到/app/res/drawble 目录下 2.布局设计 此仿微信界面分为三部分,标题栏,中间内容页面,底部栏,故分部分进行设计...3.java文件编写 由于布局文件以及设置编写好了,我们需要编写控制代码逻辑的Java文件 这里最重要的是Fragment,这里我们需要对每一个Fragment(对应一个xml布局文件)新建一个Fragment...类 ChatFragment.java FriendsFragment.java CommFragment.java SettingFragment.java 按上图配置,每一个类相当于对应一个布局
领取专属 10元无门槛券
手把手带您无忧上云