css框架

【转】Python 之Web编程

被刻印的时光 ゝ 提交于 2020-04-07 10:45:39
转: https://www.cnblogs.com/chenyanbin/p/10454503.html 一 、HTML是什么? #   htyper text markup language 即超文本标记语言   超文本:就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素   标记语言:标记(标签)构成的语言   静态网页:静态的资源,如xxx.html   动态网页:html代码是由某种开发语言根据用户请求动态生成   html文档树结构图: 二 、 什么是标签? #   - 由一对尖括号包裹的单词构成,如<html> 所有标签中的单词不可能从数据开头   - 标签不区分大小写<html>和<HTML>,建议使用小写   - 标签分两部分:开始标签<a>和结束标签</a>,两个标签之间的部分,叫标签体   - 有些标签功能比较简单,使用一个标签即可,这种标签叫做自闭合标签,如:<br/>、<hr/>、<input/>、<img/>   - 标签可以嵌套,但不能交叉嵌套。如:<a><b></a></b> 三 、 标签的属性 #   - 通常是以键值对形式出现的,例如 name="alex"   - 属性只能出现在开始标签 或 自闭合标签中   - 属性名字全部小写,属性值必须使用双引号或单引号包裹,如:name="alex"   - 如果属性值和属性名完全一样

【zepto学习笔记01】核心方法$()(补)

霸气de小男生 提交于 2020-04-07 05:40:11
前言 在很久之前,我们项目有一个动画功能,功能本身很简单,便是典型的右进左出,并且带动画功能 以当时来说,虽然很简单,但是受限于框架本身的难度,就直接使用了CSS3的方式完成了功能 当时主要使用transform与animation实现功能,并且用了一个settimeout执行回调,然后此事便不了了之了 但是出来混总是要还的,这不,最近相似的东西又提了出来,我们当然可以将原来的那套东西拿来用,但是看着那个settimeout总是不是滋味,因为这样捕捉回调的效果以及可能引起的BUG大家都懂,于是就想使用transitionEnd监控动画结束再执行相关回调,于是便有了一个有趣的想法 当时的心声 嗯,不行,这次我要写一个通用的东西,他至少有这些功能: ① 我可以给他一个CSS变化属性 ② 我可以给他一个时间长度 ③ 我可以给他一个动画曲线参数 有了以上东西我就可以让一个元素触发动画,并且对其注册transitionEnd事件,最后执行我们的回调,于是我基本就陷进去了 但是,我想着想着突然感觉不对,感觉以上东西好像在哪里见过,于是一个叫 animate 的东西冒了出来 突然一刹那,我有一个不妙的感觉,搞出来一看: animate animate(properties, [duration, [easing, [function(){ ... }]]]) ⇒ self animate

6.28—050—周五

微笑、不失礼 提交于 2020-04-03 04:42:52
今日所学内容:前端     一、HTML5       1、转义字符       2、指令       3、标签     二、css       1、css 书写位置 行间式 | 内联式 | 外联式 前端:   学习前端目的:为我们开发的应用程序提供一个与用户进行交互的界面   前端分类:HTML5、CSS3、JavaScript三大部分   学习内容:HTML5、CSS3、JavaScript、jQuery前端框架及Bootstrap前端框架五个课程内容 一、HTML5   什么是HTML5 (HyperText Mark-up Language)   HTML5就是html语言,是一种标记语言,数字5是该语言的版本号;html语言开发的文件是以.html为后缀,制作运行在浏览器上展现给用户使用的前端界面,采用的语言是超文本标记语言(HyperText Mark-up Language)。   注:.html文件可以双击直接在浏览器中打开,被浏览器解析后显示给用户查看   如何学习HTML   学习方向:掌握转义字符、指令和标签三大组成部分   学习目的:通过标签知识完成搭建页面整体架构 1、转义字符   像后台开发语言的特殊字符\n一样,会被解析为换行,html5中也有很多特殊字符数字的组合,会被解析为特殊的含义     空格:&nbsp | 字符":&quot | 字符&:

CSS实现HTML元素透明的那些事

旧街凉风 提交于 2020-03-30 20:41:55
CSS实现HTML元素透明的那些事 CSS3草案中定义了 {opacity:<length> | inherit;} 来声明元素的透明度,这已经得到了大多数现代浏览器的支持,而IE则很早通过特定的私有属性 filter 来实现的,所以HTML元素的透明效果已经无处不在了。首先看看 A级浏览器 所支持的用 CSS实现元素透明的方案 : 浏览器 最低 版本 方案 Internet Explorer 4.0 filter: alpha(opacity=xx); 5.5 filter: progid:DXImageTransform.Microsoft.Alpha(opacity=xx); 8.0 filter: "alpha(opacity=xx)"; filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=xx)"; -ms-filter: "alpha(opacity=xx)"; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=30)"; Firefox (Gecko) 0.9 (1.7) opacity Opera 9.0 opacity Safari (WebKit) 1.2 (125) opacity 实际上在IE8中,-ms

兼容问题

一笑奈何 提交于 2020-03-30 18:30:27
1. HTML对象获取问题 FireFox:document.getElementById("idName"); ie:document.idname或者document.getElementById("idName"). 解决办法: 统一使用document.getElementById("idName"); 2. const问题 说明:Firefox下,可以使用const关键字或var关键字来定义常量; IE下,只能使用var关键字来定义常量. 解决方法: 统一使用var关键字来定义常量. 3. event.x与event.y问题 说明:IE下,event对象有x,y属性,但是没有pageX,pageY属性; Firefox下,event对象有pageX,pageY属性,但是没有x,y属性. 解决方法: 使用mX(mX = event.x ? event.x : event.pageX;)来代替IE下的event.x或者Firefox下的event.pageX. 4. window.location.href问题 说明:IE或者Firefox2.0.x下,可以使用window.location或window.location.href; Firefox1.5.x下,只能使用window.location. 解决方法: 使用window.location来代替window

Bootstrap框架

≡放荡痞女 提交于 2020-03-30 06:52:35
Bootstrap介绍 Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。 它是为实现快速开发Web应用程序而设计的一套前端工具包。 它支持响应式布局,并且在V3版本之后坚持移动设备优先。 为什么要使用Bootstrap? 在Bootstrap出现之前: 命名:重复、复杂、无意义(想个名字费劲) 样式:重复、冗余、不规范、不和谐 页面:错乱、不规范、不和谐 在使用Bootstrap之后: 各种命名都统一并且规范化。 页面风格统一,画面和谐。 Bootstrap下载 官方地址:https://getbootstrap.com 中文地址:http://www.bootcss.com/ 我们使用V3版本的Bootstrap,我们下载的是用于生产环境的Bootstrap。 Bootstrap环境搭建 目录结构: bootstrap-3.3.7-dist/ ├── css // CSS文件 │ ├── bootstrap-theme.css // Bootstrap主题样式文件 │ ├── bootstrap-theme.css.map │ ├── bootstrap-theme.min.css // 主题相关样式压缩文件 │ ├── bootstrap-theme.min.css.map │ ├── bootstrap.css │ ├──

浅谈前端工程化

一笑奈何 提交于 2020-03-29 22:59:37
这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段,基本上几个字就能说清楚: 传输层面:减少请求数,降低请求量执行层面:减少重绘&回流 传输层面的从来都是优化的核心点,而这个层面的优化要对浏览器有一个基本的认识,比如: ① 网页自上而下的解析渲染,边解析边渲染,页面内CSS文件会阻塞渲染,异步CSS文件会导致回流 ② 浏览器在document下载结束会检测静态资源,新开线程下载(有并发上限),在带宽限制的条件下,无序并发会导致主资源速度下降,从而影响首屏渲染 ③ 浏览器缓存可用时会使用缓存资源,这个时候可以避免请求体的传输,对性能有极大提高 衡量性能的重要指标为首屏载入速度(指页面可以看见,不一定可交互),影响首屏的最大因素为请求,所以请求是页面真正的杀手,一般来说我们会做这些优化: 减少请求数 ① 合并样式、脚本文件 ② 合并背景图片 ③ CSS3图标、Icon Font 降低请求量 ① 开启GZip ② 优化静态资源,jQuery->Zepto、阉割IScroll、去除冗余代码 ③ 图片无损压缩 ④ 图片延迟加载 ⑤ 减少Cookie携带 很多时候,我们也会采用类似“时间换空间、空间换时间”的做法,比如: ① 缓存为王,对更新较缓慢的资源&接口做缓存(浏览器缓存

最近关于css样式重构的一点心得体会

帅比萌擦擦* 提交于 2020-03-28 11:45:27
之前的项目一直都是基于bootstrap,elementUI这些已经很成熟的框架进行二次开发,要么就是一些很小的宣传页面,h5页面,或者结构相对简单的移动端。一直都没有机会对css的整体进行一个思考,这次正好有个整站的重构项目,让我对css模块化以及重用这些进行了一个很好的梳理。 很早以前就读过bootstrap的sass源码,当时就十分的震惊,仿佛打开了新世界的大门,原来css还可以这么玩?css原来也有模块化,原来也可以这么优雅?对比之下,自己写的,简直杂乱无章,一堆狗屎,重用性不行,后期不易于维护,扩展性也不行,这些都是一个很致命的缺陷,或许区分一个前端开发工程师的好坏从这方面就能够有一个很好的体现吧,同样一个页面,或许一个初级前端工程师和一个高级前端工程师都可以100%的还原出来,但是你是用1K的css代码写出来的还是用10K的css代码写出来的就有天壤之别,或许从数据上面来看只有9K的差距,但是如果考虑到用户流量的问题,这个就是很大的问题了。如果是个访问量100的小网站那么就是 900K,如果是像淘宝网这样的产品,那么差距就十分明显了。一个简洁可复用的css代码不仅可以节约大量的带宽,提高性能,同时也是工程化的需要。 开始的时候写的都是css,这个时候什么模块化啥的根本就不可能有很深刻的感觉,直到看了bootsrap源码后,开始使用sass

2014年最新前端开发面试题

白昼怎懂夜的黑 提交于 2020-03-27 18:58:58
PS:在其基础上完善了一些答案,增加一些问题 欢迎fork wj:) 目录 前言 HTML 部分 CSS 部分 JavaScript 部分 其他问题 优质网站推荐 前言 本文总结了一些优质的前端面试题(多数源于网络),初学者阅后也要用心钻研其中的原理,重要知识需要系统学习,透彻学习,形成自己的知识链。万不可投机取巧,只求面试过关是错误的! 面试有几点需注意:(来源程劭非老师 github:@wintercn) 面试题目: 根据你的等级和职位变化,入门级到专家级:范围↑、深度↑、方向↑。 题目类型: 技术视野、项目细节、理论知识题,算法题,开放性题,案例题。 进行追问: 可以确保问到你开始不懂或面试官开始不懂为止,这样可以大大延展题目的区分度和深度,知道你的实际能力。因为这种关联知识是长时期的学习,绝对不是临时记得住的。 回答问题再棒,面试官(可能是你的直接领导面试),会考虑我要不要这个人做我的同事?所以态度很重要。(感觉更像是相亲) 资深的工程师能把absolute和relative弄混,这样的人不要也罢,因为团队需要的你这个人具有可以依靠的才能(靠谱)。 前端开发面试知识点大纲: HTML&CSS: 对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、 选择器优先级及使用、HTML5、CSS3、移动端适应 JavaScript: 数据类型、面向对象

盒模型布局详解

柔情痞子 提交于 2020-03-26 07:56:40
一、盒模型之display(显示方式) 一、display组成部分解释 1、块(block):其可以独行显示并且其自身支持宽高,其中宽可以设置为默认,高可以由子级或内容撑开(可以嵌套所有类型但是其中的p段落标签一般只允许内联嵌套)。 2、内联也叫行(inline):其可以同行显示并且不支持宽高是因为其宽高是由内容决定的(一般嵌套内联)。 3、内联块(inline-block):包含块和内联的所有特点,但是如果设置了宽高的话就一定要使用设置的宽高,如果值设置一种则按比例缩放(一般只作为最内层级)。 <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <title>display</title> <!-- 默认值 --> <style type="text/css"> div { /*块*/ display: block; /*自适应父级可用content的宽度*/ /*width: auto;*/ /*默认0*/ /*height: 0px;*/ } span { /*内联*/ display: inline; /*不支持宽高*/ } img { /*内联块*/ display: inline-block; width: auto; height: auto; } </style> <!-- 验证宽高设置