一、你能学到什么？
①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性
css变量设置(两个布局都有的部分)
:root{
/ 左边栏宽度 /
--lw:300px;
/负左边栏宽度/
--lwf:-300px;
/ 右边栏宽度 /
--rw:400px;
/负左边栏宽度/
--rwf:-400px;
/ 高度 /
--height:300px;
}
二、圣杯布局的html和css代码
html部分
<div class="holyGrail">
<div class="hg_main">main</div>
<div class="hg_left">left</div>
<div class="hg_right">right</div>
</div>
css 实现对应的四个class
.holyGrail {
height: var(--height);
/ 留出左右两栏的布局 为了字体不被覆盖/
padding-left: var(--lw);
padding-right: var(--rw);
}
.hg_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.hg_left{
position: relative;
left: var(--lwf);
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.hg_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
height: var(--height);
background-color: brown;
}
三、双飞翼布局的html和css代码
html部分
<div class="doubleWing">
<div class="dw_main">
<div class="dw_con">main</div>
</div>
<div class="dw_left">left</div>
<div class="dw_right">right</div>
</div>
css 实现对应的五个class
.doubleWing{
padding-right: var(--rw);
}
.dw_left{
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.dw_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
background-color: brown;
height: var(--height);
}
四、学会两个布局的注意点
圣杯布局
在最外边的类（holyGrail）左右要留出左栏和右栏的宽度（使用padding-left，padding-right)
中间的div.hg_main放在最上面，优先渲染，中间div自适应，width为100%
左中右栏的div都设置浮动，左栏通过margin-left:-100%移动到和中间的div同一起点，然后通过position: relative;
left: -（左栏的宽度）；会移动到最外层div的左内边距的区域（中间div的左边）
右栏可以通过margin-right:-(右栏的宽度)；移动到最外层div的右内边距的区域（中间div的右边）
双飞翼布局
在中栏的div再加一个div,设置margin-left:左栏的宽度，这样可以省略左栏的div使用postion和left的属性移动
最外层的div可以不用预留左栏的位置了
五、两个布局的对比的优缺点
布局 优点 缺点
圣杯 无多余dom 当中间的宽度小于左右的宽度时，结构混乱
双飞翼 可以支持各种宽度，通用性强较强 需要多加一层dom
代码下载地址
记得一定要自己去实现一下
javascript中window.open()与window.location.href的区别
window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新
location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面
window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页
而window.open 是 window 对象的方法，是用来打开一个新窗口的函数
// 打开新页面
// 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗
window.open('./index.html');
// 在原窗口打开新页面
window.location.href＝"./index.html";
window.open()详解
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
参数解释： 三个参数
window.open 弹出新窗口的命令；
‘page.html’ 弹出窗口的文件名；
‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar=no 是否显示菜单栏，yes为显示；
scrollbars=no 是否显示滚动栏，yes为显示；
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
常用的js返回与刷新页面
在此用a标签举例
<a href="javascript: history.back(-1)">返回上一页</a>
<a href="javascript:history.go(-1)">返回上一页</a>
<a href="javascript:history.go(-2)">返回前两页</a>
<a href="javascript:location.reload()">刷新当前页面</a>
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>
js
// 刷新当前页面
window.location.Reload();
self.location.reload();
window.location.href = window.location.href;
弹性布局（Flex）
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
下面是一些弹性布局的基本语法：
两部分：
目录
介绍
目录
介绍
学习vue-router做的一些总结笔记，内容会持续更新！
目录
1、HTML和JS中使用router
2、动态路由
3、嵌套路由
4、编程式导航
5、命名路由、命名视图
6、重定向、别名
7、路由组件传参
8、导航守卫
9、路由元信息
10、过度动效
11、数据获取
12、滚动条位置
使用 vue-cli 创建 vue 项目：
cd 到指定的目录下 命令行输入：
vue init webpack-simple <项目名称>
根据提示设置Project name
设置Project description
设置Author
设置License
设置Use sass?
cd到刚刚创建的项目名称目录
命令行输入：npm install
等待安装完成后 执行 npm run dev 命令
注：以下部分练习是在https://jsfiddle.net 中进行
创建组件：（创建全局组件）
Html 部分：
<div id="app">
<div>练习</div>
<!-- 这里的 inline-template 取代组件函数中的 template:'' -->
<my-cmp inline-template>
<p>{{ status }}</p>
</my-cmp>
<hr>
<my-cmp inline-template>
<p>第二次使用{{ status }}</p>
</my-cmp>
</div>
Js 部分：
Vue.component('my-cmp',{
data: function () {
return {
status:'Critical'
}
},
methods: {}
});
var vm = new Vue({
el: "#app"
})
如果将data提取成公共的部分，则多次使用同一个组件则这部分数据在内存中使用的是同一块存储 如下演示：
html部分：
<div id="app">
<div>练习</div>
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
Js 部分
var data = {status:'Critical'};
Vue.component('my-cmp',{
data: function () {
return data
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
});
var vm = new Vue({
el: "#app"
})
上面的js代码当点击按钮的时候两个组件引用的数据均会发生变化
局部注册组件：
html部分：
<div id="app">
<div>局部注册组件练习</div>
<local-cmp></local-cmp>
<hr>
<local-cmp></local-cmp>
</div>
Js 部分：
var cmp = {
data: function () {
return {
status:'Critical'
}
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
};
var vm = new Vue({
el: "#app",
components:{'local-cmp':cmp}
})
环境搭建
首先在微信公众平台注册一个我们自己的账号：
根据注册提示完成注册
闲着没事儿写了个小 demo ，获取手机上已安装应用信息，系统应用和 非系统应用
MD5 SHA1 SHA256 签名信息 点击签名信息可复制到剪切板，
GitHub：https://github.com/sunan-n/GetAppInfo
如下图：
<span style="white-space:pre;"> </span>主要就是这个方法，传参数进来获取相应的签名类型 信息<br />
public static String getSignaturesInfo(Context context, String packageName, String tpye) {<br />
// //获取包管理器<br />
PackageManager pm = context.getPackageManager();<br />
//返回包括在包中的签名信息<br />
int flags = PackageManager.GET_SIGNATURES;<br />
PackageInfo packageInfo = null;<br />
try {<br />
//获得包的所有内容信息类<br />
packageInfo = pm.getPackageInfo(packageName, flags);<br />
} catch (PackageManager.NameNotFoundException e) {<br />
e.printStackTrace();<br />
}<br />
//签名信息<br />
Signature[] signatures = packageInfo.signatures;<br />
byte[] cert = signatures[0].toByteArray();<br />
//将签名转换为字节数组流<br />
InputStream input = new ByteArrayInputStream(cert);<br />
//证书工厂类，这个类实现了出厂合格证算法的功能<br />
CertificateFactory cf = null;<br />
try {<br />
cf = CertificateFactory.getInstance("X509");<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
//X509证书，X.509是一种非常通用的证书格式<br />
X509Certificate c = null;<br />
try {<br />
c = (X509Certificate) cf.generateCertificate(input);<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
String hexString = null;<br />
try {<br />
//加密算法的类，这里的参数可以使MD4,MD5等加密算法<br />
// MessageDigest md = MessageDigest.getInstance("SHA1");<br />
MessageDigest md = MessageDigest.getInstance(tpye);<br />
//获得公钥<br />
byte[] publicKey = md.digest(c.getEncoded());<br />
//字节到十六进制的格式转换<br />
hexString = byte2HexFormatted(publicKey);<br />
} catch (NoSuchAlgorithmException e1) {<br />
e1.printStackTrace();<br />
} catch (CertificateEncodingException e) {<br />
e.printStackTrace();<br />
}<br />
return hexString;<br />
}<br />
<br />1.集成高德地图发布版和调试版的sha获取的问题
调试版，进入 ~/.android
执行
keytool -list -v -keystore debug.keystore
可以获得sha
2.发布版的sha获取需要找到发布版的key文件，例如
/Users/aboc/keys/phpec/key.jks
然后执行keytool -list -v -keystore /Users/aboc/keys/phpec/key.jks
会需要输入密码，密码在项目
android/key.properties 这个文件夹中，但密码是在创建的时候生成的
3.安卓打包的签名就是上面文件里面显示的md5
可以使用 一.查询keystore的MD5
可以在运行窗口，定位到keystore所在的路径，(以android默认keystore为例)执行cd /Users/aboc/.android定位到.android下
执行下面这条语句后就能显示Key的所有信息
keytool -list -v -keystore phpec.jks
这个方法获取到md5
或者用这里的这个工具
https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在webjx.com大量的技术文档中，也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
一、 针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
IE6及其更低版本
width: 300px;
height: 150px;
}
margin: auto;
position: relative;
}
六、IE6双倍边距的bug
给此对象加上display:inline即可解决问题。具体介绍：
七、Box Model 盒模型bug的一般解决办法
八、两个层之间的3px间隙
传说中的“IE 3px bug”，解决的办法：
九、在IE中的HTML注释引起文字奇怪的复制
Duplicate Characters Bug很神奇。
十、图片替换技术
用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片. text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.
关掉css,然后看看头部会是什么样子的.本文由webjx.com整理，转载请注明出处！
十一、 最小宽度
IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
.container {
min-width:300px;
}
为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:
<div class="container">
<div class="holder">Content</div>
</div>
然后你需要定义外层div的min-width属性，本文由webjx.com整理，转载请注明出处！
.container {
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:
大多数文章中，我们并未特别注意CSS文件的可维护与可读性的问题，当完成一项前端的工作之后，许多人都会忘记该项目的结构与细节。然而代码并不是马上就能完全定型，在余下的时间里还有不断的维护工作，而这些工作也许不会是你自己完成。所以，结构优良的代码能很大程度上优化它的可维护性。下面列出四则技巧提高CSS文件可维护性的方法，以此作为指南，以一种较好的CSS样式组织习惯来进行WEB前端开发。
一、CSS样式文件分解
对于小项目，在写代码之前，按页面结构或页面内容将代码分为几块并给予注释。例如，可以分别将 全局样式、布局、字体样式、表单、评论和其他分为几个不同的块来继续工作。
而对于较大的工程，这样显然不会有什么效果。此时，就需要将样式分解到几个不同的样式表文件。下面的master stylesheet 就是这一方法的例子，它的工作主要是导入其他样式文件。使用这一方法不仅能优化样式结构，而且有利于减少一些不必要的服务器请求。而分解文件的方法就有许多种，master stylesheet 使用了最常见的一种。
@import "reset.css";
@import "layout.css";
@import "colors.css";
@import "typography.css";
@import "flash.css";
/ @import "debugging.css"; /
同时对于大型项目，你也可以加上CSS文件的升级标志或者一些诊断等其他措施，这里不再详述。大家注意在实现工作中总结与思考，也欢迎多参考webjx.com的相关文章。
二、为CSS文件建立索引
为了能够迅速的了解整个CSS文件的结构，在文件开头建立文件索引是一个不错的选择。
一种可行的方法是建立树形的索引，结构上的id 和 class 都可以成为该树的一个分支。
[Layout]
定义这样一个样式检索可以很有效的使其他人阅读学习你的代码变得容易。在制作大项目的时候，你也可以将检索打印出来从而在你阅读代码的时候方便查阅。您还可以参考下面的文章。
三、格式化CSS属性
当我们编写代码的时候，使用一些特殊的编码风格会对提高CSS代码的可读性有很大帮助。许多人都有各自不同的编码风格。一部分人习惯于将颜色和字体的代码放在前面，另外一部分则更喜欢将类似浮动和定位的更“重要”的属性放在前面。类似的，也可以将页面元素按照它在布局中的结构进行排序：
body,
h1, h2, h3,
p, ul, li,
form {
margin: 0;
padding: 0;
border: 0;
}
一些开发者用一种更为有意思的方法：他们将属性按首字母的顺序排列。值得注意的是，这样一种方法可能对某些浏览器会产生问题。不管自己的格式如何，你要确保你已经清晰的定义了这些格式方法。这样，你的同事在阅读你的代码的时候将会感谢你的努力。您还可以参考下面的文章。
四、合理的利用缩进
为了让你的代码给人感觉更为直观，你可以使用一行来定义大纲元素的样式。当指定的选择器里的属性超过三个的时候，这种方式将带来混乱。但是，适度的使用这种方式，你可以很清楚的区分相同类的不同点。
#main-column h1 { margin-bottom: 20px; }
#main-column p { color: #333; }
同时，样式修改的维护也是个比较麻烦的问题。很多人修改样式之后就忘记了，结果后来又发现修改的样式导致了页面出错，不得不苦苦寻找。因此，为修改的样式构建一个特殊的格式就很必要了。一种很简单的方式是，给修改过的样式缩进，同时，也可以使用一些注释（比如"@new"）来做一个标识。
display: block;
background-color: #ccc;
border-bottom: 1px solid #999; / @new /
margin: 3px 0 3px 0;
padding: 3px; / @new /
}
总的来说，只有建立一个合适的样式指南才会对样式表的可读性有所帮助。记住，移去每一个对你理解文件没有帮助的样式指南，避免对过多的元素使用过多的样式指南。然后，为了一个可读性可维护性良好的CSS文件而努力吧。不要忘记和webjx.com分享您的经验，欢迎参与评论
蓝蓝设计的小编 http://www.lanlanwork.com