所以，为了提高页面加载效率，这里我们就需要学习 CSS 的精灵图和字体图标。 1.2 精灵图 1.2.1 概念 精灵图，又名雪碧图，是多个小图标的集合图。...字体图标：引入第三方特殊字体，以特殊字体显示为图片图标。 注：因为在计算机中，字体的本质就是图片，所以又称为图标字体。 优点： 1 、轻量级：字体加载速度极快。...Font Format( .woff ) 格式 woff 字体，支持这种字体的浏览器有 IE9+ 、 Firefox3.5+ 、 Chrome6+ 、 Safari3.6+....svg ) 格式 .svg 字体是基于 SVG 字体渲染的一种格式，支持这种字体的浏览器有 Chrome4+ 、 Safari3.1+ 、 Opera10.0+ 、 iOS...、占用的标准流位置仍为四边形 示例代码： 2.3 截图整个网站 1 、先把滚动条拉倒网页最底部 2 、页面上，鼠标右键，“检查” 3 、 ctrl+shift+P 呼出输入框
页面时，切换到某一个 Tab 页面就很麻烦，Omni 输入框只需要输入关键字「 /tabs 」，然后追加关键字就能快速查询 Tab，回车即可以切换 Tab 另外，关键字「 /bookmarks 」用于快速切换搜索书签...」，针对 Omni 指定一个热键，比如：Ctrl + Shift + K 当然，Omni 还有很多实用的功能，比如：页面静音、Tab 固定、管理插件等，大家可以自行拓展 插件地址： https://chrome.google.com...使用方法很简单，只需要点击插件，鼠标点击网页上的某一个控件，右上角会展示目标元素的 CSS 样式属性 插件地址： https://chrome.google.com/webstore/detail/...，还包含样式自定义、「 图表视图 」展示等功能，用户体验做的更好 另外，这款插件可以随意选择一个节点，复制 Path 路径及 Value 值 插件地址： https://chrome.google.com...比如，可以按时间段列出浏览次数最多的十大网站 另外，还可以通过关键字查询历史浏览记录 在设置中，可以导入、导出历史记录，还能配置自动备份的周期 插件地址： https://chrome.google.com
5、监测selenium环境 运行cmd，输入python，会进入到dos下的python环境，输入： from seleniumimport webdriver 无任何的错误提示信息，表示selenium...driver.find_element_by_id('kw').send_keys('seleniumhq') 定位到页面元素后，通过id=kw定位到百度搜索输入框并且输入seleniumhq。...chrome浏览器中，按下F12键，就会显示出调试界面，见截图： 点击移动到百度搜索输入框，就可以定位到百度搜索输入框的页面元素，见截图： 1.4 IE浏览器的操作 selenium操作ie的浏览器是无法操作的...浏览器的操作 通过ChromeDriver就可以操作chrome， google官方的解释为：ChromeDriver 由三个独立部分组成。...此可执行文件被称为"chromedriver"，但我们可以试着把它称作"服务器"在此页中以减少混乱。
src用于指定字体资源 url指定资源的路径 format用于帮助浏览器快速识别字体的格式; 2.3. 字体图标 思考:字体可以设计成各式各样的形状，那么能不能把字体直接设计成图标的样子呢?...字体图标的好处: 放大不会失真 可以任意切换颜色 用到很多个图标时，文件相对图片较小 字体图标的使用: 登录阿里icons (https://www.iconfont.cn/) 下载代码，并且拷贝到项目中...将字体文件和默认的css文件导入到项目中 字体图标的使用 字体图标的使用步骤: 第一步: 通过link引入iconfont.css文件 第二步: 使用字体图标 使用字体图标常见的有两种方式: 方式一:...通过对应字体图标的Unicode来显示代码; 方式二: 利用已经编写好的class , 直接使用即可; 2.4....视口(Viewport) 文档的可视区域 如右图红框所示 画布(Canvas) 用于渲染文档的区域 文档内容超出视口范围，可以通过滚动查看 如右图黑框所示 宽高对比 画布 >= 视口 定位元素的特点
搜索并采集结果的标题 需求如下： 打开百度搜索主页 在输入框输入搜索内容(比如"爬虫") 点击"百度一下"按钮，进行搜索 把结果页面中的第一页的各个结果的主标题抓取下来 Selenium 的麻烦之处 本系列始终围绕一点开展...pip install selenium" 也可以在 cmd 中执行 "pip install selenium" ---- 由于我本机安装了 Google Chrome 浏览器，打开浏览器，看看浏览器的版本...： 点击功能区(右区)的左上角的小标签，开启定位模式 此时鼠标移到页面区(左区)，鼠标移到的地方，右区会显示此元素在 html 的位置 我们看到，输入框是一个 input 标签，我们要在代码中告诉...同样用"开发者功能"，定位该元素，并复制 css 选择器表达字符串： wd = webdriver.Chrome() wd.get('https://www.baidu.com/') # 输入框 input_box...，selenium 有专门用于等待元素出现的机制，代码如下： wd = webdriver.Chrome() wd.get('https://www.baidu.com/') # 输入框 input_box
下文主要记录puppeteer进行自动化测试过程中，遇到的问题。...', 'chrome-linux', 'chrome'), Darwin: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome...问题：由于系统字体问题，一些中文变成方块， 解决方案：添加中文字体，修改字体配置文件 参考文章：https://www.jianshu.com/p/f2ba4f5b8f36 关闭弹窗 page.on...=> { try { await dialog.accept(); } catch (error) { console.log("关闭弹窗出现错误...", error) } }) 定位授权问题 问题：定位授权弹窗，想要模拟位置，但是puppeteer的api不支持。
Selenium测试直接运行在浏览器中，就像真正的用户在操作一样。支持的浏览器包括IE，Mozilla Firefox，Safari，Google Chrome，Opera等。...path=2.39/ 放入google目录下 测试代码，测试是否能读取到驱动文件。...from selenium import webdriver path = "C:/Users/LyShark/AppData/Local/Google/Chrome/Application/chromedriver.exe...print(driver.find_element_by_class_name("s_ipt")) # 通过类名来定位 # 通过xpath定位,xpath定位有N种写法,这里列几个常用写法 print.../AppData/Local/Google/Chrome/Application/chromedriver.exe" driver = webdriver.Chrome(executable_path=
例如，有些操作，我们做了之后，会触发一些提醒，有些是正确的提醒，有些是红色字体显示的错误提示。我们自动化里面如何去捕获这些字段，如果进行测试自动化判断呢。这里就要用到isDisplay()方法了。...4.1测试用例（思路） 1.访问度娘首页 2.定位首页的登录按钮，然后点击 3.弹出登录框定位短信登录按钮，然后点击 4.定位手机号输入框，然后输入手机号 5.定位登录框的登录按钮，然后点击 6.定位出现的...driver.findElement(By.id("TANGRAM__PSP_11__changeSmsCodeItem")).click(); //定位手机号输入框，...其实这种方法前边已经用过，只不过是宏哥没有指出，就像前边文章中的toast元素，直接定位存储在变量里，然后将其的文本打印出，是不是啊各位小伙伴们或者童鞋们。...driver.findElement(By.id("TANGRAM__PSP_11__changeSmsCodeItem")).click(); //定位手机号输入框，
之前在Windows 7时是没有这个问题的,最近刚刚切换系统为Ubuntu 18.04才遇到这个问题.Google了很久似乎别人都没遇到过这个问题....过程 1.找到VisualVM的源代码：https://github.com/oracle/visualvm 2.定位代码位置，印象中我有一次看到过别人分析VisualVM计算CPU和GC百分比的代码...,说明不是国际化的问题.由于VisualVM的统计图完全是通过Swing绘制的,因此问题应该出在字体上.按照这个思路经过反复运行调试终于找到问题所在....font值为 :java.awt.Font[family=Source Code Pro,name=Source Code Pro,style=plain,size=11] 这时我想起之前出现过在IDEA中设置字体为...://chrome.google.com/webstore/detail/sourcegraph/dgjhfomjieaadpoljlnidmbgkdffpack 2.其实,当我确认是字体原因导致之后
Web Developer https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm...采用鼠标悬浮特性，点击后就可以告诉你所指字体的属性，字体名称、字体大小、字体颜色等，非常方便，目前有 Chrome 和 Safari 扩展，Firefox 的用户可以使用书签栏工具。...Eye Dropper https://chrome.google.com/webstore/detail/eye-dropper/hmdcmlfkchdmnmnmheododdhjedfccka 就像网站字体一样...它提供了一个浮动面板，该面板显示鼠标悬浮在的元素的标识，以及它的字体、文本、颜色、背景、框、定位和效果属性。CSSViewer 可以提供你所需要的基本的CSS信息。...Marker.io Marker.io 是一个非常方便的 Web 开发工具，它可以让网页上的错误报告更快、更直观。你可以轻松捕获屏幕截图并利用编辑功能清楚地勾勒出错误的位置和内容。
字体样式修改 谷歌在线字体 本地自定义字体 字体样式的修改需要先引入相应的字体文件,此处推荐使用: 谷歌字体库 https://fonts.google.com/ 打开谷歌字体库， 输入预览字样，...fallback:需要使用自定义字体渲染的文本会在较短的时间（100ms according to Google ）不可见，如果自定义字体还没有加载结束，那么就先加载无样式的文本。...这点可以通过fixed定位属性和hover选择器做到。 fixed定位会使得该元素的位置相对于浏览器窗口而固定，即使窗口滚动，它也不会移动。...此处以给网页头图和网页背景添加图片渐变模糊为例，在中添加 考虑到还有部分读者的需求是指定页面，可以在对应文章或者page的markdown文件里写css代码： 鼠标指针样式替换 点击查看鼠标指针样式替换...cur图标的路径引用方式和背景图片的引用方式是一样的，都支持图床外链和本地相对链接。以下是一些常用位置的更改示例。读者还可以自己定义更多块元素的具体图标。
实际上，Google 官方的应用也有不遵照规范的地方，不能太拘泥于条条框框。...编辑 菜单从当前选项固定位置展开，不要跟随点击位置改变。 编辑 菜单到上下留出8dp距离。 ...编辑 简单一根横线就能代表输入框，可以带图标 编辑 激活状态和错误状态，横线的宽度变为2dp，颜色改变 输入框点击区域高度至少48dp，但横线并不在点击区域的底部，还有8dp距离。 ...编辑 编辑 通栏输入框也可以有字数统计，单行的字数统计显示在同一行右侧 编辑 错误提示显示在输入框的左下方。默认提示文本可以转换为错误提示。 ...编辑 编辑 字数限制与错误提示都会使点击区域增高。 编辑 同时有多个输入框错误时，顶部要有一个全局的错误提示 编辑 输入框尽量带有自动补全功能。
除了这些问题之外，还有不同的屏幕尺寸、语言偏好和明显的人为错误等不确定因素，我们从中发现了许多会让开发者出错的小问题。...下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...在 macOS 下的 Chrome 中，这看起来不错，但是在 Windows 下的 Chrome 中，滚动条始终存在（即使内容很短）。这是因为 scroll-y 会无视内容，一直显示滚动条。...分配一个标签元素给一个输入框时，添加 for="ID" 使用表单元素时，确保所有的 label 元素都分配到了一个 ID。这将提高它们的可访问性，点击的时候，相关的输入框将获得焦点。...默认情况下，它们并不会继承文档字体，因为浏览器给它们应用了系统字体。
在账号输入框中输入有效的11位手机号2. 在密码输入框中输入正确的密码3....在账号输入框中输入无效手机号2. 在密码输入框中输入有效密码3....在账号输入框中输入有效的11位手机号2. 在密码输入框中输入无效密码3....在账号输入框中输入恶意SQL语句或脚本2. 在密码输入框中输入任意内容3....下载 [ChromeDriver](https://sites.google.com/a/chromium.org/chromedriver/downloads) 版本与 Chrome 浏览器版本匹配。
首先是QQ和微信，这两者差不多，切换到表情键盘的时候都是没有光标的，这样的用户体验是非常不好的，没有办法在输入表情的时候框选区域，也不能拖动光标进行特定位置的复制黏贴删除等操作，微信甚至在输入框里显示的都不是点击的表情图片...同时微博国际版输入框表情黏贴后的光标定位是错误的，如下图，开始时光标是在第4个表情后面，然后复制狗头+害羞两个表情黏贴到光标后，光标还是在第4个表情后，同时黏贴的表情前后都莫名多了空格。 ?...PPStickerDataManager类主要负责数据部分，用单例的形式，这样可以在初始化的时候只会读取一次plist文件中的所有表情信息；同时我们把输入框内容发到服务端以及从服务端请求到的都是纯文本的...就会从4个字符变成1个字符，这里是有差值的，如果不处理的话就会出现上面提到的微博国际版中复制黏贴输入框的表情会导致光标位置不对，甚至莫名其妙多出前后空格的问题。...为了精准的定位光标，我们需要自行处理好这些问题。
比如Konsole和Kate中会不时出现迷之条纹，还有窗体图标的放缩问题。 （非整数倍放大推荐）替代的调整方法是分别调整字体和图标大小。...字体的调整方式为，打开系统设置→字体，勾选“固定字体DPI”并调整DPI的值。对于我的笔记本，由于缩放比为120%，于是96*1.2≈115。图标的调整方式为，打开系统设置→图标→配置图标大小。...托盘图标不显示 右击托盘图标空白处，选择“配置 系统托盘…”，在“项目”中可以逐一更改托盘图标的显示设置。...不推荐完全关闭KWallet，因为大多程序（如：IntelliJ IDEA、Chrome、KMail）都会将密码保存在KWallet中，若完全关闭KWallet可能会造成一些安全问题。...软件 Chrome 安装 安装google-chrome包。
当你使用访问外国网站Hosts后，在地址栏输入:chrome://net-internals/#hsts并回车，在"Add Domain"处下面的输入框中填写:google.com.hk并将下面的"STS...使用方法:直接复制下述内容中每项的伪链接(以chrome://开头)，粘贴到Chrome浏览器的地址栏并回车，即可打开Chrome的实验室特性页面并快速定位到相应项目。 1....快捷自动填充底栏: chrome://flags/#enable-autofill-keyboard-accessory-view 启用此特性后，当光标定位在输入框内，并且此输入框有待填充内容时...，将在屏幕底部显示一个快速填充底栏，点击底栏中的快速填充项可以快速将此项填充到输入框。 ...在搜索栏(omnibox)中显示"Google"图标: chrome://flags/#ntp-google-g-in-omnibox 启用此项后，将会在起始页的搜索栏中显示一个彩色的"
下载想要的字体库，然后在工程里创建一个存放字体库文件的目录，把下载好的字体库文件存放进去，之后就可以引用这目录里面的字体库了，使用@font-face来自定义字体库，例如我下载了一个×××字体，然后在工程中创建了一个...text-decoration 设置字体横线相关，可以设置字体的下划线、上划线、中划线还有去掉横线等等，例如可以去掉超级链接的下划线，代码示例： ? 运行结果： ? 思维导图： ?...思维导图： ? 其他的属性使用方式参考： ? 过渡属性： transition 属性是一个用于设置过渡效果的属性，可以设置2D转换的过渡、宽高变化的过渡、背景或字体颜色的过渡。 ?...其实简单来说就是通过绝对定位，元素可以放置到页面上的任意位置，例如div，我给div设置了绝对定位就可以任意的通过"left", "top", "right" 以及 "bottom" 属性设置它在网页中的位置...结合以上介绍的知识点，我们可以做一个简单的例题，例如：当我们有时候登录某个网站的账户时，会发现当登录的输入框弹出来的时候除了登录的输入框之外就不能点击网页的其他地方了，这其实就是使用了div层的效果，把网页都给盖住了
前提条件 工具软件:ps(Adobe Photoshop CS5)或者cs6,百度Google都可以下载,也可以后台回复ps软件即可获得下载链接 windows(我没有使用过mac,使用起来应该差不多...将原型设计图进行还原,承接UI,最终实现产品经理意图,实现静态页面效果展现 从UI设计师那拿到psd文档,进行切图,抠图,测量,简单的图片处理操作(更改字体,吸字体颜色等操作),利用web技术(html...如何在网页中抠图 印屏幕,键盘上的prtSc SysRq键(把你屏幕上你看到的给截取出来) 浏览器(chrome)插件,控制台工具,审查元素,探测到图片,打开图片url,打开图片保存即可 网页上的图片都可以拿到...IE浏览器按住Alt键+鼠标点击一下图片 控制台调试工具的Source下的image,可以进行抠图 合成雪壁图(css sprite) 意义:把页面上的很多小图合并成一张图,利用背景定位的技术实现,减少.../png)特点 JPG/GIF/PNG的应用 如何抹掉psd原文件或者图片的文字 添加前景色和删除背景色 如何在网页中抠图 合成雪壁图(css sprite) 使用雪碧图结合定位嵌入到网页中去
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
云直播
对象存储
腾讯会议
