误区一.多div症
|
<divclass="nav">
<ul>
<li><ahref="/home/">Home</a></li>
<li><ahref="/about/">About</a></li>
<li><ahref="/concact/">Concact</a></li>
</ul>
</div>
|
上述使用使用多余的div标签现状，就称为“多div症”，理应简化成下
|
<ulclass="nav">
<li><ahref="/home/">Home</a></li>
<li><ahref="/about/">About</a></li>
<li><ahref="/concact/">Concact</a></li>
</ul>
|
误区二.多类class症 注意点class可以应用于页面任意多个元素，非常适合标识内容类型或其他相似的条目
一段新闻（新闻标题、新闻详情内容）
|
<h1class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1>
<pclass="news-head">Lorem ipsum dolor sit amet.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
上述类名使用news-head与news-text 就称为"多类症"表现，不需要这么多的类区分元素样式
最好使用div（division）代表部分而不是没有语义（大多数人误解div无语义！！！），实际上div可以将文档划分为几个有意义的区域.
类名news从而识别整个新闻条目。然后可以使用层叠（cascade）样式识别新闻标题、文本，理应修改如下
|
<divclass="news">
<h1>Elastic Layout Example—View Source for the HTML and CSS</h1>
<p>Lorem ipsum dolor sit amet.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
|
span 对行内元素进行分组或标识
|
<h2> Andy wins an Oscar for his cameo in Iron Man</h2>
<p>Public and on <spanclass="date">Februray 22nd, 2009</span>
By <spanclass="author">Harry Knowles</span>
</p>
|
误区三.id使用误区 用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）
|
/*大量的使用id,很难找到唯一名称混乱*/
#andy, #rich, #jeremy, #james-box, #sophie {
font-size:1em;
font-weight:bold;
border:1pxsolid#ccc;
}
/*只需一个普通类替代它*/
.staff {
font-size:1em;
font-weight:bold;
border:1pxsolid#ccc;
}
|
用于标识页面上特定元素(比如站点导航、页眉、页脚)而且必须唯一; 也可以用来标识持久结构性元素（如主导航、内容区域）
文本超出部分隐藏，总结两种方法。
1、单行隐藏
html代码
|
<divclass="mi">当文字超过范围的时候，超出部分会隐藏起来。</div>
|
css代码
|
.mi {
width:200px;
overflow:hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
|
2、多行隐藏
html代码
|
<divclass="mi">当文字超过范围的时候，超出部分会隐藏起来。可以设置第几行开始隐藏。</div>
|
css代码
|
.mi {
width:200px;
overflow:hidden;
display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
|
前言：
最近做微信开发，在微信中访问PHP页面，页面中有个表单。测试发现偶尔会出现表单被自动提交两次的情况，导致流程出错。
问题原因
暂时未找到原因，不过怀疑跟微信本身的机制有关。
解决方法
用session，每次提交表单时，计算一个随机数post出去。页面处理表单提交时，先判断是否有这个session，如果不存在就保存，存在就和post过来的随机数比较，如果相等表示重复提交。
代码示例:
表单部分
| 代码如下 | 复制代码 |
|
<divclass="odform">
<form action="#"method="post">
<divclass="input-group">
<labelfor="amount_id">金额</label>
<input type="text"name="amount"id="amount_id"
placeholder="单位是元，精确到分,如:12.66"pattern="^([1-9]+(\.[0-9]{2})?|0\.[1-9][0-9]|0\.0[1-9])$">
<input type="hidden"name="code"value="<?php $code = mt_rand(0, 100000); echo $code; ?>">
</div>
<divclass="input-group">
<span id="available">当前余额:<?phpecho$amount_available; ?>元</span>
</div>
<button name="confirm">确认</button>
</form>
</div>
| |
处理表单提交
| 代码如下 | 复制代码 |
|
if(isset($_POST['confirm'])) {
//解决重复调用两次的问题
if($_POST['code'] ==$_SESSION['code'])
{
exit;
}
else
{
$_SESSION['code'] =$_POST['code'];
}
//continue....
}
| |
|
//去title
requestWindowFeature(Window.FEATURE_NO_TITLE);
//隐藏状态栏
getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);
//隐藏拟按键
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION);
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
View decorView = getWindow().getDecorView();
decorView.setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE
| View.SYSTEM_UI_FLAG_LAYOUT_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN
| View.SYSTEM_UI_FLAG_HIDE_NAVIGATION
| View.SYSTEM_UI_FLAG_FULLSCREEN
| View.SYSTEM_UI_FLAG_IMMERSIVE);
|
注意：这种方法只能暂时隐藏状态栏和底部虚拟件，当应用交互的时候底部虚拟键会弹出来覆盖全屏应用的底部。这时可以去Acitivity基类布局文件的最外层布局中添加android:fitsSystemWindows=”true”这样当发生交互的时候，底部的虚拟键不会覆盖当前应用。