前端开发学习笔记(三)
来源:互联网 发布:江西财经大学网络教学 编辑:程序博客网 时间:2024/06/07 02:52
css部分
margin和padding的区别之一是margin有auto的取值,但padding则没有的。
在 CSS3 中为了区别伪元素和伪类,为伪元素使用了双冒号
-webkit-transform-origin 属性:
设置或检索对象以某个原点进行转换。该属性提供3个参数值,默认值为50% 50% 0;提供2个参数值,默认为50% 50%。如果提供2个,第一个用于横坐标,第二个用于纵坐标,第三个用于z轴。如果提供3个,第一个用于横坐标,第二个用于纵坐标,z轴默认为0。如果只提供一个,该值将用于横坐标;纵坐标默认为50%,z轴默认为0。
transform-origin(改变元素基点,默认点是元素的中心点):主要作用是让我们在进行transform动作之前可以改变元素的基点位置,因为我们元素默认基点就是其中心位置,换句话说我们没有使用transform-origin改变元素基点位置的情况下,transform进行的rotate,translate,scale,skew,matrix等操作都是以元素自己中心位置进行变化的。但有时候我们需要在不同的位置对元素进行这些操作,那么我们就可以使用transform-origin来对元素进行基点位置改变,使元素基点不在是中心位置,以达到你需要的基点位置。
transform的多种属性操作,例如rotate、scale、translate三种,但这里需要提醒大家的,以往我们叠加效果都是用逗号(“,”)隔开,但transform中使用多个属性时却需要有空格隔开。大家记住了是空格隔开。
-webkit-tap-highlight-color 属性:
改写iOS Safari中可点击元素的高亮颜色。该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。除了iOS Safari,大部分android手机也是支持的,只是显示效果有所不同。
nth-of-type与nth-child的区别:
其实区别很简单:
:nth-of-type为什么要叫:nth-of-type?因为它是以"type"来区分的。也就是说:ele:nth-of-type(n)是指父元素下第n个ele元素,而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele,若不是,则选择失败。appframe移动端框架:
css插件相关文件说明:af.actionsheet.jsactionsheet插件af.css3animate.jscss3动画插件af.passwordBox.js密码框插件af.scroller.js滚动插件af.selectBox.js选择框插件af.touchEvents.js触摸插件af.touchLayer.js触摸层插件af.popup.jspopup弹框插件
每一个手机应用,如果需要在众多的移动终端上保持一致的效果,UI适配是工作的重中之重。设计原理是为不同分辨率的系统,选取最贴近于人直观感受舒适度的一 个字体大小作为参考量。例如在320x480分辨率的手机上,采用16px大小字体作为参考量。在480x800分辨率的终端上,采用24px大小字体作 为参考量。一切元素的大小都是以参考量的相对比值来定义。在CSS里面对应的是em。那么在320x480分辨率下 1em=16px,在480x800分辨率下1em=24px。
SEO 优化部分
准确的页面标题:<title>标签(head 头部必须)<title>your title</title>
添加相应的页面关键词: keywords
说明
在 <meta name="robots"> 标记中不正确地使用 nofollow 或 noindex 属性值可能会显著改变您的网站的搜索引擎结果。
<meta name="robots"> 标记的其他有效属性值包括以下值:
follow 跟踪链接并分析目标网页。这是默认行为,并且可忽略。
index 将网页编入索引。这是默认行为,并且可忽略。
noodp 不使用 Open Directory Project 来创建内容描述。
noydir 不使用 Yahoo Directory 来创建内容描述。
noarchive 不允许搜索引擎显示内容的缓存版本。
cache 允许搜索引擎显示内容的缓存版本。
nocache 不允许搜索引擎显示内容的缓存版本。
详细信息
搜索引擎使用 Robots.txt 文件来确定应对哪些网页进行爬网。请确保在 <meta name="robots"> 标记中正确地使用 nofollow 和 noindex 属性。 nofollow 属性指示搜索引擎将当前网页的内容编入索引,但忽略该网页上超链接的目标。 noindex 属性指示搜索引擎忽略当前网页的内容,并继续将网站中的其他网页编入索引。
<meta name="keywords" content="your keywords">
页面描述内容 description
<meta name="description" content="your description">
定义网页作者 author
<meta name="author" content="author,email address">
定义网页搜索引擎索引方式,robotterms 是一组使用英文逗号「,」分割的值,通常有如下几种取值:none,noindex,nofollow,all,index和follow。
<meta name="robots" content="index,follow">
百度禁止转码
通过百度手机打开网页时,百度可能会对你的网页进行转码,脱下你的衣服,往你的身上贴狗皮膏药的广告,为此可在 head 内添加
<meta http-equiv="Cache-Control" content="no-siteapp" />
360 使用Google Chrome Frame
<meta name="renderer" content="webkit">
优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
JS部分
常看到一些大牛的JS源码 在function 前面加; ;function($,undefined) 是什么用处 ?比如;(function($){$.extend($.fn...在前面加分号可以有多种用途:
- 防止多文件集成成一个文件后,高压缩出现语法错误。
- 这是一个匿名函数,一般js库都采用这种自执行的匿名函数来保护内部变量 (function(){})()
- 因为undefined是window的属性,声明为局部变量之后,在函数中如果再有变量与undefined作比较的话,程序就可以不用搜索undefined到window,可以提高程序性能
Document、DocumentFragment、Element都实现了NodeSelector接口。即这三种类型的元素都拥有者两个方法。querySelector和querySelectorAll的参数须是符合 css selector 的字符串。不同的是querySelector返回的是一个对象,querySelectorAll返回的一个集合(NodeList)。
普通的dom对象一般可以通过$()转换成jquery对象。
下面是 XMLHttpRequest 对象的两个重要的属性:
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
0 0
- 前端开发学习笔记(三)
- 前端框架angular学习笔记(三)
- React前端开发学习总结(三)
- 小白web前端开发--学习笔记三
- 前端开发学习笔记
- 前端学习笔记-HTML(三)
- 前端开发学习笔记(一)
- Web前端开发学习笔记 (一)
- 前端学习(三)
- web前端开发学习笔记
- 前端开发学习笔记 - 链接
- 前端开发学习笔记一
- 前端学习笔记(三)——html
- google map开发学习笔记(三)
- Zigbee开发板学习笔记(三)
- google map开发学习笔记(三)
- 《敏捷软件开发》学习笔记(三)
- Android开发秘籍学习笔记(三)
- CPU流水线的探秘之旅
- 线 面问题
- quick-cocos2d-x实例之挑战记忆极限设计文档
- IE8支持function.bind()方法
- 基于花生棒在windows下小团队软件开发及web演示服务器的搭建
- 前端开发学习笔记(三)
- 直觉模糊C均值聚类与图像阈值分割
- 如何安装indy10
- UVa 12412 - A Typical Homework
- 【微信公众平台】订阅号无需认证获取自定义菜单功能
- PHP 二维数组根据某个字段排序
- 【linux】信号量的值定义
- Linux环境开发STM32,从环境到调试
- Jquery EasyUI---Datagrid右键菜单