4. 有关弹出的遮罩层
5. 有关wifi开关效果案例
6. 常用布局写法分析
7.常用的字符写法
8.常用的兼容性写法及文字段落问题
弹出层无法完全显示问题
*在甘肃违章查询wap项目中遇到此类问题,修改方法如下几点:
a.将弹出层的宽度由em修改为百分比,比如90%。
b.将margin-left值也由具体的em修改为百分比,比如margin-left:-45%b. 将文字大小改小
c.特别重要的是,当有position: fixed;时,一定要加上top:0,left:0;等定位,否则就无法知道是相对于哪一点固定定位。
手机页面CSS写法细节
1. 通常line-height属性写在父级元素而非父级元素内部的小元素。
2. 通常设置圆角边框等属性border-radius不是写在某个元素类,而是单独设定,加上此类的。
例如 .round{ border-radius:1em;} .display_none { display:none;}
.por{ position:relative;} .poa{ position:absolute;}
3. 想要将文字和图片同时放置某个容器内,而文字又要居中。可以设定容器为相对定位,居中对齐,图片为绝对定位,这样图片就不会影响文字的位置,文字可用p或者h标签直接实现居中。
4.注意background-size 可以用百分比%,也可以用em,例如 background-size: 0.8em 0.8em;
5. Input输入框中一般还会设置一定的左边距(右边距可不考虑), 如 width: 98%; padding-left: 2%; 且可以有 value=“-请输入-“写法
6. 背景可以属性可以同时设置背景颜色及图片,学习此简洁写法:
background: #56c5fd url(../images/pic_11.png) no-repeat 42%;
7.通常左右margin值为2em.
8.左文右输入框情形,右输入框的margin-left:(0.75+左文宽度)em
通常border颜色:#ccc ,#dfdfdf,
.border类型: solid dotted dashed
9.通常图片切片为长宽相同.
4.有关弹出的遮罩层
…….
<div class="backdrop"></div>
<div class="pop_box">
<a class="close">x</a>
....
</div>
注意CSS的写法,才能使得遮罩层是好的效果,以及居中的显示
.backdrop{ left:0px; top:0px; bottom:0px; right:0px; position:fixed;
background:#000; z-index:2; opacity:0.4; filter: Alpha(Opacity=40); }
.pop_box{ position:fixed;width:817px;height:438px;padding:20px;
background:url(../images/pop_bg.png); z-index:10; }
$(‘.pop_box‘).css({left:($(window).width()-817)*0.5,top:($(window).height()-438)*0.5})
5.有关wifi开关效果案例
方法1:用背景图片实现
方法2:用CSS3写
<div class="top">
<h1>无线局域网</h1>
<div class="btn">
<div class=“onbox”><span>|</span><p></p></div>
<div class="offbox">|</div>
</div>
</div>
*{padding:0px;margin:0px;}
/*注意初始化不能忽略。否则手机自适应上会有偏差*/
.top{padding:0 1em;height:3em;line-height:3em;border-bottom:1px solid #ebebeb;}
.top h1{float:left;color:#666;font-size:1.15em;}
.btn{ float: right; height:2em; cursor: pointer; background:#999;
/*关闭时的灰色背景*/ width:6em;overflow:hidden;border-radius:1em; position:relative; }
.onbox{ height:2em;line-height:2em;border-radius:1em; position:absolute;left:0;top:0; width:6em; background:#007FEA;/*开启时的蓝色背景*/}
.onbox span{ color:#fff;font-size:1.15em;font-weight:bold;width:3.46em; text-align:center;display: block;float: left;} /*设定白色竖线*/
.onbox p{ width:2em;height:2em;border-radius:1em;background:#fff; padding:0px;margin:0px;float: right; }
/*设定白色圆球*/
.offbox{ color:#fff;line-height:2em;font-size:1.15em;font-weight:bold;width:3.46em; text-align:center;
display: block;position:absolute;right:-3.45em;top:0px; }
$(function(){
var fla=1;
$(‘.btn‘).click(function(){
if(fla)
{
$(this).find(‘.onbox‘).animate({left:-parseInt($(‘.onbox span‘).css(‘width‘))})
.next().animate({right:0});
fla=0;
}
else
{
$(this).find(‘.onbox‘).animate({left:0}).next().
animate({right:-parseInt($(‘.onbox span‘).css(‘width‘))});
fla=1;
}
})
})
6.常用布局写法分析
图1 Tab切换
上面的图片,是这样分析布局的:
下面的框架,不变,依旧写 border:3px solid #xxx;
上面的Tab中运用的是ul li 结构,li负责右边框的灰色线;
Li设置为相对定位,li中的div设置为绝对定位,因此,div的高度可以高于li而不出错。
最后运用div点击后的cur属性,设置背景图片,如下图:
图2 基本导航
1.对于第一个导航所需要设定的样式,学习这样的写法:
.nav ul li a:hover, .nav ul li.cur a{ 。。。 }
2.小三角的写法:
.icon{ width: 0; height: 0; border-width: 0 15px 15px; border-style: solid;
border-color: transparent transparent #2C2D33; position: absolute; }
当然,由于搜狗拼音的强大,可以直接打印出来,如◆,通过定位,设置color即可。
图3 下拉列表
对于此类下拉列表,
通常不会用原生态的<select><option value=“”>xxx</option></select>,因为,
样式不美观,也不太方便改写,用李杨改写的js替换select依然显得代码不够精简。
因此:最好用一个简单的 input 来写,设置背景图片为下拉按钮样式,然后在其后
写ul li来写下拉的内容,设置原先为隐藏,点击后下拉显现,配合简单jQuery即可。
注:保证每点击其中一个下拉列表,其他的自动关闭,这是一个该注意的细节问题。
/*下拉列表效果开始*/
$(‘.select_list li input‘).click(function(){
$(‘.select_list li input‘).next(‘.small‘).hide();
$(this).next(‘.small‘).slideToggle();
})
$(‘.small li‘).click(function(){
$(this).parent().slideUp();
$(this).parent().prev().val($(this).html());
})
/*下拉列表效果结束*/
图4.单选按钮组
对于此类单选按钮组,
通常也不会用原生态的。而是用图片,实现点击交替背景即可。
/*性别选择开始*/
$(‘.female,.male‘).click(function(){
$(this).parent().find(‘span‘).removeClass(‘cur‘);
$(this).addClass(‘cur‘);
})
/*性别选择结束*/
图5.带有透明背景
在这里,先前用的是滤镜做黑色透明效果,比较麻烦,
因为其一,滤镜加载耗时,
其二,滤镜的黑色效果会使得上面的图片和文字也变成暗的,
因此,可直接用透明图片较方便,
且可以不用整个图片,将黑色透明图片剪切1像素宽平铺即可。
7.常用的字符写法
通过搜狗拼音输入法
1.特殊符号: ☆★○●◎◇◆□■△▲
2.数字序号: ①②③④⑤⑥⑦⑧⑨⑩
通过DW特殊字符输入法
1.美元写法:代码:¥ 形状: ¥
2.版权写法:代码:© 形状:
3.注册写法:代码:® 形状:
8.常用的兼容性写法及超出隐藏
border-radius 圆角边框
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
注:当需要上圆角下平整的样式时,写法如下:
border-radius:15px 15px 0 0 ;
box-shadow盒阴影效果
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
-webkit-box-shadow: 10px 10px 20px #000; /* Safari 和 Chrome */
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
注:box-shadow 寻找规律
box-shadow: -2px 0 0 green, //左边阴影
0 -2px 0 blue, //顶部阴影
0 2px 0 red, //底部阴影
2px 0 0 yellow; //右边阴影
Opacity透明度
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
超过隐藏且为省略号:
.XXX{ width : xxx px; overflow : hidden; text-overflow : ellipsis; white-space : nowrap; /*缺一不可哦*/ }
段落文字连续字符串不能在同行显示时自动换行
word-break: break-all; 这样就可以避免文字大片的掉下而不美观。