首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

vue博客实战---博客首页开发

博客网站的架构如下: 1.左上方头像区域,鼠标移入会有下拉菜单进行注册登录退出等操作 2.左下方博客导航栏区域 3.中间博客正文区域 3.右侧精选文章展示以及友情链接展示 我们可以先看下具体的首页效果...并且index.js中引入element-ui。 ?...我们首先实现左上方头像下拉菜单,下拉菜单我使用element-ui的el-dropdown组件,el-dropdown中包含一个class为el-dropdown-link,鼠标移入则会显示下拉菜单,我们可以将头像放在这个...右侧导航栏的效果比左侧相对简单许多,最上方一个div显示博客名称和一句座右铭,中间部分nav里面套ul实现精选文章区域,现在具体逻辑功能还未实现所以精选文章我先写死,下方div里面套ul友链展示。...左右两侧导航栏实现完毕,接下来需要设置中间的博客主界面,实际中间界面不是固定界面,而是由index.js中routes的components决定具体渲染哪一个vue文件作为博客主界面,首页我们渲染的是

6.8K20

windows GUI自动化怎么

#3秒后遍历最上窗口的控件 -f, 抓取焦点处控件 -n, 显示控件的完整name -c, 遍历光标下的控件 -d,遍历的层级   import uiautomation as auto   window...pyautogui pyautogui 模块主要用于屏幕控制(获取屏幕尺寸、截屏等)、鼠标控制(移动鼠标、单击、双击、右击、拖拽、滚动等)、键盘控制(编辑、按键等)。...、显示和关闭窗口窗口前置、窗口聚焦、获取窗口位置等),通常用的较多的是 win32gui hld = win32gui.FindWindow(None,u"Adobe Acrobat") #返回窗口标题为...右键-检查元素,Ctrl+shift+i 就可以调试了 可以用如下工具来定位元素: Scripting Tracker, 这个主要是用在sap中的,点击鼠标,可以指到元素。...spy++ inspect 好了,介绍了这么多工具,到底怎么用呢? 一般如果元素控件很多,层级很深,可以用到uiautomation; 当然pywinauto也可以实现,但是需要一层一层定位。

2.1K40
您找到你想要的搜索结果了吗?
是的
没有找到

Fdog系列(四):使用Qt框架模仿QQ实现登录界面,界面篇。

创建窗口,添加基本组件 2. 自定义标题,隐藏任务栏标题,实现系统托盘显示 3. 美化主界面,文本框的奇思妙想 4. 实现背景阴影 ---- 一....学习该篇,你将学会: 自定义标题框,实现移动 隐藏任务栏图标,将图标显示系统托盘(系统右下角) 创建右击菜单 文本框的奇思妙想 自定义边框如何添加边框阴影效果 样式设计 等等等等 图中的下拉框...如果你不会添加资源的话,我教你呀,右击项目,创建新文件,选中Qt中的Qt Resources文件,创建之后工程列表会多出一个Resources文件,然后项目文件夹下面创建一个lib的文件夹,图片放在里面...比如上半部分的一个动态图,怎么显示动态图呢 #include QMovie * m_movie; //加载动态图 m_movie = new QMovie(":/lib/mian.gif...点击三角按钮,将选中的内容显示文本框就可以了。

3.6K52

快速搭建博客-高级篇-增加功能

(只对Muse | Mist两种风格有效) #display: post //默认行为,文章页面(拥有目录列表)时显示 display: always //在所有页面中都显示...” 修改为 src=“https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js” 添加动态背景 js文件放在\themes\next...\source\js\src 更新\themes\next\layout_layout.swig文件,末尾(在前面引用会出现找不到的bug)添加以下 js 引入代码: <script type="text...:一个基于 Github Issue 和 Preact 开发的评论插件 详情Demo可见:https://gitalk.github.io/ <em>在</em>GitHub<em>上</em>注册新应用,链接:https://github.com...-webkit-border-radius: 80px; -moz-border-radius: 80px; box-shadow: inset 0 -1px 0 #333sf; /* <em>鼠标</em>经过<em>头像</em>旋转

57910

JavaScript—事件

JavaScript—事件 事件机制: 在用户使用键盘、鼠标等设备进行操作时,实际每一次的操作都是发起一个事件。...当我们的鼠标点击到窗口上的按钮时,并不是鼠标的箭头真正点击到这个按钮了,而是鼠标发出了一个动作事件,然后这个事件先被传送到了操作系统的命令处理带,然后再传送到负责显示图形的图像数据层,事件到这里后图像数据层会先看哪个程序的窗口最上面...(因为不是最上面就没必要看了),再根据鼠标提供的X Y坐标确认点击的是哪个窗口上的按钮,接着再确认这个窗口是哪个程序。...事件鼠标移动出该元素时会触发,mouseover事件鼠标移动进该元素时会触发,属于焦点类的事件: 代码示例: ?...所谓焦点就是鼠标的光标的位置,例如当你文本框输入文字时需要点击一下文本框才能输入,这就是要让文本框获得鼠标焦点。

1.6K20

Websocket IM聊天教程-教你用GoEasy快速实现IM聊天

显示好友列表(1.7)undefined2.1. service层获取当前用户信息,页面显示当前用户的username和头像。...undefined2.2. service获取本地好友列表,然后controller将每个好友的头像和名称显示到页面上,对于当前在线的用户,旁边显示一个小绿点,并且为每个好友绑定一个点击事件,点击好友时...窗口顶部显示聊天好友的名称。undefined3.2....自己的消息发送成功后,显示聊天窗口的右边。 收到新消息:undefined5.1. 1.6定义了接收好友新消息的事件,当收到一条好友的新消息时。undefined5.2....如果收到的消息就是来自当前对话窗口,就将消息显示到聊天窗口,并且调用service将本地数据里该好友的未读消息清0。 用户上下线提醒undefined6.1.

3.6K00

Web页面组成

html页面中可以把这个元素加载进来,但是不代表此刻让它显示页面上。 html元素是存在的,但是用眼睛去看页面是看不到的。 visibility代表的是可见。...登录的判断涉及后台数据校验,需校验账号密码我当前的数据库当中是否存在的。如果存在,全部匹配,才会给你返回。 12)鼠标悬浮,通过js可以实现。 鼠标悬浮,对html页面上的元素做了样式的改变。...2)html页面中,javascript是放在 这个页面里面的。 3)alert() 方法用于显示带有一条指定消息和一个 OK 按钮的警告框。...文件加载之后弹出窗口: ? 没有限定要放在哪里,放在head里面也行,放在body里面也行。html页面当中,哪个地方都可以放。...要明白你做的接口测试是在哪一层?有什么关系? 在前台提交一个数据,它在整个系统中,数据流向是怎么走的? 接口-->后台--->数据库,然后再回到你的前端。 MVC模式:分层设计。

1.9K20

JavaScript事件随想

html+css+js,不仅方便发布,而且做起来也快,写完页面样式,更新资源,就好了,类似热更 问题 javascript是怎么捕获到鼠标点击事件的?...js有很多事件,鼠标的、页面加载完成的、点击按钮的;etc...../其他消息交给由系统提供的缺省处理函数 return ::DefWindowProc (hwnd, message, wParam, lParam); } 浏览器处理消息 Windows,浏览器作为一个...Windows的应用程序,也会收到鼠标点击的事件,所以收到以后的事件不是 JavaScript 事件,而是浏览器进程和js解释器共同处理的事件 浏览器访问网页是个网络io,渲染html,css 以及执行...js的操作,有些操作比如说获取远程数据、I/O操作等,他们都很耗时,如果采用同步的方式,那么进程执行这些操作时就会因为耗时而等待,就像上面那样,下面的任务也只能等待,这样效率并不高。

48520

WordPress主题Siren二开美化版

,不会在当前窗口加载了 评论框添加了表情,并支持实时预览;由 小さな手は 实现,效果很好,谢谢他 原生编辑器添加载入主题样式,后台写文章可视化与前台显示效果一致 后台屏蔽 WordPress 更新与编辑器自动保存等...…… 添加鼠标点击特效 添加网页运行天数 添加 ICP 备案号选项 添加谷歌分析代码输入框 添加屏蔽鼠标右键 添加浏览器标签焦点判断 添加复制友情提示 多数添加的功能均有开关可以自行选择是否启用!...文章列表、文章或者页面的顶部图片显示顺序: 优先显示编辑文章时所设定的特色图,没有设置特色图的情况下的逻辑和一条一样。...2018.07.15 移动端菜单的头像添加登录入口 用户头像支持调用第三方插件设置的本地头像 不同用户登录时首页显示头像与名言各自读取 修复中文昵称用户的作者页 URL 404 的问题 移除失效的多说评论选项与代码...JS 脚本,重写 CSS 代码 2019.04.03 添加代码高亮(HIGHLIGHT.JS)的 PJAX 重载功能 修复开启 PJAX 后,使用浏览器返回功能返回一页时,N 个功能没有加载的问题

3.9K30

【编程入门】互联网的本质技术

浏览器拿到这些代码之后,分析一下给你渲染好页面显示出来,如果不用css,效果是这样的,按照浏览器默认的样式显示出列表、图片、超链接、输入框、按钮等等: ?...于是我们有了 Javascript(JS) 来给页面添加一些动态的效果,比如知乎问题的标签,鼠标移上去会弹出一个小窗口,这个就是 JS 实现的效果啦。 ?...浏览器都会帮你实现一些 JS 可以用的工具(函数,对象什么的),你只要写一些 JS 的代码,保存在 xxx.js 里, html 文件中用 关联进来就可以用了,像上图这个效果应该就包括了...鼠标悬停到标签上时创建一个新的 小窗口JS 向知乎服务器发送一个请求,得到这个小窗口应该显示的数据,放在这个小窗口里(这就是所谓的AJAX,不用刷新就能与服务器进行交互,更新页面的一小部分...比如我的主页,导航栏右边的头像和名字跟别人看到的不一样,就是因为这块地方有一个放图片的标签和一个写名字的标签,服务器脚本查询本地的数据之后给我返回的页面里的标签填了我头像的图片链接

1.1K110

基于发布-订阅的原生 JS 插件封装

一、需求分析 封装一个插件,将小球的 DOM 对象作为参数传入,使得小球鼠标按下和放开后能够运动,水平方向做匀减速直线运动,初速度为鼠标移开瞬间的速度,竖直方向的运动类似于自由落体运动。...首先,你怎么拿到松开手瞬间的小球移动速度?如何去表达出这个加速度的效果? 实现方面,这是非常重要的问题。不过,其实非常的简单。...this.strY = ev.clientY;//鼠标点击处到浏览器窗口最上边的距离 this.strL = ele.offsetLeft;//元素到浏览器窗口最左边的距离...this.strT = ele.offsetTop;//元素到浏览器窗口最上边的距离 this.MOVE = this.move.bind(this); this.UP...那怎么解决这个问题呢?很简单,对扩展开放,我们就将具体的效果代码以扩展的方式提供,对类扩展,而不是全部放在类里面。 我们的具体做法就是采用发布-订阅模式。

3.1K20

委托事件模型

事件机制: 在用户使用键盘、鼠标等设备进行操作时,实际每一次的操作都是发起一个事件。...当我们的鼠标点击到窗口上的按钮时,并不是鼠标的箭头真正点击到这个按钮了,而是鼠标发出了一个动作事件,然后这个事件先被传送到了操作系统的命令处理带,然后再传送到负责显示图形的图像数据层,事件到这里后图像数据层会先看哪个程序的窗口最上面...(因为不是最上面就没必要看了),再根据鼠标提供的X Y坐标确认点击的是哪个窗口上的按钮,接着再确认这个窗口是哪个程序。...确认完毕后,图像数据层就会将这个动作事件提交给相对应的执行程序,执行程序里的代码先寻找是哪个位置的数据哪个对象提供的,进行一系列的搜索,找到后这个对象就会执行相对应的代码,然后再将执行后的显示传送到图像数据中心进行显示...我们就会看到鼠标点击到了这个按钮。 之所以平时使用的时候没感觉出来,是因为这一系列的复杂的机制都是瞬间完成的,只有电脑卡顿的情况下才能感觉到点击后要等一段时间才会做出相应的响应。 流程图: ?

85620

Hexo的Next主题优化教程

NEXT这款主题源码都直接托管GitHub,可以直接搜索,下载地址:https://github.com/theme-next/hexo-theme-next.git。...修改作者头像并旋转 修改头像很简单,找一张尺寸合适、自己喜欢的图片,放在themes\next\source\images下,随后修改主题配置文件,将头像重新设置即可,配置如下: # 设置自己的头像 avatar...: /images/header.jpg 头像默认是不带旋转的,想要实现鼠标放在头像上方会自动旋转,只需要在\themes\next\source\css\_common\components\sidebar...,并没有显示每篇文章的访问次数,效果如下图: 图片 如果想要显示每篇文章的访问次数,themes/next/layout/_macro/post.swig文件第一行增加is_pv字段,如下: {% macro...作者的博客并没有设置单独的域名,完全是搭建的Github的,个人觉得没必要一个单独的域名,完全是自己的学习以及工作心得,因此没搞这些,不喜勿喷,哈哈………

60230

【React基础-1】Hello World

概述 React其实就是一个JS文件库,本质跟我们的jQuery这些JS库是一样的,所以大家开始的时候不要有任何的心理负担,觉得它很难,其实它一点都不难。...我们在此处就不耽误时间来介绍这些东西,刚开始学习react的话这些东西大家可以先不用关注,把精力放在react就行。...我们新建一个文件夹,然后进入此文件夹之后键盘按住shift键并且鼠标右击,选择”在此处打开Powershell窗口”,然后输入命令npx create-react-app reactbasic来创建第一个...到目前为止,你肯定有一大堆疑惑:明明是一份js后缀的文件,为啥里面可以写标签?import导进来的React都没有使用,为啥最上面这一行删掉后会报错?...我代码复制粘贴后按保存,浏览器页面都没有点击刷新按钮,页面怎么自动刷新了?

42810

小白秒变大神--windows窗口+装B神器大全 两部曲

骚操作一:摇一摇,窗口最小化 计算机中,把每个展现给用户的视图界面叫window(窗口)。 同时打开两个及以上窗口的情况下,鼠标拖动目标窗口左右摇动,其它窗口自动变最小化 ?...骚操作二:窗口最大化 1、鼠标拖动目标窗口到屏幕最上端,目标窗口会自动全屏,实现窗口最大化 ? 2、鼠标双击目标窗口的标题栏实现窗口最大化 ?...2、鼠标拖动目标窗口到屏幕最右端,窗口会占满屏幕的1/2 ? 骚操作四:窗口占满屏幕的1/4 1、鼠标拖动目标窗口到屏幕左上角,窗口会占满屏幕的1/4 ?...2、鼠标拖动目标窗口到屏幕左下角,窗口会占满屏幕的1/4 ? 3、鼠标拖动目标窗口到屏幕右上角,窗口会占满屏幕的1/4 ? 4、鼠标拖动目标窗口到屏幕右下角,窗口会占满屏幕的1/4 ?...不知道你怎么样?

89920

【web前端】web前端设计入门到实战第二弹——面试题总结+答案

A.src B.href C.alt D.title 29.在网页中添加一个链接,并要求窗口打开链接,下列代码正确的是( A )。 A.... A.该图片在网页中显示的宽度是50像素,高度按比例放大或缩小。...C.鼠标悬停在图片时,鼠标附近会显示图片信息“我的头像” D.当图片无法正常显示时,图片位置会显示内容“我的头像” 31、关于HTML5的基本语法,下列说服错误的是( B ) A.文档开始要定义文档的类型...标签中的所有内容都会显示在网页中。 B.标签用于定义网页标题,该标签中的内容不会显示在网页的最上方。 C.标签中的内容为网页主体。...30.为“友情链接”四个字添加链接,并且目标地址为“link.html”,设置目标窗口窗口打开的代码是_____________<a herf=”.

53410

Selenium必须掌握的元素定位方法

页面操作过程中有时候点击某个链接会弹出新的窗口,这时就需要主机切换到新打开的窗口上进行操作。...(js) time.sleep(5) # 修改display属性为'block',把"更多产品"功能按钮显示js = "document.getElementsByName('tj_briicon...')[0].style.display='block';" # 调用js脚本 driver.execute_script(js) #判断元素是否页面上可见; element = driver.find_element_by_name...tj_briicon") print(element.is_displayed) driver.find_element_by_name("tj_briicon").click() 页面元素不可见的元素虽然界面上不显示...默认就是不可见的,这时我们需要鼠标悬停操作,让设置的下拉内容显示出来。所以,鼠标悬停“设置”链接上就是前提条件。 ?

4.6K20
领券