弹性盒子简单笔记 [未整理]

1 appcan ide
2 弹性和子CSS
3 列表页
2016.6.23
CSS3 弹性盒子模型 flex
兼容浏览器
-webkit
-moz
-o
-ms

属性:
display:box;
-webkit-box
盒子模型属性配合box
盒子子类权重flex
盒子行内元素inline-box
box-orient用来确定子元素的方向。是横着排还是竖着走
属性horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
box-direction是用来确定子元素的排列顺序,可选值有:normal | reverse | inherit
其中
normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转
box-orient决定子元素的排列方式 水平or垂直 默认值inline-axis 所有属性值 horizontal|vertical|inline-axis|block-axis|inherit;
box属性 start | end | center | baseline | stretch
box-align start | end | center | justify
box-pack
(内容!!!的)对齐方式 比如baseline 不管父标签的边界在哪里 令内容对齐
box-lines是用来决定子元素是否可以换行显示其中single是默认值,表示死活不换行 multiple后,就多行显示了
box-ordinal-group (可以)决定box在父元素中的顺序 数值越小 越靠前
2016.2.24
———————————————————–
appcan的JS列表拖拽效果
appcan.optionList
列表类名scroll-bar
隐藏滑块类名scroll-right
可以在样式表中直接添加scroll-bar和scroll-right覆盖其原有的属性 有些难以覆盖的属性也可以在JS代码中修改其属性
scroll-right 包含一个float:left的块 可以直接写覆盖属性
———————————————————–
弹性盒子 实战进阶
弹性盒子中的 表现形式(display)为非box属性的元素 显示以原来的流体式布局标准 又内容撑开
弹性盒子中剩下的带有box属性的元素根据box-flex的值按权重分配容器中剩余的空间
弹性盒子配合绝对定位可以实现大多布局
-webkit-box-direction:reverse反向排列
当子元素横向排列时 box-align:center 可以使子元素可以使子元素间左边界对齐、中线对齐和右边界对齐 达到上下居中的效果
box-pack:center 可以使子元素间左边界对齐、中线对齐和右边界对齐 达到左右居中的效果
注意:当box-orient的值为vertical 时为纵向排列 box-align 和 box-pack 对应值得效果相反 二者同时使用可以达到子元素居中效果
appcan中的对应类名为
ub display:box;
ub-ac box-align:center;
ub-pc box-pack:center;
ub-ver box-orient:vertical;
官方文档
ub 元素采用弹性BOX布局
ub-rev 子元素反序排列
ub-con 在子元素中加入一个容器,用于避免内容引起子元素大小变化
对应CSS代码为position:absolute;width:100%;height:100%;
ub-ac、ub-ae 子元素垂直居中对齐和尾对齐
ub-pc、ub-pe、ub-pj 子元素水平居中对齐、尾对齐和两端对齐
ub-ver 子元素纵向排列
ub-f1 ub-f2 ub-f3 ub-f4 子元素占用区域份数
2、基石 (UI的分辨率适配)
每 一个手机应用,如果需要在众多的移动终端上保持一致的效果,UI适配是工作的重中之重。设计原理是为不同分辨率的系统,选取最贴近于人直观感受舒适度的一 个字体大小作为参考量。例如在320×480分辨率的手机上,采用16px大小字体作为参考量。在480×800分辨率的终端上,采用24px大小字体作 为参考量。一切元素的大小都是以参考量的相对比值来定义。在CSS里面对应的是em。那么在320×480分辨率下 1em=16px,在480×800分辨率下1em=24px。
通过这种方式,我们可以保证,同样代码的界面,在不同分辨率下都能够保持最贴近用户的交互效果。
UI 中,我们在中间件中为不同屏幕密度(单位尺寸中可显示的点数),默认定义好了字体,开发者不再需要在代码中引入ui-media.css文件,即使有新的 分辨率手机问世,也会自动适配。目前参照Andorid屏幕密度划分为低密度、普通密度、高密度、超高密度、超超高密度,分别定义字体为14px 16px 24px 32px 48px。
radio

++++++++++++++++++++++++++++++++++++++++
.radiobox1 {
width: 1em;
height: 1em;
}
.radiobox1 input[type=radio] {
-webkit-appearance: none;
background-color: transparent;
outline: 0 !important;
border: 0;
font-size: 1em !important;
}
.radiobox1 input[type=radio]:before {
display: inline-block;
text-align: center;
font: normal normal normal 14px/1 FontAwesome;
font-size: 1em;
font-weight: thin;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: rgb(212,212,212);
}
.radiobox1 input[type=radio]:checked:before {
color: rgb(0,111,200);
}
.radiobox1 input[type=radio]:before {
content: “\f1db”;
}
.radiobox1 input[type=radio]:checked:before {
content: “\f192”;
}
20160701 wamp2.2 php5.3.8
exit 和 die 在程序后续出错情况下 不能停止运行
php先执行编译 后执行语句
20160704
。。
20160705
输出错误信息 不嵌套
顺序执行
20160712
appcan使用总结2
★弹性盒子特别适用于移动设备 大多布局大小单位采用em 即当前元素的字体大小的倍数
一般选择为12px 24px 36px 一般屏幕越大 分辨率越大 字体像素越大
★固定宽高图片设置 如系统按钮 样式图片
使用块标签 设置背景图片 设置最小宽高 umh1~7 umw1~4 块内不加任何内容 以免撑开 图片资源地址用标签的style属性写background-image
基本配合样例 ub ub-img/ub-img1 umh1 umw1 配合样式
若图片小于设置宽高 设置ub-img标签
-webkit-background-size:contain;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
若图片大于设置宽高 可以设置ub-img1标签
-webkit-background-size:cover;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
也可以在div中放入一个背景图片当做默认图片(如找不到图片显示应用的logo) 在div中再加入要加入的图片
★.uinn1~4样式可以增加元素的内边距 但是千万不能和ub-fh一起使用
ub-fh样式为width:100%
☆但是background-clip有可能影响其效果 background-clip表示背景裁剪程度 即背景的作用范围
border-box padding-box content-box分别裁剪到边框 内边距 内容 裁剪到边框即边框算做内容 背景覆盖到边框
该样式一般配合border border-radius padding使用
★块标签中的内容最好用$.html();获取/设置 而input中的值最好用$.val();获取/设置
若父元素uinput配合子元素input 定义一个现实框 input设置disabled属性 其所有其他属性功能失效 如form提交
但input可以作为一个展示框 或用脚本取消disabled 令其激活实现其他功能
若为标注disabled的input设置点击事件 在一些移动适配中 可能不适用 事件不能触发
20160713 SNS
六度分割理论:并不是说任何人与人之间的联系都必须要通过六个层次才会产生联系,
而是表达了这样一个重要的概念:
任何两位素不相识的人之间,通过一定的联系方式,总能够产生必然联系或关系。
20世纪60年代,耶鲁大学的社会心理学家米尔格兰姆(Stanley Milgram, 1933-1984)就设计了一个连锁信件实验(Small world experiment)。
他将一套连锁信件随机发送给居住在内布拉斯加州奥马哈的160个人,信中放了一个波士顿股票经纪人的名字,信中要求每个收信人将这套信寄给自己认为是比较接近那个股票经纪人的朋友。朋友收信后照此办理。
最终,大部分信在经过五、六个步骤后都抵达了该股票经纪人。六度分割(也叫“六度空间”,Six degrees of separation)的概念由此而来。
这个连锁实验,体现了一个似乎很普遍的客观规律:社会化的现代人类社会成员之间,都可能通过“六度空间” 而联系起来,绝对没有联系的A与B是不存在的。
这是一个更典型、深刻而且普遍的自然现象。
LBS 地理信息服务
20160715
设计点击事件
点击按钮范围最好大一些 点击触发类 和改变div内容的类 最好不同
20160718
wamp2.2 php版本为5.3
die()中输出的变量若为int 不能正常输出 可以拼接一个任意字符窜 如下
die(’die:’$para);

CSS box-flex属性,然后弹性盒子模型简介 « 张鑫旭-鑫空间-鑫生活

<blockquote>张鑫旭的个人博客_web前端技术文章_CSS box-flex属性,然后弹性盒子模型简介</blockquote><p>来源: <em><a href=”http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%e5%b1%9e%e6%80%a7%ef%bc%8c%e7%84%b6%e5%90%8e%e5%bc%b9%e6%80%a7%e7%9b%92%e5%ad%90%e6%a8%a1%e5%9e%8b%e7%ae%80%e4%bb%8b/”>CSS box-flex属性,然后弹性盒子模型简介 « 张鑫旭-鑫空间-鑫生活</a></em></p> 

一、淡淡的开头语
昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马,于是习惯性谷歌之,真是不谷不知道,一谷吓一跳。倒不是该属性本身,而是此属性作为导火索,让我了解了下CSS3中新的盒子模型——弹性盒子模型(Flexible Box Model)。对于我这样的流体布局控而言,这种盒子模型的出现就好比打麻将杠上开花杠到绝张边七条,让人兴奋不已。在国外,弹性盒子模型早在去年就开始被提及,研究,与应用。然而,自己现在才第一次听到此概念,真是一不留神就out了,学习这东西,果然松懈不得。
本文内容叙述撇开以往顺流而下的方式,直接以box-flex属性为切入口,直入大本营,再铺开叙述。
添加于2014-11-30:本文已老,仅供参考。
二、box-flex属性(和谐版)
有道桌面词典显示,”flex”一词中文有“收缩”之意。不过,从此属性实际上产生的效果来看,无论怎样用“收缩”一词解释都显得很牵强。所以,这里,直接抛开字面意思,我们可以将”box-flex”理解为”房子-分配”。box为“盒子”的意思,我们可以理解为当下价格巨高的“房子”,”flex”指兄弟几个“分配房子”。
举个更实际点的例子:马林大叔省吃俭用一辈子,终于在上海郊外买了间150平米的商品房。后来,马林大叔想回老家养老,决定把房子分配给他的三个儿子。ok,先暂停下,这里提到的“房子”就是”box-flex”中的”box”,“分配”就是”box-flex”中的”flex”,于是,这个“分配房子”的举动就称为”box-flex”,而box-flex属性的值就是说的如何分配,分配比例是什么。oK,继续我们的例子,马林大叔的三个儿子分别叫做大马,中马和小马,其中大马已经结婚多年,有一堆双胞胎女儿,拖家带口的人多;而中马和小马是优秀的光棍人士。所以,大马要求分配更多的房子,最终,家人一番协商有了下面的分配结果,就是:
#大马 { 房子-分配: 2; }
#中马 { 房子-分配: 1; }
#小马 { 房子-分配: 1; }
我想,上面的分配应该很容易看懂的。房子分成了总共4份,其中有家室的大马分得其中的两份,而为国家省橡胶的中马和小马每人分得其中一份,于是用数值换算就是:
大马 = 150 * (2 / (2+1+1)) = 75(平米);
中马 = 150 * (1 / (2+1+1)) = 37.5(平米);
小马 = 150 * (1 / (2+1+1)) = 37.5(平米);
如果装换成CSS表示就是:
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { box-flex: 1; }
哇咔咔,box-flex的含义与作用理解瞬间柳暗花明:用来按比例分配父标签的宽度(或高度)空间。
box-flex的值为至少为1的整数时起作用。但是,仅仅一个box-flex属性是不足以实现子元素间的空间分配,因为还要看其老爸的意思。所谓,我爸是李刚,撞人很嚣张;恨爸不是刚,撞人心慌慌。只有老爸开口说:“这个房子现在你们随意分配。”其子女才能分配。
所以,父元素也是需要添加必要的声明的。此声明就是:
#father { display: box; }
似乎也可以是:
#father { display: inline-box; }
此声明好像是在说:孩子们,现在我把这个房子变成了可随意分配状态,非固定财产,你们可以自己协商分配了。
display: box;的声明其实就是弹性盒子模型的声明,此声明下的子元素的行为与表现与CSS2中的传统盒子模型的表现是有显著的差异的。
毕竟属于CSS3的东西,目前而言,仅Firefox/Chrome/Safari浏览器支持弹性盒子模型(IE9不详,Opera尚未),且使用的时候,需要附带私有前缀。就是诸如-moz-, -webkit-之类。
CSS实例
现在把上面的马林分房子的例子CSS实例化,看看在web页面上是个如何的表现://zxx:有把小说拍成电影的感觉,抠鼻
主要CSS代码如下:
.test_box {
display: -moz-box;
display: -webkit-box;
display: box;

}
.list {

}
.list_one {
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.list_two{
-moz-box-flex: 2;
-webkit-box-flex: 2;
box-flex: 2;
}
HTML代码如下:

1
2
3

结果如下缩略图: 从上图可以看去,老大大马确实分配到了2份的房子空间,而中马和小马均分到了一份房子空间。
您可以狠狠地点击这里:box-flex弹性布局测试demo
三、CSS box-flex属性(不和谐版)
继续上面马林大叔分房的例子。原本兄弟三人和和睦睦是一点问题都没有的,房子怎么分也基本都定下来了。然而,突然,事情起了波澜。老三小马突然有了个彪悍的女朋友,叫阿凤。小马本人对分配房子的大小是觉得无所谓的,即使两个人住,近40平米的屋子也足够了,何必为了这点事情伤了兄弟们间的和气。然而,小马的女友阿凤却是个吃不了亏的人,说什么也要争口气,于是,找来大马中马,强烈要求要加大他们房子的分配面积。
在大马,中马看来,阿凤还属于外来人,凭什么对他们兄弟的房子指手划脚,于是,没得妥协,于是,争执不断,于是,愈演愈烈,于是,不可开交。于是,有天,阿凤实在憋不住了,在厨房做菜的时候突然拿着菜刀跑出来,大声咆哮:“不管怎样,反正我家小马至少要50平米的房子,其余的怎么分是你们的事情,我不管,这是我的底线了,再低就没得商量!!”大马等被这架势吓住了,最终还是妥协了:小马就50平米(即使以后房子扩建还是50平米),剩下的面积大马,中马2:1比例再分配。于是就有:
#大马 { 房子-分配: 2; }
#中马 { 房子-分配: 1; }
#小马 { 房子-分配: 50m2; }
改编成CSS剧本就是:
#first_boy { box-flex: 2; }
#second_boy { box-flex: 1; }
#three_boy { width: 50px; }
还是不难理解,当子元素中有宽度值的时候,此元素就定宽处理,剩下的空间再按比例分配。
于是,此时,大马的房子大小是:(150 – 50) * (2 / (1 + 2)) = 66.7平米,中马分配房子大小是:(150 – 50) * (1 / (1 + 2)) = 33.3平米。
还是类似上面的demo,看看含有定宽元素的子元素是如何表现的。
新增CSS样式如下:
.list_w300 { width: 300px; }
HTML代码如下:

1
2
3

结果如下缩略图: 老三分得300像素的宽度,剩下的500像素宽度老大和老二2:1比例分配。
您可以狠狠地点击这里:含定宽元素弹性布局demo
然而,事情还没有结束。兄弟几个相处了一段时间后发现,偌大的屋子如果全部都是私有的话,会有诸多生活上的不便。所以,需要腾出些公共空间,给屋子透个气。咋办呢,老三小马的女友阿凤死活不妥协,没有办法,老马和中马只能牺牲自己的住所面积作为公共空间了。
反应到CSS上,大致就是增加了margin间距,如下HTML:

1
2
3

结果如下缩略图: 老大,老二的空间同时被压榨了,老大还好,原本比例高。只是可怜了二当家的,地方越来越小。不过,老二的隐忍换来了和睦,所做的牺牲没有白费。
四、爸爸其实很厉害,的说~
语言小知识:“厉害”用日语说的话,动漫里面经常用的比较文雅的就是“すごい”,现在年轻人常用的就是“スゲ”,还有一种说法“よくできるね”是一种称赞的说法,语气比较柔和。
弹性盒子模型下的爸爸(父标签)其实是很有货的,男人嘛,就应该这样,够沉稳够内涵。
爸爸肚子中的货有:box-orient, box-direction, box-align, box-pack, box-lines. 现在依次讲讲这里box打头的属性都是干嘛用的。
box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有:
horizontal | vertical | inline-axis | block-axis | inherit
其中,inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的,让子元素横排;而vertical与block-axis的表现也是一致的,让元素纵列。
我专门做了个demo页面,方便您查看各个值的行为与表现。您可以狠狠地点击这里:box-orient值作用测试页面
切换demo页面左边的单选选项卡(如果您的浏览器为Firefox/Chrome/Safari),就可以看到不同的box-orient属性值的行为表现了。//zxx:对比可以发现,Firefox下的display:box会收缩外框(有点display:inline-block的感觉),而Chrome则没有收缩。
点击左边的单选切换属性值 box-direction
box-direction是用来确定子元素的排列顺序,可选值有:
normal | reverse | inherit
其中normal是默认值,表示按照正常顺序排列。所谓正常顺序,就是我们看书写文字的顺序,从左往右,由上至下,先出现的元素,就上面或是左边。而reverse表示反转,原本从左往右应该是1-2-3的,结果显示确实3-2-1。
例如我们将此属性应用在我们一开始的分配房子的demo上的话,最后的显示就会如下缩略图——顺序反过来的: 相关CSS代码如下:
.test_box {
display: -moz-box;
display: -webkit-box;
display: box;
-moz-box-direction:reverse;
-webkit-box-direction:reverse;
box-direction:reverse;

}
您可以狠狠地点击这里:列表顺序反转显示demo
box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”,这跟Adobe的软件中的一些“对齐”是一致的,例如化妆大师photoshop中的图层-对齐:
对齐 photoshop 其中box-align决定了垂直方向上的空间利用,也就是垂直方向上的对齐表现。为了便于记忆,我们可以拿来和CSS2中的vertical-align隐射记忆,两者都有”align”,都是都是垂直方向的对齐;而剩下的box-pack就是水平方向的了。
box的可选参数有:
start | end | center | baseline | stretch
其中stretch为默认值,为拉伸,也就是父标签高度过高,其孩子元素的高度就多高,//zxx:以后等高布局不用愁了。start表示顶边对齐,end为底部对齐,center为居中对齐,baseline表示基线(英文字母o,m,n等的底边位置线)对齐。
为了直观的知道各个值的效果,我做了个可实时查看效果的demo,您可以狠狠地点击这里:css box-align各值效果demo
点击demo左边的单选按钮组,即可查看各个属性值的效果。 例如,选中”center”这个单选按钮,结果右侧的显示如下面的截图: 其他各个属性值的效果您可以自己点击查看(非IE浏览器),这里就不一一展示效果截图了。
box-pack
box-pack决定了父标签水平遗留空间的使用,其可选值有:
start | end | center | justify
就大部分的行为表现来说分别对应text-align属性的值:left | right | center | justify;但是,之所以box-pack不使用”left”, 而是”start”,是因为box-direction属性,这玩意可以反转原本的排列,原本的“左对齐”反转后结果是“右对齐”了,此时”left”显然就词不达意了,所以使用”start”更具有概括性,就是与父标签的起始位置对齐,从而不会产生语义与行为上的困扰。
为什么使用start而不是left 张鑫旭-鑫空间-鑫生活
其中”start”是box-pack属性的默认值,justify表示两端对齐。 为了方便直观的查看各个属性值的效果,我制作了与上面类似风格的demo,您可以狠狠地点击这里:box-pack属性值效果demo
下为选中end的界面截图缩略图: 貌似发现在Firefox浏览器下,justify是没有反应的,可能还未支持。Chrome浏览器表现良好。
box-lines
box-lines是用来决定子元素是可以换行显示呢?还是就算挤出油还是单行显示。两个可选值:
single | multiple
其中single是默认值,表示死活不换行,如下图所示: 设置box-lines:multiple后,就多行显示了。不过我自己测试了下,貌似现在无论是Firefox浏览器还是Chrome都不认识box-lines:multiple属性,是暂不支持呢,还是什么什么?
您可以狠狠地点击这里:看不到换行效果的demo
五、两个遗漏的属性
子元素除了box-flex属性,还有两个属性,box-flex-group和box-ordinal-group,其中box-flex-group的作用不详,貌似目前浏览器也不支持;box-ordinal-group的作用是拉帮结派。还是上面马林大叔分房子的例子。小马女友阿凤又不消停,眼瞅着大马的房子面积比自己大好多,心里不平衡,于是,就去拉拢中马,一起打大马房子的主意。这个“拉拢”就是这里的box-ordinal-group,拉拢的组织团伙是有一个数字级别的,决定了你这个组织的位置。
数值越小,位置就越靠前,这不难理解,第一组在最前嘛,随后第二组,第三组… 例如:box-ordinal-group:1的组就会在box-ordinal-group:2的组前面显示。于是,我们可以利用这个属性改变子元素的顺序。例如下面这个例子:
HTML代码如下:

1
2
3

相关CSS如下:
.list_one {

-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.list_two{

-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
box-ordinal-group: 2;
}
结果后面两个class为”list_one”的元素跑到前面去了。如下图所示:
改变列表的显示顺序 您可以狠狠地点击这里:box-ordinal-group分组改序demo
六、实际点的应用
如果您现在浏览器地址栏中的地址中含有”www.zhangxinxu.com”字样,并且浏览器为较新的Firefox/Chrome/Safari浏览器,那么您就可以在本页面上找到我做的应用。
咔咔,我就不卖卖关子了,我改变了相关文章某一处的显示顺序,就是随机文章。
随机文章 张鑫旭-鑫空间-鑫生活
但是在本文所在的页面上,随机文章第一个显示了(由于赞不支持换行,故垂直显示了)。
随机文章顺序第一 相关CSS代码如下:
.similarity ul{display:-moz-box; display:-webkit-box; display:box; -moz-box-orient:vertical; -webkit-box-orient:vertical; -o-box-orient:vertical; box-orient:vertical; }
.similarity ul li{-moz-box-flex:1; -webkit-box-flex:1; box-flex:1; -moz-box-ordinal-group:2; -webkit-box-ordinal-group:2; box-ordinal-group:2;}
.similarity ul li:last-child{-moz-box-ordinal-group:1; -webkit-box-ordinal-group:1; box-ordinal-group:1; }
七、参考文章
My CSS Wish List
The CSS 3 Flexible Box Model
Introducing the Flexible Box Layout module
-moz-box-flex
Flexible Box Layout Module W3C Working Draft, 23 July 2009

部分H5新标签整理

整理时间:2016.6.14

H5删除了许多CSS能够代替的标签和属性 新增了许多标签和方法替换用css js实现比较复杂的方法

新增语义化标签
section(块) article aside(文章说明) figure(独立单元) header footer nav hgroup(卵)

媒体标签
video标签
audio标签
embed标签

画布标签更加强大

mark:标注标签

iframe标签
新增属性
srcdoc 可以写标签内容 覆盖链接地址显示的内容 不知道啥用
seamless表示没有边框 让样式变成页面的一部分
sandbox表示安全级别高 不允许内容部分运行JS 提交表单 而且表示内容页面与本页面脚本语言不一致
sandbox 有4个值 表示允许JS 表单 同语言 打开外部链接

javascript属性
defer页面全加载完运行
asyn异步加载 加载完就运行

全局属性 所有标签都可以用
data-type为日后可能用到的数据起个名
spellcheck表单自动纠错 比如llike->like
hidden 代替css块的display方法
tabindex表示用TAB切换的顺序 比如填写表单的位置
contenteditable表示内容可以编辑
新增js属性 window.document。designMode = “on” 表示整个页面都可以编辑 不知道有啥卵用

LESS 将 CSS 赋予了动态语言的特性,如 变量, 继承, 运算, 函数. LESS 既可以在 客户端 上运行

响应式 针对不同设备转换页面的布局形式 以适应不同的设备 而不是重新制作一个页面

前端框架-bootstrap笔记(一

来源: 前端框架-bootstrap笔记(一) – 陶路博客

整理时间:2016-6-20 

    在制作Web页面时,前端人员都习惯为网站设置一个全局样式(reset.css)。那么在Bootstrap框架中也不例外。Bootstrap框架的核心是轻量的CSS基础代码库,他并没有一味的重置样式,而是注重各浏览器基础表现,降低开发难度。大部分前端人员都具有归零的思想,但实际你会发现,归零之后的样式在开发过程中会存在着潜在的问题,例如,在全局样式表中将em变成一个普通标记,明明应该是斜体,怎么就没效果了呢?

Bootstrap框架在这一部分做了一定的变更,不再一味追求归零,而是更注重重置可能产生问题的样式(如,body,form的margin等),保留和坚持部分浏览器的基础样式,解决部分潜在的问题,提升一些细节的体验,具体说明如下:

移除body的margin声明
设置body的背景色为白色
为排版设置了基本的字体、字号和行高
设置全局链接颜色,且当链接处于悬浮“:hover”状态时才会显示下划线样式
我们在Web的制作中,常常会碰到在一个标题后面紧跟着一行小的副标题。在Bootstrap中他也考虑了这种排版效果,使用了标签来制作副标题。
,这些强调类都是通过颜色来表示强调,具本说明如下:

.text-muted:提示,使用浅灰色(#999)
.text-primary:主要,使用蓝色(#428bca)
.text-success:成功,使用浅绿色(#3c763d)
.text-info:通知信息,使用浅蓝色(#31708f)
.text-warning:警告,使用黄色(#8a6d3b)
.text-danger:危险,使用褐色(#a94442)
.text-left:左对齐
.text-center:居中对齐
.text-right:右对齐
.text-justify:两端对齐

列表

Bootstrap对于列表,只是在margin上做了一些调整
在Bootstrap中列表也是可以嵌套的
通过给无序列表添加一个类名“.list-unstyled”,这样就可以去除默认的列表样式的风格,除了项目编号之外,还将列表默认的左边内距也清0了
.list-inline 水平列表 也可以说内联列表就是为制作水平导航而生。
对于定义列表dl而言,Bootstrap并没有做太多的调整,只是调整了行间距,外边距和字体加粗效果。
.dl-horizontal 水平列表 此处添加了一个媒体查询。也就是说,只有屏幕大于768px的时候,添加类名“.dl-horizontal”才具有水平定义列表效果。其实现主要方式:
1、将dt设置了一个左浮动,并且设置了一个宽度为160px
2、将dd设置一个margin-left的值为180px,达到水平的效果
3、当标题宽度超过160px时,将会显示三个省略号

代码

在使用代码时,用户可以根据具体的需求来使用不同的类型:
1、:一般是针对于单个单词或单个句子的代码
2、:一般是针对于多行代码(也就是成块的代码)
3、:一般是表示用户要通过键盘输入的内容
.pre-scrollable 限制代码块的高度 默认340px 一旦超出这个高度,就会在Y轴出现滚动条

表格

.table:基础表格
Bootstrap为表格提供了1种基础样式和4种附加样式以及1个支持响应式的表格。
.table-striped:斑马线表格
.table-bordered:带边框的表格
.table-hover:鼠标悬停高亮的表格
.table-condensed:紧凑型表格
.table-responsive:响应式表格
Bootstrap中紧凑型的表格与基础表格差别不大,因为只是将单元格的内距由8px调至5px
Bootstrap还为表格的行元素提供了五种不同的类名,每种类名控制了行的不同背景颜色
.active 表示当前活动的信息
.success 表示成功或者正确的行为
.info 表示中立的信息或行为
.warning 表示警告,需要特别注意
.danger 表示危险或者可能是错误的行为

表单

对于基础表单,Bootstrap并未对其做太多的定制性效果设计,仅仅对表单内的fieldset、legend、label标签进行了定制。
主要将这些元素的margin、padding和border等进行了细化设置。
当然表单除了这几个元素之外,还有input、select、textarea等元素,在Bootstrap框架中,通过定制了一个类名`form-control`,也就是说,如果这几个元素使用了类名“form-control”,将会实现一些设计上的定制效果。
1、宽度变成了100%
2、设置了一个浅灰色(#ccc)的边框
3、具有4px的圆角
4、设置阴影效果,并且元素得到焦点之时,阴影和边框效果会有所变化
5、设置了placeholder的颜色为#999
在元素上使用类名“form-horizontal”主要有以下几个作用:
1、设置表单控件padding和margin值。
2、改变“form-group”的表现形式,类似于网格系统的“row”
内联表单实现原理非常简单,欲将表单控件在一行显示,就需要将表单控件设置成内联块元素(display:inline-block)。
如果你要在input前面添加一个label标签时,会导致input换行显示。如果你必须添加这样的一个label标签,并且不想让input换行,你需要将label标签也放在容器“form-group”中
.sr-only 隐藏标签
属性multiple+form-control外面用form-group的块包围 用于select标签的多行显示
不管是checkbox还是radio都使用label包起来了
radio连同label标签放置在一个名为“.radio”的容器内
在Bootstrap框架中,主要借助“.checkbox”和“.radio”样式,来处理复选框、单选按钮与标签的对齐方式。
如果checkbox需要水平排列,只需要在label标签上添加类名“checkbox-inline”
如果radio需要水平排列,只需要在label标签上添加类名“radio-inline”
checkbox连同label标签放置在一个名为“.checkbox”的容器内

按钮

btn
btn btn-primary
btn btn-info
btn btn-success
btn btn-warning
btn btn-danger
btn btn-inverse
2016.6.17

表单

input-sm:让控件比正常大小更小
input-lg:让控件比正常大小更大
col-xs-2~7调整大小
这两个类适用于表单中的input,textarea和select控件
在Bootstrap框架中,如果fieldset设置了disabled属性,整个域都将处于被禁用状态
据说对于整个禁用的域中,如果legend中有输入框的话,这个输入框是无法被禁用的(卵)
.has-warning:警告状态(黄色)
.has-error:错误状态(红色)
.has-success:成功状态(绿色)
按钮图标has-feedback + has-error || has-error || has-success
使用了一个”help-block”样式,将提示信息以块状显示,并且显示在控件底部
大小
btn-sm
btn-lg
btn-xs
块状按钮 “.btn-block”+“.btn” 如btnbtn-primary btn-block
添加伪类 加类
.hover
.active
.focus
属性和类中分别加disabled区别
“.disabled”样式不会禁止按钮的默认行为,比如说提交和重置行为等。如果想要让这样的禁用按钮也能禁止按钮的默认行为,则需要通过JavaScript这样的语言来处理。对于标签也存在类似问题,如果通过类名“.disable”来禁用按钮,其链接行为是无法禁止。而在元素标签中添加“disabled”属性的方法是可以禁止元素的默认行为的
.reset清空表单信息

图片

属性alt=”140×140″ 表示大小
1、img-responsive:响应式图片,主要针对于响应式设计
2、img-rounded:圆角图片
3、img-circle:圆形图片
4、img-thumbnail:缩略图片

图标

在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效果。
名称为glyphicon-前缀+后缀 如glyphicon-cloud表示云朵
具体所有名字参见 http://getbootstrap.com/components/#glyphicons

PHP7新特性概括总结

PHP7对系统引擎做了大量优化工作

FACEBOOK的重构PHP引擎HHVM使其性能提高70% 使用PHP7开发程序响应速度提高将比HHVM更高

PHP7主要吸收了zend系统和FACEBOOK的HHVM系统的特性

PHP5.6-PHP7比较

PHP7 增加了捕获引擎出错 而非原来的致命错误

PHP中的变量在底层是一个zval的C指针的结构体动态分配一个内存 在PHP7中使用栈内存 节省了内存

数组键值生成HASH值 一般不会变 反复计算建的HASH值浪费资源 PHP7中将不变的键值储存起来 节省内存和运行时间

原版PHP版本存变量的HASHTABLE桶 每次存变量 申请一次内存 且不连续 PHP7中将一次性连续储存变量 所有变量占用一块连续的内存

原版PHP中 call_user_function is_array/int/string strlen defined 函数编程opcode函数

基础数据类型int float bool变成直接拷贝值

原版PHP使用C中的函数进行排序 PHP7重写了所有排序函数 preg_函数变成机器码

我对程序员工作的态度 – 陶路博客

来源: 对程序员工作的正确太度 – 陶路博客

    总有人说程序员苦逼 工作整天面对电脑 枯燥烦闷 这绝对是偏见!听到这些话整个人都不好了 其实大多数行业都是金字塔型的 有牛人 也有苦逼     

    下面是我对工作的看法

1.每天创造世界上没有的东西 

2.将生活信息数据化 对象化让我们更理性看到事物的本质 

3.说说和办公工具电脑的关系 有一个比较成功的程序员说过 电脑是一个完美的交流对象 我特别赞同 前提是你了解她 她不会闹脾气 不会无理取闹 对你的每条指令严格执行 除非错在你 不然你和电脑的组合就无敌了!每次都是你在拖她的后腿 ! 

4.还有 因为信息技术一直在发展 知识密集型行业的任何人必须保持学习的状态 有助于思维的开拓 在心的方面 防止衰老 保持热情 

有些偏激的人觉得程序员都是“方”的 两眼无神 要么胖死 要么营养不良骷廋病态 其实不然 大多优秀程序员都很有创造力 有自己鲜明个性 有许多你意想不到的爱好 比如绘画 健身甚至极限运动 

他们每天都在建造这个世界 让生活变得更舒适方便 

好了 说完了 想听也没有了 

因为现在很多人对这行业有偏见 所以 今天必须要来澄(jiao)清(bian)一下

陶路 — 2016.6.2

程序员的终极梦想:全自动化的生活

来源: 程序员的楷模:全自动化的生活-月光博客

    俄罗斯程序员实现了全自动化的生活,写了一堆脚本,会给老婆发加班短信、会在宿醉不醒时给自己请假、会自动根据邮件恢复客户的数据库、还可以一键远程煮咖啡。还原这一故事的GitHub项目已经成了这几天最为火热的项目之一,真是程序员们的楷模啊……
  GitHub上这个名为“hacker scripts”的项目收获7800多星,甚至超过了微软开源Visual Studio Code的受欢迎程度……
  这个项目,其实出自于一个“故事”——它原本来自于俄罗斯聊天记录收存网站bash.im上的一段聊天记录,由JitBit网站的Alex翻译为英文后,GitHub上这名为NARKOZ的用户试着还原出了故事中的相关脚本,其实更多还是起到分享这则故事的作用。
  以下是这段聊天记录的中文翻译
  (译文省略了一些编程和linux相关的专用名词和程序名,因为我也不是很了解。能看懂的应该都能看原文吧……)

   

是这样的,我们的构建工程师前段时间离职去了另一家公司,这货基本算是生活在终端里吧。这么说吧,如果有任何事情要花费他超过90秒的时间,他一定会写一个脚本来实现那件事情的自动化。
  总之,该程序员离职后,同事在他的电脑上发现了几个显眼的脚本。
  脚本1:拍老婆马屁
  这个脚本会给程序员的妻子发一条“今天加班”的短信,同时还会从文本库里随机选取一条加班理由,让短信每次都不一样。这个脚本通过定时任务来触发,如果在工作日晚上9点之后,这名程序员运维的服务器上还有正在运行的SSH进程时执行。
  脚本2:库马尔是个傻逼
  (库马尔是公司一个客户的数据管理员,从文件名就可以看出,这位工程师经常和他打交道… … )
  这个脚本会自动扫描程序员的邮箱,一旦发现有“库马尔”发来的新邮件时,会随即进一步扫描邮件内有没有出现“求助”“出问题了”“抱歉”等关键字,如果找到了这些关键字,系统就会自动连上客户公司的服务器,把(提到出错的)中间数据库恢复成最近的一个可用备份。然后自动回复一封邮件,内容是:“没事儿哥们儿,下次小心点啊。”
  脚本3 :请假
  这个脚本也属于定时任务,只会在工作日早上8点45分后服务器依然没有活动SSH进程时执行。运行后自动给公司发一封“今天身体不适”或“今天我在家上班”的邮件,同样会从文本库中随机抽选出一条请假理由附上。
  脚本4:老子要喝咖啡
  这个脚本在执行之后,会先精确等候17秒,然后打开一个SSH进程,远程连接到公司的咖啡机(妈蛋我们都不知道公司的咖啡机居然还有Linux系统)然后传送一堆代码过去,咖啡机就会煮一份中杯半咖啡因的拿铁咖啡,然后精确等待24秒后,再倒进咖啡杯里。为什么会有这么多奇怪的等待时间呢,因为这个脚本运行的全程,正好是这名程序员从自己的办公桌前起身,走到咖啡机所需要话费的时间。
  这么说吧,如果有任何事情要花费他超过90秒的时间,他一定会写一个脚本来实现那件事情的自动化。
  内容来源by @fall_ark

中国有哪些欧美国家没有的好处?这位外国姑娘的回答触动人心由

来源: 北邮趣味盒子2016 05 17

最近一位外国萌妹子爆红网络,12月在知乎上注册账号,目前粉丝已突破20万,人美,喜欢臭豆腐,喜欢广场舞,最重要的是中文好得过分!!!
本文根据知乎网友Negar Kordi的回答整理!
她叫Negar Kordi,
中文名:兰兰,
知乎昵称:吃货国的外国小公举
目前是宁波大学的留学生一枚。
在知乎上不仅说出了作为外国人对中国的一些看法,
还回答了很多中国网友常年来对外国人的一些疑问。
回答风趣幽默,
三观超正被诸多网友喜爱。

32fa828ba61ea8d30b42f42a900a304e251f58b8

 我们来看看小公举在知乎上的机智问答吧
小公举对中国的看法篇
1. 外国人来中国应该知道哪些生活常识?
01. 看到夏天撑伞的女孩子不要觉得太奇怪。
02. 中国人大声说话的时候不一定是在吵架。
03. 随地吐痰的人一般都是吸烟的,不吸烟的人不会随地吐痰。
04. 没有微信和支付宝的人在中国无法生存。
05. QQ比所有的网络通讯软件都好用,特别是视频的时候。
06. 中国人盯着你看的时候可能就是因为觉得你长得好看或者帅。
07. 有喜欢吃狗的,但是没见过吃猫或者婴儿的。
08. 不是每个人都会武功,但是数学真的都很好。9X7=63,居然所有人都知道!!!
09.中国人研究吃的时间和我们的政治家讲废话的时间一样多。
10.第一夫人是个大美女,主席是个魁梧的大叔。
11. 中国的火车就是没翅膀的飞机。
12.到处都在建设高楼大厦。
13.请一定要学会用淘宝和一些打车以及点外卖的软件,太方便了。
14.中国人不是都是我们看到的“asian”,有白人中国人,也有长的和俄罗斯人、土耳其人、伊朗人或者中亚人一样的中国人。
15. 不来中国你会后悔,不学中文你会被淘汰。
16.这个国家真的很棒,还不是完美的,但是伟大。
17.CHINA 和china 一样的美。
2.外国人来中国最大的改变是什么?
01.我在的城市有很多外国人,然后每次看见外国人我都会盯着看,心里会说:哇,老外!
02.说梦话是汉语。
03. 爱爱的时候说汉语,也会没事看看1024社区,好羞耻的感觉。
04. 爱吃麻辣烫、臭豆腐、珍珠奶茶和煎饼果子。会和同班男生开黑LOL,爱去KTV,绝对不错过每周五的湖南台。
05. 爱上知乎本来就很中国吧。微信玩很溜,没事去附近的人里挂着等周围人围观。陌陌上调戏妹子和汉子,微博里装正经。
06. 家里人看外星人一样看着我下意识用汉语和他们聊天。
07. 听到中国国歌会莫名其妙的激动起来。
08. 汉语脏话各种溜,感觉自己好没节操。
09. 回到自己国家还是喜欢去唐人街里逛,逛完之后出来感觉周围好陌生。看着一个个金发碧眼,心里会很想中国。
10. 无怨无悔的爱着这个娶了我的中国小伙,还想给他生猴子。
3. 活在中国,你感觉这个国家最让人不理解的是?
作为老外,我在中国生活了4年多,我有几个关于中国问题真的不解。
01.父母对孩子的爱。
中国父母对孩子的爱让我震惊和感动。中国孩子是最幸福的,因为有中国的父母。中国的父母大概是最幸苦的,因为他们定了很高的爱的标准。中国父母对孩子的爱为什么那么那么那么多,让我不解。
02.中国人的自信心太低让我不解。
中国现在是所有人会说到的国家。在我们国家,你如果还是说中国是落后的、穷的或者很差的国家,会有人去笑你的。因为我们知道中国现在是世界的明星。这个国家很能吸引大家的注意力。
但是中国人自信心真的还要高一点。我真的觉得你们不错了,不要太谦虚。给自己定了成为世界第一的标准没有错,但是还要超过所有国家很多,是不是对自己太严格了?给一些西方国家面子吧。
03.中国食物让人不解。
我想不明白的是,为什么你们会知道大闸蟹、鸡脚、牛肚、猪大肠、醉蟹还有很多东西会这么好吃?我没吃以前真的不敢吃的,吃完后我发现真的很好吃。我不解的是几万年前,你们和我们一样开始学习做菜的时候,你们为什么就知道好吃的东西这么多呢?
04.汉字让我不解。
有一天我在一张白纸上写了一个很大的“笑”,我突然发现笑字很像一个在笑的脸。我又写了哭字,然后我发现真的很像一个在哭的脸。我对自己的发现很吃惊。我以前就觉得汉字是图画,现在我明白了更多的汉字,我更确定汉字是图画。我们的文字是字母,那么为什么你们文字是图画呢?
05.中国的书让我不解。
中国很早就有了“阴阳”的说法。你们写在了书里。中国还有很多很厉害的书。很多外国老年人现在在读“the book of changes”,都说这本书是很厉害的。你们还有书叫“the art of war”。我不太确定这两本书的中国名字,但是他们是中国书。你们古代还有很多厉害的书,为什么会写出这些书,让我不解。
06.一些中国人让我不解。
我最近听到的说法是一些中国人叫自己的国家是“你国”或者叫“支国”,我查了下。然后我真的想不通。我不想说什么,我不解的是为什么没有人给说“你国”和“支国”的人找精神科医生?
07.中国成最大输家。
我开始以为是比赛的事情。后来发现不是。我们加拿大到处是“中国制造”,你们的高铁和一些高科技这么好。还有厉害的淘宝和很多的美食。我说过中国很多值得骄傲的地方,然后你们告诉我中国会成最大输家。请不要再说了,要不然让我们的政治家真的会相信了。他们不给我们做这些你们有的东西,我们已经很郁闷了。
08.最大的不解
我这么爱胡歌,他怎么能背着我找女朋友呢!我忍了这么久,还是没找到答案。
4.在中国,有哪些好处是欧美国家没有的?
01.中国真的是我觉得最安全的国家。
加拿大也安全,但是这个安全是因为人少,在加拿大被狼吃了的几率比被人伤害还要高。但是这么多人的中国,我五年来没有一次有过危险。
02.物价真的便宜。
我这么一个费钱的吃货一个月基本上花了吃的钱就是2000,只要不要吃的太夸张的东西,一般可以吃的很满足。穿衣服也是,有了淘宝,我觉得人生已经没有遗憾了。
03.听歌看电影很方便,不用担心版权的问题。
1024里有个叫技术讨论区的地方,里面可以找到最新的电影。不要问我一个外国妹子为什么会知道。
04.不要给小费的国家是世界上最好的国家。
05. 我觉得中国的基础设施真的很厉害。
比如铁路和公路还有出租车以及很多公园,真的很方便。最重要的是,我玩网络游戏感觉玩家特别多,很有意思。
06.中国人对我的异国风情很好奇,但是一般真的不会有让人不舒服的地方。
我去过一些其他国家,对外国人太不友好了。
07. 大家比较包容,不会像欧洲和加拿大一样的冷漠。
中国人其实真的挺热心的.也不会有很严重的社会问题,不会罢工和种族歧视,感觉比较的能理解别人。
08.吃的特别多,玩的特别多,看的特别多,中国真的很舒服。
09.懂了汉语之后发现中国人真的很幽默。
路上会有很多的中国人长的特别的帅,一种很不一样的亚洲风情,很喜欢。
10.其实我觉得这个国家真的挺伟大的。
如果你去看了黄山、长江、故宫还有很多的建筑和风景后你会真的感觉到文化很深历史很深,给人很震撼的感觉的。
11.会跳广场舞的我已经快忘记正经跳交际舞了。这算是个副作用。
5.中国现在有哪些值得骄傲的方面?
01.找工作最容易的国家。
我不是说找一个喜欢或者很多钱的工作。我的意思是工作机会。只要别太懒,在中国找工作真的很简单。很多人其实不是找不到满意的工作,很多人就是懒。我认为中国真的是现在世界上工作机会最多的国家。
02.快递速度很快。
中国这么大,快递只要不出现特殊情况,3天内就到了。在我们国家,3天内就到了的快递才是出现了特殊情况。一般一个星期左右。
03.中国的火车速度快。
宁波到北京2100公里,只要400元多,7小时到达。(有评论告诉我火车票是595元,距离是1365公里。我记的我买的时候价格确实是400多,距离是我在地图上按比例尺估计出来的。如果这里说的有问题,我道歉)
04.飞机安全。
中国的客机失事我估计是全世界最少的。不知道大家有没有注意到。有些人会说失事了政府会隐瞒,我只能说请你说话用脑子。
05.建筑水平。
中国人建设高楼和道路的速度很快。有一个72小时建成了一个大楼的视频在国外很火,地点是中国长沙。我知道很多人会说质量不好,但是我想说的是中国建筑水平其实是有名的好。这是西方社会的共识。中国建造桥梁和铁路的技术是全世界最好的。我在读高中世界历史的时候学到的。不相信的人自己去看书找下资料。
06.外语水平。
中国大概有4亿人在学习英语。如果以后这些人都能说不错的英语,那么中国会是全世界说英语最多人的非英语国家。当然这需要包括我在内的所有外教以及老师的努力。
07.商业水平。
我来中国开始最大的惊喜就是中国的商店居然晚上9点后还有这么多开着,周末居然这么多人开店。想想我们国家,真的都是泪。
08.治安。
这个14亿人口的国家让我感觉很安全。这真的是一个看不见的能力。想起我去过的这么多国家,我觉得中国真的很安全。
09.女人地位。
中国女性的地位可能不是全世界最高的,但是我觉得真的挺高的。最起码整体上我感觉大多数人对女性还是很尊重的。
最近我发现一个有意思的现象。很多中国人总是一直批评中国。我开始是觉得他们不爱中国或者太爱西方。后来我发现其实是他们给中国定了很高的标准。世界第一还不够,要比所有国家好出很多很多很多才行。有时候我觉得这才是最值得中国人骄傲的。
6.外国人怎么看中国菜?
01. 我来中国前只有在中餐馆里吃过中餐。
我们国家的中餐馆一直用很多的味精。然后我印象深刻的事情是每一道菜都很干。因为来中国后所有的菜感觉都有很多的水分,但是在外国感觉所有的菜都是水被吸干了样子。好难形容我要说的,你们尽量去理解下。
02. 国外的中国菜看上去更加的像泰国菜。
就是颜色和味道每道菜都差不多,吃多了感觉吃什么都一个味道。
03. 吃完中餐我们都会等Fortune Cookies,幸运饼干。
这个饼干里面有一个纸条,咬开后就能知道你运气怎么样。这是送的。所以很多人认为很有趣。但是我在中国从来没有看过,好像大家也不知道。
04. 我们在国外的中餐馆一定会点两道喜菜,宫保鸡丁和陈皮鸡。
然后会点炒面和饺子。我来中国后我觉得中国的炒面油太多了。
05.来了中国以后,我开始吃到很多很多的中国菜。
我感觉特别好吃的有:水煮鱼,番茄炒鸡蛋、红烧茄子,宫爆鸡丁。其实我觉得中国菜真的很好吃,但是很多菜也有点太油了。我觉得这和餐馆的水平有关系。
06.最近很爱吃红烧鱼和红烧鸡块。
刚刚学会了用手机点外卖,真的好开心。我还是很爱吃中国菜的。我听过一个人对我说,他说外国人用刀叉吃饭,刀和叉子都是武器,说明用刀叉吃饭的人还比较野性。我觉得这个观点很有趣,可以拿来做毕业论文的一个材料。其实我觉得用筷子吃东西的人都很聪明的,因为我就会用筷子。
回答网友对外国人的疑惑篇
1.外国人会要求代购哪些中国产品?
我在中国的主要任务可能就是给我老家的家人和朋友打听可以给他们带什么回去。自从我爸爸妈妈来了中国上海的城隍庙以后,他们希望所有的东西都能带回去。哈哈。
爸爸来中国后喜欢一些工具。比如修水管的和各种型号的榔头、扳手、在墙上打孔用的那种枪。淘宝里有卖一套的那种,大概500多。里面什么工具都有。在我们国家差不多要卖1500多人民币。妈妈好喜欢中国结和一些挂着饰品。我经常会给她买一点回去。
我经常被朋友要求给他们带中国的手机。牌子就不说了,价格是我们国家的一半左右。真的很棒。
我叔叔问过我能不能直接托运一辆中国品牌的汽车给他。。。。。这个真的办不到。我阿姨问过我怎么从中国代购一只熊猫。。。。。真的会吃竹子的那种。
我每次回去会在零食店里买很多中国零食给我的家人。我家里人每次都会让我带中国的海苔、月饼还有一些中国的坚果。我朋友让我带各种型号的照相机镜头。有时候会让我带一些玩具给他们的孩子。(镜头的是给伊朗人带的,那里很贵)
茶叶、瓜子、咪咪虾条200包、鞋子、好多包、各种奇怪口味的薯片(很多坐飞机的时候都碎了)、电磁炉、电子产品、鞋子还有一包风干的桂花花瓣。这是我今年寄回去的东西。
我一定要说一个我见过最奇葩的事:多伦多机场有段时间旅客出去前还要安检一次。一次一个在我后面的中国人带了一个报纸包好的完整的金华火腿(我真的不知道他开始是怎么带进机场的)。然后那天他被要求开箱检查。所有警察都围着他。一个警察问他这个是什么东西,那个中国人可能英语也不好,他想了很久说“it is a Chinese style leg”然后他就被警察叔叔带走了。。。。这个故事告诉我们:火腿一定要切成几块再放进箱子里。
2.外国人喜欢装逼吗?
我简单讲几个公认的外国人装B行为。我这里说的外国人指不是中国人的人,或者说就定义成讲英语的欧美国家的人吧。
01.种族主义者。
一开口就说:我们白人才是。。。。那些有色人种是。。。。这些人一般受的教育都很差,但是评论起其他国家或者其他人种的人很不礼貌。我们叫他们 white Trash 。
02.来到中国后有优越感的。
我很喜欢中国人对外国人友好的态度。中国人民一般都是很真诚的欢迎外国人的。我听过一个说法特别的让我感动:“只要你认同了中国文化,你就是中国人”,这个在人种认同和国籍认同的西方国家是不可思议的。但是我认为这才是真正正确的价值观,那就是文化认同。如果西方国家都是和中国一样的想法,可能就不会有这么多种族问题了。
但是很多来到中国的一些外国人不珍惜中国人民的友好,以为自己比别人地位高。我很讨厌这样不知道感恩的人。然后他们会各种批评中国,但是不思考原因。比如会说中国交通不好,空气不好,很脏,中国人粗鲁。但是你看到的中国只是一个很小的点。这个国家这么大,面积和欧洲差不多。你想一下,你怎么能看了伦敦的一个贫民区就说欧洲都不好呢?
所以以后遇见这样的外国人,不要生气。我们大家一起努力,好好建设国家,然后我们就静静看着他们装B。
03.在中国嘲笑你英语不好的。
我说的嘲笑是恶意的,就是你英语不好,就不和你说话或者表现的很讨厌你的。英语是很多人都会说的话。但是在中国你外国人请学会说汉语。汉语以后会比英语有用。中国人跟你说汉语是一个很好的学习机会。再说了,你外国人说英语我还觉得你外国人有口音呢。你外国人以后不说RP口音就不要说英语!来中国不说汉语,还嫌弃中国人英语不好的外国人,你咋不上天呢?
04.不喜欢我家歌歌(注:胡歌)的。
最后请记住一句话:鄙视装B的外国人是我们每个公民应尽的义务。
3.外国女性月经会痛吗?是什么情况?
我开始是用卫生巾,后来开始用棉条。在中国买棉条不太方便,所以改回卫生巾。一般不会运动太多或者喝很多冰的东西。我有时候会疼,不过一般都还好。周期都还挺准的。没有过中国闺蜜,所以不太知道她们具体和我们的区别。PS:真受不了中国电视里卫生巾广告。真的太直接了。
4.外国人腿是不是不怕冷?
其他国家我不知道,就说下加拿大吧(伊朗因为风俗和宗教原因是不可能让女生露腿的)
有一种东西叫面子,一些东方女孩子在冬天的面子是看谁穿的好,一些加拿大女孩子在冬天的面子是看谁穿的少。归根到底还是资本主义腐朽思想害了我们国家一些女洋鬼子。好想学中医,等她们这些人老了就可以靠给她们看风湿病赚钱了。
5. 外国人喜欢中国哪个歌手?
我不知道乐队算不算歌手。我现在很喜欢五月天和苏打绿。我还翻唱过“倔强””突然好想你“和”小情歌“,因为我觉得歌词很明白,写的也很感人,曲子也不是很难,发音对我们来说也不是很大的问题。所以我比较喜欢这两个中国乐队。
我是因为听了歌再去喜欢歌手的,我的口味不知道是不是很不好。很多人笑我了。因为我开始听的所有中文歌都是在给别人打电话的时候,电话里面的彩铃。然后我记住了几句歌词再去百度的。所以我当时很喜欢“兄弟抱一下”“千千阙歌”“小苹果”之类的。我也开始喜欢唱这个歌曲的歌手了。后来我开始越来越多的机会去听歌。我会去看电视剧和看中国的歌手在电视上唱歌。
现在的歌手我真的很喜欢的有下面几个:
01.李宇春。
她长的很帅气,歌曲也很欢快。还不错。不过很多人说她像男的,其实我觉得我很明显的看的出来她是一个女孩子啊。
02.宋冬野。
因为我有一次看了“快乐男声”,所以我听到了“董小姐”,后来我去找了很多他唱的歌。我特别喜欢他的声音,真的很有感觉。
03.Teresa Teng(邓丽君)
我真的太喜欢她了。我看过了她的故事和唱的歌曲。真的太中国了!她的故事真的很感人,最后在泰国去世了。我还记得她去世的日子应该是5月8日。我很推荐大家去听下她唱的歌曲,真的很美很美。
04. Leslie Cheung(张国荣)
我听不懂他唱的广东话的歌曲,我听过他唱的一些英语歌,比如“AmericanPie”,发音真的很好,也很动听。真希望他没有这么早的去世。
05.胡歌
我这个是认真在回答你们。因为昨天有一个人私信告诉我说胡歌在东方卫视唱歌。但是真的对不起,我觉得他不是真的在唱歌,是在张嘴没声音,然后后面的音乐配合了他的嘴。
我去搜索了一下他唱过的歌曲,还不错。不过,我认为,他不是一个真的歌手。我听说有一个好的设备和有技术的人,任何人唱歌的声音都可以变的很好的。昨天我不知道为什么,但是我认为他是在表演不是真的在唱歌,我真的有一点失望。
最后我想说,其实一个歌手在中国有没有很红,有一个很有意思的标准,那就是广场舞是不是很多在放他的歌。。。。。相信我啊,真的是这样的。我真的认为现在最红的歌手应该是唱广场舞配乐的那些人。
突然想起来快一个星期没跳广场舞了,好几个大妈给我发微信了,不知道回去跳的时候还能不能学会新的舞步,好紧张呢。
6. 中国男生为什么很少追到外国女生?
我不知道你是在哪里,但是我身边就有很多。我们学校里有好几个女孩子是和中国男孩结婚的。我在中国的民政局里一个登记阿姨还告诉我说“现在中国男孩子和外国女孩结婚越来越多了”。
如果你的城市不是很多外国人,那么你可能没有很多机会看到。如果你是在外国人比较多的城市,你应该可以经常看见。
国外的情况我不能总结,在伊朗,我看到很多很多伊朗女孩和亚洲脸的男生在一起,我知道里面很多中国人。在加拿大也有很多,不过我不确定他们是中国人还是加拿大国籍的中国人。
技术上说,女生是要等待男生追的比较多。当然我们不排除一些女生是主动的。但是更多的是男生主动。
所以如果你要去追求外国女孩,我认为你应该先知道自己哪里可能会让对方感兴趣。还有就是,你不主动,她是不知道的。
当然,我不知道你说的追求是哪种意思。如果你是想谈恋爱或者结婚,那么我觉得女孩子都是一样的。如果你是有其他的目的,那么我觉得我帮不了你,因为用物质也可以追求到一些外国的easy girl。
其实中国男孩有一个很好的优点。那就是他们谈恋爱的目的很多时候就是结婚,然后结婚了以后会去照顾他的妻子。这一点真的很好。
不好的地方可能就是有些人特别要面子,觉得男孩子一定要比女孩子全面优秀。这可能有时候会伤害女孩子的自尊心。但是我觉得真诚的去沟通,一定会收获你的爱情。
我们国家有一句谚语送给你:
no one was my meant to be until HuGe came to me.
祝你早点找到你的HuGe.
7.圣诞节送平安果是国外就有的,还是到了中国才有的?
我第一次来中国的时候过圣诞夜,然后路上收到了几个苹果。每个人都对我说,祝你平安,平安夜要吃苹果。加拿大过圣诞没有吃苹果的习惯。不过我觉得也没有问题啊,这个中国人自己创造的习俗很可爱啊。
很多中国情侣会在平安夜去宾馆过。我很佩服他们。因为他们不在家,就没有圣诞老人的礼物可以拿了。但是为了爱情,他们宁可不要礼物。
其实,我也知道很多人会嘲笑中国人平安夜吃苹果这件事。但是我认为文化是发展的,中国人平安夜吃苹果也算是对圣诞文化的贡献。你看,我们在中国餐馆里会吃完饭后吃幸运饼干,这也是我们自己创造的。
所以,没什么好嘲笑或者说“你看,中国人崇洋媚外学的不像,平安夜吃苹果,老外不吃,愚蠢”,说这句话的人我觉得就是心态不开放的。
就是一个节日而已,节日的目的就是快乐。我觉得平安夜吃苹果没问题啊,如果觉得高兴,我在中秋节就吃粽子,在端午节吃汤圆,或者让我老公吃榛子酥! 就是庆祝节日,放松一点吧。
8.外国女生也喜欢锥子脸吗?
ce00036e2435babf49.jpg
首先我想说的是,东亚人喜欢锥子脸是因为可能这样他们的五官会看上去立体一点。这个和审美有关系。
白人的五官比较立体,我们就算整容,一般也会整容的是五官,比如鼻子,嘴唇或者身体。很少看见有人是把脸的形状给变了。
其实我们很多人很羡慕亚洲人的鼻子,一些亚洲人的小鼻子真的很可爱。小的,很挺的鼻子真的很好看。
如果一个白人告诉你,我想把鼻子弄的矮一点,你不要觉得奇怪,其实他可能真的是这么想的。
还有一个,我们没有割双眼皮的手术。
其实很多白人也是单眼皮,但是因为眼睛比较深,所以看上去好像是双眼皮。文字不知道怎么形容。就是眼睛深,和眼窝产生了一个沟,不是真的眼皮是两层。这个和中国人说的双眼皮是不一样的。但是也有很多人是真的双眼皮。
最后说几个我们国家整容的项目。
我们喜欢把皮肤的颜色弄的深一点。
然后会有很多人去做脱毛的效果,所以现在白人不一定都是“老毛子”。
很多人会把鼻子弄的很窄;
也有人喜欢把嘴唇弄的大一点;
也有很多喜欢改造身体的;
现在很流行的整容手术是“种植头发”。
所以我们一般人很少对脸的形状会在意。因为不同地区的白人长的真的很不一样。所以大家都接受了一些很明显的特点,所以不太在乎脸的形状。如果有一天我真的要整容,我希望可以变黑一点,好喜欢深颜色的健康皮肤啊。
9.你知道哪些搞笑的英文名?
Sunny,我们国家基本没人叫sunny,因为是晴天出生的吗?
kobe,你自己觉得叫这个合适吗?
sweetie,不要太过分。
sugar,你还是叫sweetie吧。
melon,你想说你很瓜?
Angelababy,你试一试在我们国家大学里叫这个。我可以靠着收想打你的人的门票买辆车。
10.有没有觉得外国人比中国人开放好多?这个问题我真的要好好的回答下,我觉得我有责任纠正一些中国人对西方人错误的观点。
01.我们对性的态度是开放。但是!不代表我们很随意。
很多人看了电影和电视剧,然后就觉得我们很随便。这是不对的。因为你看的是电影和电视剧,不是纪录片。如果我们看了你们的一些家庭剧和一些飞来飞去的电影,就说中国人家庭不和睦,或者所有中国人都会飞,你会怎么想?
02.其实大多数西方国家的家庭是比较保守的。特别是有宗教信仰的家庭。
我们会有性教育,但是这不代表我们觉得性是很随便的事。正常家庭的父母会特别的关心孩子这些方面,这和中国家庭是一样的。一些年龄都不够去买酒和买烟甚至都不能进酒吧的人,一点不羞愧的告诉别人她们的性历史有好几年了,我只能说,她们的父母真的没有尽到责任。我觉得她们需要社区的志愿者帮助。如果家庭的不幸让她们过早的接触了一些事,那么我很遗憾。但是这不代表她们的生活可以代表真正西方的主流思想和生活方式。
03.我不认为性是一件让人羞耻的事情。
性和吃饭是一样的。但是怎么样吃饭是可以去选择的。你可以在好的餐馆里用刀叉吃,也可以坐在街边趴着吃。
04.西方人可能在某些事上更加的直接。
但是这不代表我们有很大的不同。我觉得没有爱的性是没有意义的,我也觉得把性当作工具更是可耻的。
05.随着中国的进步,中国人的思想会更加的开放和包容。
一些对西方的误解也会慢慢的消失。同样的,我也想在这里说一下:玩知乎的外国朋友们大多数都是在分享自己的思想和知识。是文化交流的表现。但是一些人因为自己不健全的人格和错误的价值观在误导一些中国人。我觉得还是适可而止吧。
11.中国人在外国受歧视吗?
作为一个常年不在家的外国人,我长住过四个国家,旅行过20多个国家。我到处都能看到中国人。我是伊朗和加拿大混血,所以我先说这两个国家的。
伊朗人真的很喜欢中国人!首先是因为伊朗人很喜欢外国人,还有就是中国在伊朗真的太有影响力。德黑兰的地铁都是中国人做的,华为垄断了伊朗的通信业服务,大街上跑着奇瑞和比亚迪汽车。中国人的金龙中餐馆是德黑兰最贵的餐厅之一,中国人在街上就会被请到家里吃饭喝茶。可以这么说,中国人在伊朗绝对是你们说的“超国民待遇”。如果有去过伊朗的中国人一定知道我没有夸张。
加拿大有很多华人社区。我们对华人不会有特别的偏见。首先我们是移民国家,种族歧视是绝对不允许的。还有就是中国人给我们的印象就是有钱。还有中国制造到处都是。政治家有时候会批评中国,但是我们真的都知道那就是一种表演。我承认会有中国人遭受不公平的待遇,但是这真的不代表我们歧视他们。
我在其他很多国家都接触过很多中国人。各种人都有。有特别爱国的,也有从来不说中国好话的。有很西方化完全忘了自己是中国人的,也有穿着唐装走在街上的。我觉得不要在乎别人有没有歧视你,因为歧视别人的人都不是好人。
但是我也认为中国人要注意自己的形象,很多人没有机会去了解你的国家,所以看到你就会以为你就是你的国家全部形象。人都是自己贬低自己,才会被别人贬低的。
我认为真正有头脑的人会知道中国会是今后世界的一个发展方向,可能会变成经济最厉害的国家。中国的思想和价值观可能会因为中国经济的发展变得让所有人开始接受。这个世界一直是厉害的人影响弱的人。没有什么是绝对正确的,所以中国朋友们,不要担心你们不被人接受,你要担心的是以后你们国家变的很厉害,你们会变的很受欢迎,哈哈

关于dedecms模板标签笔记

1.url标签
{dede:global.cfg_templets_skin/}

2.引用标签 header  footer  

{dede:include filename=”header.htm”/}
{dede:include filename=”footer.htm”/}

3.当前位置: 

{dede:field name=’position’/} 

4.文章数据

因为dede系统 自带文章字段定义 因此输出变量

{dede:field.字段名/}

标题:
{dede:field.title/}

特殊:

(责任编辑:{dede:adminname/})  

时间:{dede:field.pubdate function=”MyDate(‘Y-m-d H:i’,@me)”/}

点击量编写:

<script src=”{dede:field name=’phpurl’/}/count.php?view=yes&aid={dede:field name=’id’/}&mid={dede:field name=’mid’/}” type=’text/javascript’ language=”javascript”></script>

{dede:field.click/} 

简介:
{dede:field.description runphp=’yes’}
{/dede:field.description}
———————-
{dede:field.description runphp=’yes’}
  if(@me<>” )@me = ‘
      <div class=”intro”>’.@me.'</div>
                                 ‘;

{/dede:field.description}



文章数据 字段如下

{dede:field.array runphp=’yes’ }@me = print_r(@me,true);{/dede:field.array}
Array
(
    [id] => 
    [typeid] => 
    [typeid2] => 
    [sortrank] => 
    [flag] => 
    [ismake] => 
    [channel] => 
    [arcrank] => 
    [click] =>
    [money] => 
    [title] => 
    [shorttitle] => 
    [color] => 
    [writer] => 
    [source] => 
    [litpic] => 
    [pubdate] => 
    [senddate] => 
    [mid] => 
    [keywords] => 
    [lastpost] => 
    [scores] => 
    [goodpost] => 
    [badpost] => 
    [voteid] => 
    [notpost] => 
    [description] => 
    [filename] => 
    [dutyadmin] => 
    [tackid] =>
    [mtype] =>
    [weight] => 
    [reid] => 
    [typedir] => 
    [addtable] => 
    [tags] => 
    [aid] => 
    [position] => 
    [phpurl] =>
    [indexurl] =>
    [templeturl] => 
    [memberurl] => 
    [specurl] => 
    [indexname] => 
    [templetdef] => 
    [redirecturl] => 
    [templet] => 
    [userip] => 
    [displaytype] => 
    [body] => 
    [typename] => 
    [totalpage] => 
    [picname] => 
    [image] => 
    [badper] => 
    [goodper] => 
    [nowpage] => 
)

5.列表页面 特殊标签

列表代码
{dede:list pagesize=’10’}

[field:title/]
[field:arcurl/]
[field:litpic/]

[field:typename/]
[field:typeurl/]

{/dede:list}

分页代码
   <ul class=”pagelist”>
    {dede:pagelist listitem=”info,index,end,pre,next,pageno,option” listsize=”5″/}
   </ul>

6.公共标签
{dede:…………/}
全局变量
网站名字:
{dede:global.cfg_webname/}
网站模板目录url 
{dede:global.cfg_templets_skin/}

其他的 参考 网站后台 -> 基本参数

———————————————-
文章列表:arclist
{dede:arclist  typeid=’2′ row=’5′  }
图片:[field:litpic/]
<li>  <a href=”[field:typeurl/]”>[field:typename/]</a>  – <a href=”[field:arcurl/]”>[field:title/]</a> </li>
{/dede:arclist}

字段参考一下数组:
[field:array runphp=’yes’]@me = print_r(@me,true);[/field:array]
Array
(
    [id] => 12
    [typeid] => 2
    [typeid2] => 0
    [sortrank] => 1459843966
    [flag] => 
    [ismake] => -1
    [channel] => 1
    [arcrank] => 0
    [click] => 121
    [money] => 0
    [title] => 我叫杨帅,我要找对象
    [shorttitle] => 
    [color] => 
    [writer] => admin
    [source] => 未知
    [litpic] => /images/defaultpic.gif
    [pubdate] => 1459843966
    [senddate] => 1459843605
    [mid] => 1
    [keywords] => 我叫,杨帅,我,要找,对象,有没有,妹子,我想,找,
    [lastpost] => 0
    [scores] => 0
    [goodpost] => 0
    [badpost] => 0
    [voteid] => 0
    [notpost] => 0
    [description] => 有没有妹子,我想找对象
    [filename] => /plus/view.php?aid=12
    [dutyadmin] => 1
    [tackid] => 0
    [mtype] => 0
    [weight] => 8
    [typedir] => {cmspath}/html/CSSjiaocheng
    [typename] => CSS教程
    [corank] => 0
    [isdefault] => -1
    [defaultname] => index.html
    [namerule] => {typedir}/{aid}.html
    [namerule2] => {typedir}/list_{tid}_{page}.html
    [ispart] => 0
    [moresite] => 0
    [siteurl] => 
    [sitepath] => {cmspath}/html/CSSjiaocheng
    [infos] => 有没有妹子,我想找对象
    [info] => 有没有妹子,我想找对象
    [arcurl] => /plus/view.php?aid=12
    [typeurl] => /plus/list.php?tid=2
    [picname] => /images/defaultpic.gif
    [stime] => 2016-04-05
    [typelink] => <a href=’/plus/list.php?tid=2′>CSS教程</a>
    [image] => <img src=’/images/defaultpic.gif’ border=’0′ width=’120′ height=’120′ alt=’我叫杨帅,我要找对象’>
    [imglink] => <a href=’/plus/view.php?aid=12′><img src=’/images/defaultpic.gif’ border=’0′ width=’120′ height=’120′ alt=’我叫杨帅,我要找对象’></a>
    [fulltitle] => 我叫杨帅,我要找对象
    [textlink] => <a href=’/plus/view.php?aid=12′>我叫杨帅,我要找对象</a>
    [phpurl] => /plus
    [plusurl] => /plus
    [memberurl] => /member
    [templeturl] => /templets
)

详细参考 网站后台  ->  模板 ->  默认模板管理 -> 修改模板

7.获取栏目列表标签
channel
type = ‘top’  获取顶层栏目
type = ‘son’  typeid= ‘x’  他有子栏目  输出子栏目  |  没有子栏目输出同级栏目
type = ‘self’ 输入同级栏目 但是typeid 不可是 等级栏目
{dede:channel row = ’10’ type = ‘son’ }
<li><a href='[field:typelink/]’>[field:typename/]</a> </li>
{/dede:channel}

8.单个栏目的链接标签
{dede:type typeid=’1′}
<a href=”[field:typelink /]”>[field:typename /]</a>
{/dede:type}

9.具体某篇文章数据输出

因为dede文章属性文章内容不在同一表中 在特定位置调取特定文章方法的 arclist 中 没有body(正文字段) 需要两表关联查询 对其添加字段body
代码:
{dede:arclist  idlist =’3′  addfields=’body’  channelid=’1′  }
[field:body/]
{/dede:arclist}

常见实用工具

1.在线图片转换

http://pic.55.la/

http://www.atool.org/imgextconvert.php

在线图片压缩

http://www.atool.org/pngcompression.php

2.字体、艺术字图片在线生成

http://www.qt86.com/

http://www.akuziti.com/

3.ascii表


http://baike.baidu.com/pic/ASCII/309296/0/562c11dfa9ec8a13fc8be654f003918fa1ecc0f5?fr=lemma&ct=single#aid=0&pic=562c11dfa9ec8a13fc8be654f003918fa1ecc0f5