如何自定义炫酷浏览器主页
如何自定义炫酷浏览器主页
一、概览
今天和大家分享的是一个自定义浏览器主页。在很早以前我也写过一次,但是那个主页存在许多问题,而且功能也有欠缺。于是今天就来给大家分享一个改进版的浏览器主页。我们来看看效果图:
我们点击每个li会进入相应的网站,大家可以设置成自己常用的网站。我们还可以在输入框进行搜索,输入框默认是百度搜索。
总体来说算是非常简单了,如果读者不喜欢DIY的话,可以选择直接使用Infinity插件。
二、总体布局
上面的布局非常简单,首先是纵向的三个部分,简化如下:
标题没什么好说的,就是一个文本。
搜索框包括了三个东西,简化如下:
然后最复杂的是主体部分,我们把主体细分为四个部分:
然后我们只需要关注其中一栏的布局就好了:
上面就是大致的布局,更详细的会在后面说到。
三、使用iVx实现页面
3.1、准备工作
iVx是一款可视化的编程工具,如果你有编程基础,相信你能很快入手这款工具。详细内容可以在https://www.ivx.cn/了解。
我们进入工作台创建一个项目:
我们选择相对定位,修改应用名然后创建即可。
因为我们是电脑端网页,所以这里在右上角选择相应分辨率的电脑。然后点击减号,让电脑可以显示整个布局。下面我们就可以开始写布局了。
3.2、布局
我们先简单了解一下工作台的界面:
最左侧是我们可以添加的控件,只需要点击即可添加。控件旁边的是控件的属性,右侧是已添加到页面上的控件。
因为这次的应用没有后台,所以我们只需关注前台即可。
我们先为页面添加整体的布局,整体布局是纵向的。因此我们添加一个列,并在列内添加3行:
左侧是列和行控件,右侧是添加后的层次关系。这时候它们带有默认背景颜色,我们把它去点,并把列的背景设置为黑色:
我们在属性设置面板就可以设置控件的属性了,点击清空就可以取消背景颜色。
为了方便观看,我们给右侧重命名。这里需要注意,实际布局和右侧是倒着来的。我们布局的标题在最上面,内容在最下面,而右侧是反过来的。
现在我们调整一下宽高,把内容的高设置为70%,其余两个设置为15%,设置的适合需要注意单位:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3ONgSjZs-1621681846295)(file:///C:\Users\Administrator\AppData\Roaming\Tencent\Users\2930777518\TIM\WinTemp\RichOle\B62~YAT[B%N}@(Y0%]7S)]F5.png)
要是%而不是px。
3.3、标题
标题的布局很简单,只需添加一个文本框即可:
我们需要注意把行布局的对齐方式设置为居中,然后修改字体颜色即可。
3.4、搜索框
搜索框需要加3个东西,输入框、图标和按钮,位置分别为如下:
我们修改输入框的长度已经按钮和标签的大小。然后发现上面的搜索框不够美观,这个适合我们可以选择修改按钮的圆角:
我们先去掉左侧圆角,然后再修改圆角大小。就有了上面的效果,但是因为中间有个标签,我们需要设置一下:
我们修改左侧几个属性,就有了上面的效果。配色方面大家可以自己调节。这样我们搜索框就完成了。
3.5、第一栏布局
我们做好一个栏其余的可以直接复制粘贴。我们按照下面的方式添加控件:
然后再一个一个来完成内容。
为了显示不同颜色,我们需要多个文本框:
这里我们使用了三个文本,然后给行布局设置了左内边距。其余的选项我就不详细说了,按照上面的操作写即可。最好调整好后的效果如下:
现在我们可以开始添加事件了。
3.6、点击跳转
现在我们给每个栏目添加一个跳转:
选中我们要添加事件的控件,这里我选择了选项1,然后点击右侧的感叹号,再在左侧选择监听的事件,这里我们选择点击。
选择事件后,我们点击从对象树选择,然后选择前台,就可以选择下面的选项了:
我们选择打开外链,然后输入链接即可,你可以根据自己的爱好选择是否要在当前页打开。
现在我们就实现了跳转功能,其它的也是一样添加的,这里就不细说了。下一步就是要实现搜索框的功能了。
3.7、搜索功能
这里我们需要添加3个变量,我们直接在前台添加:
三个变量的含义分别是,百度搜索的请求地址,要搜索的词和,最终打开的页面。
其中百度的内容设置为:https://www.baidu.com/s?wd=
其余两个我们可以先不设置。
然后我们找到图标,给它添加一个清空输入框内容的事件:
接下来给按钮设置事件:
这里事件比较多,上面标注了每一个事件做的事情。下面是没有添加标注的图片:
这样我们就完成了个人浏览器主页的编写。
四、导出与设置为主页
我们可以带点击上方的按钮进行预览,当效果满意的时候选择私有部署导出页面。当程序复杂度到一定程度时导出是要收费的。
然后修改为浏览器主页的话这里以谷歌浏览器为例说一下。点击浏览器左上角的三点,如图:
然后:设置->启动时->打开特定网页或一组网页->添加新网页。网站网址的话,可以先用浏览器打开那个网页,然后把搜索栏的网址复制下来填进去就好了。如下图:
然后就完成了。
在这次例子中,我只是做了一个比较简单的纯前端页面。除了网页,iVx还可以做小程序和小游戏。不过笔者现在还没尝试过。另外在iVx中是支持编写后台的,不得不说在同类型的可视化编程工具中iVx功能还是非常丰富的。
感兴趣的读者可以自行访问官网,另外附上官方教程。
如何自定义炫酷浏览器主页相关推荐
- 自定义炫酷powershell
自定义炫酷powershell(美化) linux上的bash和zsh之类的命令行终端炫酷无比. window上的cmd和powershell丑的不忍直视. 很久之前不知参考谁的一篇文章自定义了一下, ...
- 超酷的计步器APP(一)——炫酷功能实现,自定义水波纹特效、自定义炫酷开始按钮、属性动画的综合体验
超酷的计步器APP(一)--炫酷功能实现,自定义水波纹特效.自定义炫酷开始按钮.属性动画的综合体验 好久没写博客了,没给大家分享技术了,真是有些惭愧.这段时间我在找工作,今年Android的行情也不怎 ...
- Android开发——自定义炫酷PickerView惯性滚动魔改
Android开发--自定义炫酷PickerView快速滚动魔改 最近由于课内压力的增加和安卓课设项目,故没有怎么刷acm题,基本上学校要训练也就去水一波,程序设计相关内容也鸽了. 由于从来没有做过开 ...
- android 炫酷3d主页,五款超酷安卓手机3D桌面软件合辑推荐
3D桌面一直以来都是备受大家青睐的东西,没办法,3D桌面主题既绚丽又实用,没人会不喜欢.3D桌面给人们展示的是一个不同维度的世界,人们会感觉更立体.更逼真,色彩效果也会更加灿烂,给我们以非常好的视觉享 ...
- dismiss ios pop效果_iOS实现自定义炫酷的弹出视图(popView)
"前段时间,在项目中有个需求是支付完成后,弹出红包,实现这么一个发红包的功能.做了最后,实现的效果大致如下:" ###一.使用方法 整个ViewController的代码大致如下 ...
- android自定义Drawable实现炫酷UI-锦鲤游泳效果
一.实现效果: 当点击屏幕的时候,屏幕中的锦鲤会身体摆动并且游到屏幕点击处,如下图: 效果分析: 1.小鱼的身体各个部件都是简单的半透明几何图形. 2.各个部件都可以活动. 3.从头到尾方向的部件摆动 ...
- 超级炫酷的游戏浏览器-Opera GX-附文件下载
小伙伴们注意:公众号的推送机制不再按照时间前后推送了,微信公众号信息流乱序.君哥建议大家把科技毒瘤君公众号置顶(设为星标⭐),以便第一时间看到推送,非常感谢~,方法如下图: 文 章 分 类 软 ...
- android炫酷的自定义view,Android自定义View实现炫酷进度条
本文实例为大家分享了Android实现炫酷进度条的具体代码,供大家参考,具体内容如下 下面我们来实现如下效果: 第一步:创建attrs文件夹,自定义属性: 第二步:自定义View: /** * Cre ...
- 一个炫酷的仿雷达扫描和扩散效果——自定义View就是这么简单
高仿雷达扫描效果和仿水波纹中心扩散效果,手把手教你撸一个炫酷的自定义view. 于亚豪的博客地址: blog.csdn.net/androidstar- 我们先看效果图吧 Markdown Markd ...
- android自定义图片过渡效果,教你做出炫酷的Android动画效果
前言 Android动画也是Android系统中一个很重要的模块, 在平时开发中, 为了做出炫酷的效果, 动画可以说是必不可少的; 本文将总结Android中与动画相关的部分, 文中部分内容整理自文末 ...
最新文章
- Oracle 11.2.0.4 x64 RAC扩展存储空间
- 把旧系统迁移到.Net Core 2.0 日记(1) - Startup.cs 解析
- electron-关闭之前,弹出提示窗
- 香甜的黄油(信息学奥赛一本通-T1345)
- 小谈EasyUI中的tree用法
- Oracle 21c 新特性:不可变表 Immutable tables 提高安全
- 遇见未来 | 对话王璞:谈分布式系统在企业落地的挑战
- Java通过反射机制修改类中的私有属性的值
- tar.gz 和 tar.bz2 详细解释
- 基于Docker+Gitlab搭建Spring Cloud分布式配置中心
- 阿里云Serverless,全球第一!
- 【网络学习笔记】Excel数据分析实战项目—淘宝用户画像
- cgi/fastcgi停止工作
- windows xp系统重装之u盘装系统,u盘安装xp系统
- F. Clear the String (区间DP)
- DHCP动态获取IP地址流程
- 78岁老人爱上玩乐器硬是学会了吹奏萨克斯
- 婚房布置清单 婚房布置图片大全 婚房布置效果图
- 源码茶舍之android:externalService是什么属性?实现原理?
- 第一次面试,面完,直接拒了!