前端框架:jquery,react,angular,vue
UI框架/UI库:
| | |
| ———— | ———— |
| | |
| | |
css框架:
分类:前端
npm install 或者 npm start 一直卡住
npm install 或者 npm start 一直卡住
国外镜像就是不行,我试了n多方法,用vpn,命令行代理设置,都不行,最后换淘宝镜像,立马能用。
npm config set registry https://registry.npm.taobao.org
1
– 配置后可通过下面方式来验证是否成功
npm config get registry
1
2
然后 npm install
表单提交方法有三种
表单提交方法有三种,主要说下第三种
第一种:用 form 自带属性action 提交
第二种:用 jquery 提交:$(“#formid”).submit();
第三种:用 ajax 提交:
但如果form表单中数据很多时,不可能一一列出,只需要用
$(‘#yourformid’).serialize()就可以了
举例如下:
$.ajax({
cache: true,
type: “POST”,
url: ajaxCallUrl,
data: $(‘#yourformid’).serialize(),// 你的formid
async: false,
error: function(request) {
alert(“Connection error”);
},
success: function(data) {
$(“#commonLayout_appcreshi”).parent().html(data);\
}
});
第四种,H5新对象FormData
typescript编译(语法转换)
参考:http://www.cnblogs.com/xuanhun/p/6027624.html
使用vscode遇到的问题:
1.按Ctrl+Shift+B编译时,提示error TS5023: Unknown option ‘p’ Use the ‘–help’ flag to see options.通过不了,生成不了js文件及map文件
解决方法:删除C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.0这个系统默认的版本,重启vscode.
jQuery ajax – load() 方法
$(“#feeds”).load(“feeds.php”, {limit: 25}, function(){
alert(“The last 25 entries in the feed have been loaded”);
});
这样可以在后台管理系统中,左侧菜单栏可以这样异步加载,右边是iframe即可.
js
-
return {
init:init
};//返回对象,第一个init是对象名(普通字符串),第二个init是值(由具体的上下文参数决定内容) -
闭包的写法:(function(){})();
实际上是这样的匿名简写:function a (){}; a; -
prototype可以向对象添加属性和方法;
var obj=new object();
obj.prototype.newname=123;
console.log(obj.newname)://123
ps-cc-2017
Bootstrap
1.包含三个文件夹 css、fonts、js。
2.https://www.shiyanlou.com/courses/50/labs/222/document
3.viewpoint的meta标签,可通过js来修改viewpoint后面的值
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
“`javascript
3.手机独立像素是相对的,在安卓中规定,160dpi下,1dp=1px;在320dpi时,1dp=2px;
在软件中直接使用dp作为单位,在web中的css样式中px指的是css像素(也是一种虚拟像素),在物理端显示的时候会根据不同的分辨率对应不同的物理像素,1px=2pixels,前一个px指css像素,后2个px指物理像素;
物理像素:设备的实际上的一个像素点;
独立像素:设备中规定的一个虚拟像素,比如一个独立像素对应两个物理像素,使用时使用有独立像素,显示时自动转换.
css像素:web中使用,也是一种虚拟像素,在设备中会实际转换成物理像素.
http://www.cnblogs.com/chengkun101/p/5461500.html
http://www.cnblogs.com/yaozhongxiao/archive/2014/07/14/3842908.html
http://blog.csdn.net/u014623470/article/details/49784573
http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html
ppi计算方式:
勾股定理算出对角线的分辨率:√(1920²+1080²)≈2203px
对角线分辨率除以屏幕尺寸:2203/5≈440dpi。
4.利用@media实现自适应排版:
```css
@media screen and (max-width: 600px) { /*当屏幕尺寸小于600px时,应用下面的CSS样式*/
.test {
background: blue;
}
}
5.删格布局:http://v3.bootcss.com/css/#grid
6.图标:http://v3.bootcss.com/components/,复制类名就能使用
7.bootstrap组件,尽量使用它提供的html结构.
8.也有很多插件,比如弹出,警告.
css
- 派生选择器:通过上下文来确定元素的选择器:.nav h1{}
- 盒子模型的四个组成:margin(外边距);border(边框);padding(内边距);content(内容)
- CSS 有三种基本的定位机制:
普通流:
元素按照其在 HTML 中的位置顺序决定排布的过程
浮动:
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。普通流元素视它为与文档无关,但其他浮动流认为有关。
绝对定位:
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。 -
相对位置:指相对于当前元素默认时的位置,然后使用top,right,bottom,left偏移
- 圣杯布局:http://www.jianshu.com/p/f9bcddb0e8b4
- 内联元素通过:display:block转换块元素,
块元素通过:display:inline转换内联元素.
“`javascript
block元素的特点是:
总是在新行上开始;
高度,行高以及顶和底边距都可控制;
宽度缺省是它的容器的100%,除非设定一个宽度</li>
</ol><p><
div>,
,
<
h1>,
<
form>,
<
ul>和<li>是块元素的例子。
inline元素的特点是:
和其他元素都在一行上;
高,行高及顶和底边距不可改变;
宽度就是它的文字或图片的宽度,不可改变。
<span>, <a>, <label>, <input>, <img>, <strong>和<em>是inline元素的例子。
“`
7. h1:36px;h2:30px;h3:24px;h4:18px;h5:14px;h2:12px;
small元素标签显示小标题
html5
- HTML5 中的一些有趣的新特性:
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素,比如 article、footer、header、nav、section
新的表单控件,比如 calendar、date、time、email、url、search - 使用canvas:
var c=document.getElementById(“myCanvas”);
var ctx=c.getContext(“2d”);