webkit | 易学教程

Bootstrap的基本使用（css、js文件的引入）的示例

阅读更多关于 Bootstrap的基本使用（css、js文件的引入）的示例

Bootstrap的基本使用（css、js文件的引入） <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="keywords" content="javascript,vueJS,Jquery,AngularJS,HTML5,CSS3"> <meta name="author" content=""> <title>Bootstrap3示例</title> <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> </head> <body>   <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script> <script src="https://cdn.bootcss

WEB前端第十三课——浏览器内核、位置

阅读更多关于 WEB前端第十三课——浏览器内核、位置

1.浏览器内核及前缀　　在CSS中新的属性标准尚未明确的情况下，各浏览器厂商对新属性的支持情况也不相同，这个阶段会对属性加厂商前缀进行区分。　　根据不同的浏览器内核，CSS前缀有所不同，最基本的浏览器内核有四种，其他内核都是基于此四种进行再研发的。　　① Gecko内核，前缀为“-moz-”，火狐浏览器　　② Webkit内核，前缀是“-webkit-”，也叫谷歌内核，Chrome浏览器最先开发使用，Safari浏览器也使用该内核　　　　　　　　　目前，国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等　　③ Trident内核，前缀为“-ms-”，也称 IE内核　　④ Presto内核，前缀是“-o-”，目前只有Opera使用　　代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS浏览器内核</title> <style> div { width: 500px; height: 500px; background-color:orange; border: 36px solid rgba(255,255,255,0.5); margin: 60px auto; padding: 50px; font-size: 200px; font

移动端1px细线解决方案总结

阅读更多关于移动端1px细线解决方案总结

一、移动端1px变粗的原因　　为什么移动端css里面写了1px, 实际看起来比1px粗，其实原因很好理解：这个px的含义是不一样的。移动端html的header总会有一句 <meta name= " viewport " content= " width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no " > 　　这句话定义了本页面的 viewport 的宽度为设备宽度，初始缩放值和最大缩放值都为1，并禁止了用户缩放。viewport通俗的讲是浏览器上可用来显示页面的区域，这个区域是可能比屏幕大的。根据这篇文章 http://www.cnblogs.com/2050/p/3877280.html 的分析, 手机存在一个能完美适配的理想viewport，分辨率相差很大的手机的理想viewport的宽度可能是一样的，这样做的目的是为了保证同样的css在不同屏幕下的显示效果是一致的，上面的meta实际上是设置了ideal viewport的宽度。　　以实际举例：iphone3和iphone4的屏幕宽度分别是320px，640px，但是它们的ideal viewport的宽度都是320px，设置了设备宽度后，320px宽的元素都能100%的填充满屏幕宽。不同手机的ideal

常见的移动web问题，终端触摸交互，各种bug坑如何解决

阅读更多关于常见的移动web问题，终端触摸交互，各种bug坑如何解决

移动web最佳viewport设置 < meta name ="viewport" content ="width=device-width,initial-scale=1,user-scalable=no" > 单行文本溢出 .inaline { overflow : hidden ; white-space : nowrap ; text-overflow : ellipsis ; } 多行文本溢出 .intwoline { display : -webkit-box !important ; overflow : hidden ; text-overflow : ellipsis ; word-break : break-all ; -webkit-box-orient : vertical ; -webkit-line-clamp : 2 ; } 移动端click事件响应慢300ms 以及 tap点透的bug：解决方案：使用fastclick库（听说最新版zepto已经解决这个bug） touch事件：安卓机只会触发一次touchstart，一次touchmove，不会触发touchend、解决方案：在touchmove中加 event.preventDefault(); 注意：会导致默认行为不触发，比如scroll，滚动失效弹性滚动：是一种缓冲反弹的效果

Android的webView应用与js互调app混合开发用例

阅读更多关于 Android的webView应用与js互调app混合开发用例

android5.1.1 和 android7都测试过，都是正常使用的 android原生与html交互可以实现APP混合开发 WebView 底层还是调用的WebKit AndroidManifest.xml 记得要配置上网权限 <uses-permission android:name="android.permission.INTERNET"></uses-permission> 主要代码文件: WebViewAction.java package com.example.a20200712; import android.content.DialogInterface; import android.os.Bundle; import android.text.TextUtils; import android.text.format.DateUtils; import android.util.Log; import android.view.View; import android.webkit.JavascriptInterface; import android.webkit.JsResult; import android.webkit.ValueCallback; import android.webkit.WebChromeClient; import

AppEmit v0.8.5 新功能支持webkit内核浏览器调用dll动态链接库

阅读更多关于 AppEmit v0.8.5 新功能支持webkit内核浏览器调用dll动态链接库

AppEmit v0.8.5 新功能更多主页支持在chrome各个版本，以及几乎所有支持websock浏览器，能调用可视化com组件dll ocx ActiveX , 开发互动信息的dll，并能在 javascript代码中代码控制。来源： oschina 链接： https://my.oschina.net/u/3101335/blog/4423481

VMLogin 配置高手进阶尽在 vmlogin.cc

阅读更多关于 VMLogin 配置高手进阶尽在 vmlogin.cc

VMLogin浏览器配置文件设置非常重要，如果设置有明显的冲突或不符合常理，那么所应用到的场景可能就会受到影响。下面我们来看看哪些不合常理的配置例子： WebGL vendor (供应商): 像苹果手机和苹果电脑一般都是 WebGL vendor ：Apple Inc. WebGL renderer(渲染器)：Apple GPU 如果我们是 Windows 系统情况下，大部分是： WebGL vendor ：Google Inc. 我们在做实验的情况下Chrome浏览器和Internet Explorer（Edge）测试取WebGL vendor 会有两种不同值，Chrome 取为 Google Inc. Internet Explorer（Edge）取为 Microsoft ，所以 WebGL vendor 不能完全翻译为《显卡供应商》，因为它和浏览器开发商有关。我们有趣的发现Firefox浏览器取值 WebGL vendor ：Google Inc. 所以这里我们可以得出一个结论：如果我们把User-Agent标识成了Chrome 和 Firefox 浏览器，那么最好 windows 系统 WebGL vendor 设置为Google Inc. 比较合理。高手 User-Agent 配置不得不熟悉首先，我们来了解一下什么是 User-Agent。 User

css3字体背景颜色跑马灯

阅读更多关于 css3字体背景颜色跑马灯

页面效果 CSS .title { border: 0px; font-size: 200%; font-weight: bold; float: left; line-height: 1.5; width: 100%; padding-left: 5px; margin-top:0px; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 7s infinite linear; } @keyframes

个人练习：使用HTML+CSS制作二级菜单

阅读更多关于个人练习：使用HTML+CSS制作二级菜单

最近一直在学习HTML+CSS，刚看完如果制作下拉菜单部分，就想着做一个练练手。先上成品图：就是上面这个效果，横向菜单选项能点击，鼠标放在上面也能展开二级菜单，二级菜单也能点击，点击后就会在底下的<iframe>中打开网站链接。（可能这里会有人好奇"为什么不点开哔哩哔哩你不是都放在上面了嘛！"，实际上我这边点开哔哩哔哩它会跳转两次，先在<iframe>中打开一次，然后又会在当前页面转到哔哩哔哩，你得后退一次才能看到在<iframe>中打开的哔哩哔哩_(:з」∠)_）那么不废话了直接切入正题。我的设想是创建两个<div>，宽度都是占100%，顶上的<div>放菜单栏，下面的<div>专门放<iframe>（这里先给两个区域设置背景颜色好分辨）： 1  2 < div class ="topMenu" > 3 4 </ div > 5 6  7 < div class ="mainContent" > 8 9 </ div > HTML部分底端的<div>区域我希望高度是除去顶端元素后剩余的所有部分，这里就用到了CSS3中的一个函数calc()。： 1 /* 清除文档内外边距，让<div>区域能够紧贴浏览器边缘 */ 2 body { 3 padding : 0px ;

订阅 webkit