前端
文章平均质量分 70
普通网友
这个作者很懒,什么都没留下…
展开
-
Web 前端开发代码规范(基础)
一、 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护。 二、 HTML/CS...转载 2019-08-30 14:02:04 · 495 阅读 · 0 评论 -
从零开始学习前端开发 — 4、容器溢出
一、容器溢出 语法:overflow:visible | hidden | scroll | auto | inherit; visible:默认值,溢出内容不会被裁剪,正常显示 hidden: 溢...转载 2019-08-30 14:59:57 · 86 阅读 · 0 评论 -
HTML篇(下)
13.Label的作用是什么?是怎么用的? label标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单事件上。 <label for="Name">Num...转载 2019-08-30 15:49:20 · 85 阅读 · 0 评论 -
浅谈,htmlcss脱离标准文档流相关
(个人知识有限,难免有误,请见谅) 标准文档流,顾名思义,是要按照一定规矩排列的,默认的就是元素会从左至右,从上至下排列,块级会独占一行,行内元素会和小伙伴们共享一行。 本来在标准文档流下...转载 2019-08-30 16:26:36 · 83 阅读 · 0 评论 -
Web前端体系的脉络结构
Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学...转载 2019-08-30 17:21:01 · 155 阅读 · 0 评论 -
css中的相对定位与绝对定位
之前说过了CSS有三种基本的布局机制:普通流、浮动和绝对定位。除非专门指定,否则所有的框都在普通流中定位。而普通流中元素框的位置由元素在HTML中的位置决定。 相对定位 相对定...转载 2019-08-30 18:20:59 · 186 阅读 · 0 评论 -
关于embed的一些使用兼容
因公司需求,要做一个扫描语音播报的功能,所以用到一些音频/视频标签 考虑到 <embed> 标签对于ie的兼容性更好一些所以,我在这采用了 <embed> 标签,在使用中遇到的一些问题...转载 2019-08-30 19:14:28 · 1790 阅读 · 0 评论 -
AngularJS基于模块化的MVC实现
AngularJS基于模块化的MVC实现 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 ...转载 2019-08-30 20:16:49 · 82 阅读 · 0 评论 -
div水平垂直居中方法及优缺点
代码: <div class="father"> <div class="son"> </div> </div> 方案一: div绝对定位水平垂直居中【margin:auto实现绝对定...转载 2019-08-30 20:58:55 · 240 阅读 · 0 评论 -
前端程序员容易忽视的一些基础知识
基础数据结构与算法 现在有两个不同的JSON,比较复杂,可以参考这里的DEMO中返回的JSON。要比较它们的差异,除了用现成的工具如 beyond compare以外,如果我们的机器上没有安装这个工具...转载 2019-08-30 21:51:23 · 102 阅读 · 0 评论 -
css选择器补充
前面文章总结了常用的8种选择器,今天再来补充5中选择器,其中一部分是css3中新加入的。 1、相邻选择器 E+F{ sRules } 相邻选择符只会命中符合条件的相邻的兄弟元素。 2、兄...转载 2019-08-30 22:36:12 · 125 阅读 · 0 评论 -
rem自适应布局小结001
在最近的移动端布局当中,最炙手可热的方式便是使用rem进行元素的布局。以下便是从最近的文章中所总结出来的一点东西。 首先,我们必须有以下的疑问: rem的本质是什么? rem如何实现自适应布局? 如何...转载 2019-08-30 23:34:26 · 715 阅读 · 0 评论 -
浅谈css的行内类型标签和块级标签
常用标签的行内类型标签有:a、span、img;块级标签有:div、p、h1~6、ul、ol、li、dl、dt、dd。 行内类型标签的特征:标签的大小由标签的内容决定,不能设置width和height...转载 2019-08-31 08:48:05 · 274 阅读 · 0 评论 -
html5 兼容版本 video
<!-- first try HTML5 playback: if serving as XML, expand `controls` to `controls="controls"` and aut...转载 2019-08-31 09:23:37 · 232 阅读 · 0 评论 -
一道前端学习题
对于没参加过互联网企业招聘,或是没有参加过大型互联网企业招聘的人来说,能以这些公司的面试题做为锻炼,无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答),题目本身在现实中意义不大...转载 2019-08-31 10:01:35 · 96 阅读 · 0 评论 -
删除父级元素
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=...转载 2019-08-31 10:45:27 · 647 阅读 · 0 评论 -
Web前端攻防,一不小心就中招了
随着各浏览器安全功能的提高,前端防御面临的问题也没有之前那么复杂,但浏览器的防御措施并不能百分百的保证网站的安全。 浏览器的XSS Auditor,使得反射型xss几乎被废;CSP(Content-S...转载 2019-08-31 11:35:21 · 160 阅读 · 0 评论 -
背景图片自适应浏览器大小
背景图片自适应浏览器大小 之前在网上看到的一个小技巧,记录一下:背景图片铺满屏幕并且可以随着浏览器进行自适应,代码如下: <body> <div style="position:absolut...转载 2019-08-31 14:09:17 · 524 阅读 · 0 评论 -
不确定行数的多行文本垂直水平居中的css
ul li { position:relative; display: table; width:3rem; height:3rem; background:url('image/defaultBg....转载 2019-08-31 15:10:09 · 203 阅读 · 0 评论 -
Web前端体系的脉络结构
Web前端技术由 html、css 和 javascript 三大部分构成,是一个庞大而复杂的技术体系,其复杂程度不低于任何一门后端语言。而我们在学习它的时候往往是先从某一个点切入,然后不断地接触和学...转载 2019-08-31 15:55:52 · 113 阅读 · 0 评论 -
提升 Web开发性能的 10 个技巧
随着网络的高速发展,网络性能的持续提高成为能否在芸芸App中脱颖而出的关键。高度联结的世界意味着用户对网络体验提出了更严苛的要求。假如你的网站不能做到快速响应,又或你的App存在延迟,用户很快就会移情...转载 2019-08-31 16:46:16 · 148 阅读 · 0 评论 -
CSS3 按钮特效(一)
1. 实例 2.HTML 代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3...转载 2019-08-31 17:33:58 · 1174 阅读 · 0 评论 -
【转】META标签指南:哪些meta标签该用哪些不该用?
以下内容来源:http://lusongsong.com/reed/8766.html META标签是网页代码中HEAD区的一个关键标签,其提供的信息虽然用户不可见,但却是文档的最基本的元信息。说起m...转载 2019-08-31 18:32:02 · 221 阅读 · 0 评论 -
css实现图片横向排列滚动
.imageList{ overflow-x: auto; overflow-y: hidden; height:180px; white-space: nowrap; img{ width:auto...转载 2019-08-31 19:20:48 · 3736 阅读 · 2 评论 -
grid 布局的使用
grid 布局的使用 css 网格布局,是一种二维布局系统。 浏览器支持情况:老旧浏览器不支持, 概念: 网格容器。元素应用dispalay:grid,它是所有网格项的父元素。 ...转载 2019-08-31 20:02:17 · 337 阅读 · 0 评论 -
盒模型
标准盒模型: 因为 width = margin_box_width(left_width + right_width) + border_width + padding_box_width(left...转载 2019-08-31 20:58:09 · 77 阅读 · 0 评论 -
IPhoneX网页布局
IPhoneX全面屏是十分科技化的,但是由于其圆角和摄像头刘海位置以及操控黑条的存在使得我们需要去对其样式做一些适配,没有X的同学可以开启 Xcode 9 的iPhone X 模拟器作为学习和调试。 ...转载 2019-08-31 21:37:32 · 393 阅读 · 0 评论 -
bootstrap3中container与container_fluid的区别
.container与.container_fluid是bootstrap中的两种不同类型的外层容器,按照官方的说法,这两者的区别是: .container 类用于固定宽度并支持响应式布局的容器。...转载 2019-08-31 22:13:54 · 176 阅读 · 0 评论 -
CSS颜色表示
你可能会疑惑为什么我们使用6位数来表示一种颜色而不是只用一位或二位,答案是使用6位数可提供给我们巨大数量的颜色变化。 会有多少种可能的颜色?16 个值(0~F)和 6 个位置意味着我们有 16 的 6...转载 2019-08-31 23:06:24 · 197 阅读 · 0 评论 -
纯 CSS 解决自定义 CheckBox 背景颜色问题
CodePen 需要使用色 #ec6337(当然可以是任意颜色),解决问题:记住密码定制 CheckBox,解释全在注释里 主要使用到 ::before 或 ::after 伪类处理,伪装成内部的那个...转载 2019-08-31 23:43:51 · 2154 阅读 · 0 评论 -
CSS
1、css的简介 (1)什么是css 层叠样式表,css是对html进行样式修饰语言 层叠:就是层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的部分应用优先级...转载 2019-09-01 08:40:52 · 68 阅读 · 0 评论 -
一道前端试题
对于没参加过互联网企业招聘,或是没有参加过大型互联网企业招聘的人来说,能以这些公司的面试题做为锻炼,无疑是一种非常好的学习和进步的途径。下面是一道腾讯的前端面试题(JS解答),题目本身在现实中意义不大...转载 2019-09-01 09:45:48 · 74 阅读 · 0 评论 -
HTML
一、Html基本标签 1、文件标签(结构标签) <html>:根标签 <head> <title> : 页面的标签 <body> : 内容 属性: text : 文本的颜色 bgcolor : 背景色...转载 2019-09-01 10:32:05 · 80 阅读 · 0 评论 -
iframe的使用
1.父页面调用子页面的元素 $('a').contents().find("b") (a代表iframe的id或者class,b代表子页面) 2.子页面调用父页面的元素 $(window.pa...转载 2019-09-01 11:21:29 · 76 阅读 · 0 评论 -
你有学习者综合征吗?Web 开发是重灾区
【导读】:学习者综合征的主要表现:学而不用,不停学习,却没有真正实际应用知识来做东西。如果过去的一年里,学习的语言或框架超过三个,那可能已经感染学习者综合征了。Web 开发是重灾区咯。 你有学习者...转载 2019-09-01 14:05:38 · 124 阅读 · 0 评论 -
练习——设计中文报刊版式
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>设计中文版式</...转载 2019-09-01 14:54:47 · 273 阅读 · 0 评论 -
网页信息抓取
写了一个从网页中抓取信息(如最新的头条新闻,新闻的来源,标题,内容等)的类,本文将介绍如何使用这个类来抓取网页中需要的信息。本文将以抓取博客园首页的博客标题和链接为例: 上图显示的是博客园首页的DOM...转载 2019-09-01 15:32:15 · 224 阅读 · 0 评论 -
从cdn说起
为什么要使用cdn 雅虎军规有一条规则建议我们是用cdn。随便在网上搜索,可以找到使用的cdn的好处。 再次强调第一条黄金定律,减少网页内容的下载时间。提高下载速度还可以通过CDN(内容分发网络)来提...转载 2019-09-01 16:12:13 · 236 阅读 · 0 评论 -
《精通css》笔记
第2章 选择器,注释 1.要知道常用选择器(id选择器,类选择器,类型选择器,后代选择器,伪类选择器(文档结构之外)) 通用选择器(*{ }) 高级选择器(子选择器,相邻同胞选择器,属性选...转载 2019-09-01 16:55:00 · 84 阅读 · 0 评论 -
css三角形
css代码 .triangle-right{ height:0; width:0; border-top: 40px solid transparent; border...转载 2019-09-01 17:47:58 · 80 阅读 · 0 评论