webkit | 易学教程

HTML入门1

阅读更多关于 HTML入门1

一、网页的组成网页由文字、图片、输入框、视频、音频、超链接等组成。二、html，css，js的区别 Html 结构标准相当于人的身体，只有架构有结构 Css 表现标准相当与给人化妆变的更漂亮有衣服 Js 行为标准相当于人在唱歌，页面更灵动动起来三、常用浏览器 1.IE 火狐谷歌猎豹 Safari opera 2 . 浏览器内核：也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容，即浏览器的格式信息（浏览器的兼容性问题） IE 谷歌/欧鹏火狐苹果 trident blink gecko webkit 四、浏览器和服务器之间的关系浏览器通过http协议向服务器发送报文，服务器通过解析之后，响应报文，返回给浏览器。五、常用快捷键 Ctrl+c 复制 Ctrl+v 粘贴 Ctrl+s 保存 ctrl+x 剪切 ctrl+z 撤销一步 windows+d 返回桌面 windows+e 打开我的电脑 windows+r 打开运行 alt+tab 切换软件 ctrl+tab 软件文档之间的切换 f2 重命名 f5 刷新页面（制作网页的时候经常用）六、HTML 1. html ( Hyper text markup language ) 超文本标记语言。超文本：超链接。（实现页面跳转） 2. html结构标准 < ! doctype

博客园美化（最全）

阅读更多关于博客园美化（最全）

使用博客园快一星期了，看自己博客太单调了，就网上翻找别人的美化教程，自己钻研一整天，现在整理分享出来。首先要申请js权限，在设置选项，博客设置里，一般十几分钟就审核好了，如图背景图片设置先选择模板，选择SimpleMemory。注：后面的css代码是基于这个模板修改的新建一个相册，上传背景图片，尽量选清晰度高的。在相册那里点击查看图片会弹出一个很大的页面，右键图片，选择复制图片地址。然后将以下css代码粘贴到博客设置的页面定制CSS代码处，记得展开代码。 #google_ad_c1, #google_ad_c2 { display : none ;} .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { font-size : 14px

elementUI vue this.$confirm 和el-dialog 弹出框移动

阅读更多关于 elementUI vue this.$confirm 和el-dialog 弹出框移动

公司的elementUI 的Dialog 需要能移动, 原生的不能移动, 自己就开发了一个, 大家复制代码到html 里面就可以直接运行了. 调试了好久, 还能凑合用 <!DOCTYPE html> < html lang ="zh" > < head > < meta charset ="UTF-8" > < title > Title </ title >  < link rel ="stylesheet" href ="https://unpkg.com/element-ui/lib/theme-chalk/index.css" > < style media ="screen" type ="text/css" > #appLoading { width : 100% ; height : 100% ; } #appLoading span { position : absolute ; display : block ; font-size : 50px ; line-height : 50px ; top : 50% ; left : 50% ; width : 200px ; height : 100px ; -webkit-transform : translateY(-50%) translateX(-50%) ;

滚动条

阅读更多关于滚动条

限制高度，并允许出现滚动条 .my-container{ max-height:330px; overflow:auto; } 高度也可以用 calc() 参考 https://www.runoob.com/cssref/func-calc.html 修改原始的滚动条样式 .my-container::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar{width:0;height:0;} .my-container::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar-track{border-radius:5px;background:#ddd;} .my-container::-webkit-scrollbar,.pop .pop_content::-webkit-scrollbar-thumb{border-radius:5px;background:rgba(153,153,153,.5);} .my-container::-webkit-scrollbar:hover,.pop .pop_content::-webkit-scrollbar-thumb:hover{background:rgba(102,102,102,.6);} .my

常见的兼容性问题

阅读更多关于常见的兼容性问题

常见的兼容性问题浏览器有着大量不同的版本，不同种类的浏览器的内核也不尽相同，所以不同浏览器对代码的解析会存在差异，这就导致对页面渲染效果不统一的问题。初始化样式因浏览器兼容的问题，不同的浏览器对标签的默认样式值不同，如果不初始化会造成不同浏览器之间的显示差异，布局出现错乱，所以要初始化样式，达到统一的布局。最粗暴的方案就是使用 * 初始化样式，但是其会对于所有的标签加载样式以及计算样式优先级，可能会对性能有所影响。 * { margin: 0; padding: 0; } 通常使用 Normalize.css 抹平默认样式差异，当然也可以根据样式定制自己的 reset.css 。 <link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet"> 内核样式兼容在 CSS3 标准还未确定时，部分浏览器已经根据最初草案实现了部分功能，为了与之后确定下来的标准进行兼容，所以每种浏览器使用了自己的私有前缀与标准进行区分，当标准确立后，各大浏览器将逐步支持不带前缀的 CSS3 新属性，目前已有很多私有前缀可以不写了，但为了兼容老版本的浏览器，可以仍沿用私有前缀和标准方法，逐渐过渡。内核代表浏览器前缀 Trident IE浏览器 -ms Gecko Firefox

CSS 伪类修改input选中样式

阅读更多关于 CSS 伪类修改input选中样式

主要是用到了after伪类和字体符号。 1 input { 2 -webkit-appearance : none ; 3 -moz-appearance : none ; 4 appearance : none ; 5 display : inline-block ; 6 } 7 input:after { 8 content : "" ; 9 font-size : 18px ; 10 display : inline-block ; 11 width : 14px ; 12 height : 14px ; 13 line-height : 14px ; 14 text-align : center ; 15 border : 1px solid #666fff ; 16 vertical-align : bottom ; 17 } 18 input:checked:after { 19 content : "\2714" ; 20 } 1 < label for ="gender-male" > 男 </ label >< input id ="gender-male" type ="radio" name ="gender" value ="男" > 2 < label for ="gender-female" > 女 </ label >< input id =

flex布局语法+实例

阅读更多关于 flex布局语法+实例

一、什么是flex布局　　flex 是 flexible box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 flex 布局。你可以将前端页面想象成一个巨大的容器，里面装满了各式各样的盒子元素，为了方便元素排列布局，css引入弹性布局。即设置了弹性布局的元素，他的大小和对齐方式将更加灵活的随着他所处空间的大小而改变。任何元素都可以使用flex布局，不区分行内、块级元素。注意：webkit 内核的浏览器，必须加上-webkit前缀。且设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效。二、flex布局中的基本概念　　1.容器　　　　采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。我更喜欢称为父容器和子容器。容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。　　2.轴线　　　　容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end

flex布局

阅读更多关于 flex布局

我才不会说是因为自己对 flex 一知半解导致面试的时候被问住，所以才来记录的。感谢阮一峰大神的博客文章 9102年了，是时候记录一波 flex 布局了。写在前面，其实 flex 布局并没有多难，记住一些属性即可。然而之前由于自己懒癌作祟，导致总是对 flex 一知半解。面试的时候，不能说挂在这道题上，但总是答得不好。 HOW 为一个元素设置 display: flex 即可 .box { display: flex; display: -webkit-flex; } 采用 flex 布局的元素，成为 flex 容器，子元素称为 flex 项目容器默认存在两根轴水平的主轴 main axis 垂直的交叉轴 cross axis 主轴开始位置叫做 main start ，结束位置叫做 main end 交叉轴开始位置叫做 cross start ，结束位置叫做 cross end 项目默认沿主轴排列容器的属性 flex-direction：决定主轴的方向 row：默认值，主轴为水平方向，起点在左端 row-reverse：主轴为水平方向，起点在右端 column：主轴为垂直方向，起点在上沿 column-reverse：主轴为垂直方向，起点在下沿 flex-wrap：默认情况下，项目都排列在一条线( 轴线 )。 nowrap：默认，不换行 wrap：换行 wrap

学习前端的未来在哪里？今天详细的谈一下

阅读更多关于学习前端的未来在哪里？今天详细的谈一下

以下我说的都是个人观点，比较宏观粗浅，主要针对的是前端工程师本身，没有深入技术和业务细节，请谨慎参考。职能概览前端工程师首先是个程序员，其次也是个软件工程师，他们工作在离用户最近的地方，负责人机交互和用户体验，虽然叫“前端”，但其实他们的工作边界其实已经很宽了。展望未来，我想前端的工作会继续分化，也会继续融合，分工是工业革命以来社会高效协作的主要推动力，以后很长一段时间应该也会维持这种形态，融合的原始推动力也是提高效率。分化和融合是不断的演化和互吸收转化的，不过核心的东西我想还是不会有太大变化。观点 1.继续分化（领域、行业、技术栈） 2.继续融合（端技术、Web全栈技术、人工智能与端技术） 3.核心不变（计算机科学本质、软件工程思想与实践、程序员职业素养） 1. 继续分化领域前端领域会继续分化，例如阿里内部的前端就已经有中后台、图形、端技术、泛Node、开发者服务5个大方向了，每个大方向也会细分，举一些例子：中后台：有云控制台、信息&资产管理平台、内部研发&项目管理平台、人工智能&机器学习平台、数据研发分析平台，企业内部信息平台等。具体产品如阿里云控制台、ERP、PAI、DeepInsight、阿里内外、Basecamp等。图形：有基础图形库、3D图形、数据可视化、流程图等。具体产品如G2、DataV、阿里云城市大脑、滴滴智能交通调度图、双十一大屏等。端技术

网页播放器与播放器定制

阅读更多关于网页播放器与播放器定制

背景 H5支持了很多多媒体元素标签，至此可以很方便的使用video、audio等进行多媒体元素渲染。而在线视频、音乐等等，则更充分利用了此特性。实现网页在线音乐播放器或视频播放器也很简单，原理就是你的代码加网络的视频音频资源。方法这里我是用来做博客园个人主页的定制的，考虑加一个类似QQ空间的音乐播放器组件。当然，也可以加一下类似列表、播放模式等元素，也很简单，暂不赘述。代码 audio::-webkit-media-controls { 　　overflow: hidden !important } audio::-webkit-media-controls-enclosure { 　　width: calc(100% + 32px); 　　margin-left: auto; } 　　屏蔽下载，下载了就不好玩了。 <div id="mp3LjwSyt"></div> // 以上是html，我添加在了公告栏；以下是js var mp3Str = '<audio controls="" autoplay="" name="media" controls="controls" controlsList="nodownload" oncontextmenu="return false"><source src="xxx.mp3" type="audio/mpeg"></audio>

订阅 webkit