记录Harde学习成长生活的点点滴滴.
2011-09-27 HTML&CSS,WEB前端


没有评论
3 次浏览

CSS3 nth-child 伪类用法

做爱疯和安卓的项目,觉得JqueryMobile太过于臃肿,于是废弃,不过JqueryMobile的UI还是比较耐看的,于是提取了不少样式来用。
其中用的最多的就是ul、li列表,不过JQM的样式写的太过于臃肿,而且还要嵌套一堆div,于是又弃用了JQM的样式…….

废话不多说,正式开始~~

隔行效果一直是比较难受的东西,不是说有多复杂,而是总是配合着JS或者后台代码太过于恶心…
CSS3 中提供了强大的伪类(pseudo-class)选择器,使开发者能选择某一对象中符合特定条件的元素进行渲染。

今天我们来说说nth-child
nth-child伪类在W3C里定义是选择选择父元素里的第n个子元素,可以使用an+b的形式选择子元素,举例用法如下:

1
2
3
4
ul.demo1 li:nth-child(3){
	color: green;
	background-color:black;
}

效果

  • 测试1
  • 测试2
  • 测试3
  • 测试4

在nth-child的括号中,可以填写:
odd代表单数,even代表双数行
也可以在里面书写包含字母n的方程式
比如
tr:nth-child(2n+1) 效果同 tr:nth-child(odd) 表示单数行
tr:nth-child(2n) 效果同 tr:nth-child(even) 表示双数行
有一点要注意(-n)比较特殊,无论n为多少(-n+x)的值必须为正数才有效,例如
tr:nth-child(-n+3),那么实际效果就是前3行被选中。
由此,咱么可以实现点特殊的效果

1
2
3
4
5
6
7
8
9
10
11
12
ul.demo2 li:nth-child(odd){
	color: #aaa;
	background-color:#444;
}
ul.demo2 li:nth-child(even){
	color: #222;
	background-color:#ccc;
}
ul.demo2 li:nth-child(-n+3){
	color: #fff;
	background-color:#000;
}
  • 测试1
  • 测试2
  • 测试3
  • 测试4
  • 测试5
  • 测试6
  • 测试7
  • 测试8

nth-child伪类的衍生
除了nth-child以外,W3C还为我们提供了几个基于nth-child定义的衍生伪类,这里简单地说说他们的用途。

E:nth-last-child(n): 选择某个子元素,从最后一个数起
E:nth-of-type(n): 选择某个某种类型的子元素
E:nth-last-of-type(n): 选择某个某种类型的子元素,从最后一个符合条件的元素数起
E:first-child: 选择第一个子元素(这个伪类在CSS2里就有)
E:last-child: 选择最后一个子元素

好了,相信大家都是很聪明的,我就不多说了,最后提醒一下,大家不要被文章的例子限制死了,要灵活运用。我送给大家一个Table~

01 02 03 04 05
11 12 13 14 15
21 22 23 24 25
31 32 33 34 35
41 42 43 44 45
51 52 53 54 55
2011-09-19 Android & Iphone


没有评论
32 次浏览

Popup窗口在Android与Iphone上是的实现

首先说明,笔者并不擅长前端的东东,最近项目需求,被逼无奈作出下面的东西。
很多地方写的不理想,但是时间紧迫,将就着先用,以后有空再改。留此文备忘。~

注意:
因为力求精简,没有添加Jquery库,”$M”只是对Javascript的一些常用方法进行封装,想要滑入,滑出等效果的,请自行添加。
因为本身是为Android和Iphone做开发,所以应用了一些CSS3的效果,在Chrome、FF、Safari下效果也都是正常的,没有考虑也没测试过任意版本的IE

首先看下效果:

实现起来不算麻烦
首先弄个两个层,一个用来遮罩页面,一个用来显示消息。

?View Code HTML4STRICT
1
2
3
4
5
6
7
8
9
10
11
12
<div id="msgPopupLayoutBg"></div>
<div id="msgPopupLayout">
    <div id="msgPopupLayoutInner">
        <div class="msgPopupLayoutTitle">我是标题</div>
        <div class="msgPopupLayoutContent">
            <p id="msgPopupLayoutContent">Message Content</p> 
            <div class="msgPopupLayoutClose">
                <input type="button" value="確定" class="base_font_size2" onclick="mbCommon.hideMsgPopupLayout();" />
            </div>
        </div>
    </div>
</div>

CSS样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
/* Msg Popup Layout Start*/
#msgPopupLayoutBg
{
    position:absolute;
    top:0;
    left:0;
    background:#333;
    width:100%;
    height:100%;
    filter:Alpha(Opacity=30);
    -moz-opacity:0.5;
    opacity:0.5;
    display:none;
    z-index:100;
}
#msgPopupLayout 
{
    position:absolute;
    top:30%;
    left:10%;
    width:80%;
    display:none; 
    padding:8px;
    filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#7F777777', endColorstr='#7F777777'); 
    background:rgba(85,85,85,0.5); 
    -webkit-border-radius:5px; 
    -moz-border-radius:5px; 
    border-radius:5px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7); 
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
    z-index:1000;
}
.msgPopupLayoutTitle 
{
    position:relative; 
    height:28px; 
    padding:0 20px 0 10px; 
    background:#3A6EA5; 
    color:#fff; 
    font-size:14px; 
    line-height:28px; 
    border-style:solid; 
    border-width:1px; 
    border-color:#4E84C0 #4780BE #0D1D3C #4780BE; 
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7); 
    text-shadow:0 1px 0 #000; 
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}
.msgPopupLayoutContent 
{
    padding:5px; 
    background:#fff; 
    overflow:hidden;
    -webkit-border-radius:0 0 10px 10px;
    -moz-border-radius:0 0 10px 10px;
    border-radius:0 0 10px 10px;
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7); 
    -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.7); 
    /*text-shadow:0 1px 0 #000; */
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);	
}
.msgPopupLayoutClose{text-align:center;}
/* Msg Popup Layout End*/

Javascript部分

?View Code JAVASCRIPT
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
function showMsgPopupLayout(popupContent)
    {
        $M('#msgPopupLayoutContent').html(popupContent);
        document.getElementById("msgPopupLayout").style.top = mbCommon.scrollY()+mbCommon.windowHeight()/2-document.getElementById("msgPopupLayout").clientHeight/2+"px";
        document.getElementById("msgPopupLayoutBg").style.top = mbCommon.scrollY();
 
 
        var _scrollWidth = document.body.scrollWidth;
        var _scrollHeight = document.body.scrollHeight;
        document.getElementById("msgPopupLayoutBg").style.width = _scrollWidth + "px";
        document.getElementById("msgPopupLayoutBg").style.height = _scrollHeight + "px";
 
 
        $M('#msgPopupLayout').show();
        $M("#msgPopupLayoutBg").show();
        return false;
    }
function hideMsgPopupLayout()
    {
        $M('#msgPopupLayout').hide();
        $M("#msgPopupLayoutBg").hide();
        return false;
    };
function pageY(elem){
      return elem.offsetParent? elem.offsetTop+pageY(elem.offsetParent) : elem.offsetTop;
    };
function scrollY(){  
        var de=document.documentElement;  
        return self.pageYOffset||(de&&de.scrollTop)||document.body.scrollTop;
    };
function windowHeight() {  
        var de = document.documentElement;  
        return self.innerHeight||(de && de.offsetHeight)||document.body.offsetHeight;
    }
2011-09-14 DotNet


没有评论
19 次浏览

Switch(Select Case)在C#与VB.NET中的使用区别

Switch语句是很常用的一个控制语句。不过在使用中,C#和VB.NET有一点点小区别需要注意一下

?View Code CSHARP
1
2
3
4
5
6
7
8
9
10
int num = 1;
switch (num)
{
    case 1: 
        break;
    case 2:
        break;
    default:
        break;
}

更详细的内容,可以参考
switch(C# 参考):http://msdn.microsoft.com/zh-cn/library/06tc147t(v=vs.90).aspx

在VB.NET中其实是由Select Case实现的Switch(或者说C#中是由Switch实现的Select Case功能,不过笔者最先学习的C#,就先入为主的以C#为参考了~)

1
2
3
4
5
6
Dim num As Integer
Select Case num
    Case 1
    Case 2
    Case 3
End Select

更详细的内容,可以参考
Select…Case 语句 (Visual Basic):http://msdn.microsoft.com/zh-cn/library/cy37t14y(v=VS.90).aspx

2011-09-06 Android & Iphone


没有评论
507 次浏览

default、mms、supl、dun、hipri接入点类型的区别

设置APN上网时,大家可能经常遇到这个问题:
为什么有时要填写default有时要填写supl,而彩信又偏偏要mms?
这个问题留到最后,让我们看看每个接入点类型的含义:
英文原文来自于Google Android Developers
原文连接:http://developer.android.com/reference/android/net/ConnectivityManager.html
我尽量用通俗易懂的语言来解释每个类型的含义,若您是开发者,请尽量阅读英文原文。

1、default
‍默认网络连接,当激活时所有数据传输都使用该连接,不能与其他网络连接同时使用

1
2
3
4
5
6
/**
  * The Default Mobile data connection. When active, all data traffic
  * will use this connection by default. Should not coexist with other
  * default connections.
  */
  public static final int TYPE_MOBILE = 0;

适用场合:绝大部分正常上网时可以使用
2、mms
彩信专用连接,此连接与default类似,用于与载体的多媒体信息服务器对话的应用程序,此连接能与default连接同时使用

1
2
3
4
5
6
7
/**
  * An MMS-specific Mobile data connection. This connection may be the
  * same as TYPE_MOBILE but it may be different. This is used
  * by applications needing to talk to the carrier's Multimedia Messaging
  * Service servers. It may coexist with default data connections.
  */
  public static final int TYPE_MOBILE_MMS = 2;

适用场合:使用彩信服务时,必须有mms类型的接入点,不必选中,应用程序会自动使用此接入点
3、supl
是Secure User Plane Location“安全用户面定位”的简写,此连接与default类似,用于帮助定位设备与载体的安全用户面定位服务器对话的应用程序,此连接能与default连接同时使用

1
2
3
4
5
6
7
8
9
/**
  * A SUPL-specific Mobile data connection. This connection may be the
  * same as {@link #TYPEMOBILE} but it may be different. This is used
  * by applications needing to talk to the carrier's Secure User Plane
  * Location servers for help locating the device. It may coexist with
  * default data connections.
  * {@hide}
  */
  public static final int TYPE_MOBILE_SUPL = 3;

适用场合:需要自动切换wap与net接入点的、需要把手机当临时AP的
对SUPL技术感兴趣的朋友,不妨看下以下文章
SUPL技术(一)http://blog.sina.com.cn/s/blog_537f4a11010008tw.html
SUPL技术(二)http://blog.sina.com.cn/s/blog_537f4a11010008uf.html
SUPL技术(三)http://blog.sina.com.cn/s/blog_537f4a11010008ws.html
SUPL技术(四)http://blog.sina.com.cn/s/blog_537f4a11010008yf.html
4、dun
Dial Up Networking拨号网络的简称,此连接与default连接类似,用于执行一个拨号网络网桥,使载体能知道拨号网络流量的应用程序,此连接能与default连接同时使用

1
2
3
4
5
6
7
8
/**
  * A DUN-specific Mobile data connection. This connection may be the
  * same as {@link #TYPEMOBILE} but it may be different. This is used
  * by applicaitons performing a Dial Up Networking bridge so that
  * the carrier is aware of DUN traffic. It may coexist with default data
  * connections.
  */
  public static final int TYPE_MOBILE_DUN = 4;

适用场合:需要使用运营商无线热点的,CMCC、ChinaNet等
5、hipri
高优先级网络,与default类似,但路由设置不同。
只有当进程访问移动DNS服务器,并明确要求使用requestRouteToHost(int, int)才会使用此连接
(这个我也不太懂,翻译的应该很有问题….)

1
2
3
4
5
6
7
8
9
/**
  * A High Priority Mobile data connection. This connection is typically
  * the same as {@link #TYPEMOBILE} but the routing setup is different.
  * Only requesting processes will have access to the Mobile DNS servers
  * and only IP's explicitly requested via {@link #requestRouteToHost}
  * will route over this interface.
  *{@hide}
  */
  public static final int TYPE_MOBILE_HIPRI = 5;

适用场合:我也不知道……

好了,最后教给大家一个一劳永逸的APN设置大法:2个接入点搞定一切
以下内容分运营商的地方我会标注出来,默认以中国联通3G为例
1、NET接入点
接入点名称任意
APN:3gnet(移动2g:cmnet 联通2g:uninet)
接入点类型:default,supl,dun
其他都为空
2、WAP接入点
APN:3gwap(移动2g:cmwap 联通2g:uniwap)
代理:10.0.0.172
端口:80
mmsc:http://mmsc.myuni.com.cn(此项不区分2G3G,移动:http://mmsc.monternet.com)
彩信代理:10.0.0.172
彩信端口:80
APN类型:default,mms
好了,搞定~
现在我想文章开头处的问题就不需要再解答了吧?

2011-09-01 Android & Iphone


没有评论
23 次浏览

校准你的手机电池,让电池恢复活力

刷过机的都知道在Recovery里有个wipe battery stats,很多教程里说刷ROM时能wipe几个就wipe几个
其实这完全是在误导机油~

wipe battery stats
从字面来看“擦除电池统计”事实上也确实就是这个意思

手机充电时为防止过充会有每次的冲电统计,记录在系统里面,衰减记录可以保护电池过充但会使电池充满电的记录不断变小,从而使下次电池充电时充电不足,储备电量变小。这样做是为了更新记录,使电池的充电电量每次尽可能的最大。
引用自:XDA,源头无法追溯

那么问题来了,当你在非满电状态下执行了此项,很显然电池就被你错误的校对了~
运气好的,当时电量在70、80或者满电的,可能感觉不出来,最多感觉新刷的ROM“比较耗电”
运气不好的,当时电量在20、30的,那么你可能会悲剧的发现电池貌似“坏了”,用一会就没电了~~

好了,知道了原因就好了,按照正规的流程,重新校对下电池就好了
因为本人使用HTC Desire(下文简称G7),以下以G7为例

1、首先在开机状态下连接充电器充电,充到满电。(G7的LED会变成绿色)
2、把手机从充电器拔下。
3、关机并再连接充电器充电,如果你发现手机竟然又继续充电了(LED变成橘黄色),恭喜,您的电池已经处于需要校准状态,等待充满。(等待LED再次变绿)
(注意:如果你插上充电器,没过几秒就变绿了,也恭喜你,因为您的电池已经处在健康状态,不需要校准了)
4、拔下手机充电器。
5、手机开机,等到手机开机并完全进入系统后,迅速关机。
6、再次连接充电器到,等待充满(LED变绿)
7、启动手机进入recovery模式(返回+电源键同时按下),然后选择wipe battery stats即可。

注意,如果没有必要不要经常wipe battery stats

在书写本文时,本人在开机充满的状态下,关机又快充了半小时…..现在还没充满~~我可怜的电池……

返回顶部
分享按钮