工作一年多,发现博客大家都不怎么写了,本着分享的原则,这一年大大小小也积累了一些知识,希望大家少踩坑,当然,踩坑并不一定是坏事,那是一种成长。
前端制作考虑情况:
- 浏览器兼容,IE7、谷歌、火狐、360、百度等浏览器兼容;
- 屏幕适应,大屏和小屏的宽度适应,最小宽度和最小高度的限定;
- 考虑文字过多的情况;
- 表单输入设置提示选项,注意留有错误提示位置;
- 题目类页面切图时应考虑各种可能出现的题型,单选、多选、判断题等,题型中可能放置文字或者图片;
- 考虑各种表单控件样式统一,如输入框、下拉框、单选框和多选框。
- 移动端避免使用图片,圆角、阴影、渐变都可用CSS3实现;
- APP头部和底部固定(position:fixed;bottom:0||top:0);
- 列表选中状态如果有current类标记当前样式,需放在所有列表项均适用;
- 内容部分应设置margin-bottom,以免遮挡底部;
前端制作遇到的一些小问题:
IE7下设置overflow、z-index属性时,需同时对元素设置
position:relative;
谷歌不兼容cursor:pointer问题解决方法:
input[type="file"]::-webkit-file-upload-button{cursor:pointer;}
- CSS垂直居中方法:
- 对父元素设置display:table;
缺点:不兼容IE7 - 设置positon:absolute||fixed;(推荐fixed)top:0;bottom:0;left:0;right:0;margin:0 auto;
缺点:IE7不兼容,并且可视窗口缩小会有问题。 - position:absolute;top:50%;margin-top:-(height/2)px;left:50%;margin-left:-(width/2)px;
缺点:浮层宽高不能自适应,需固定宽高。 - 使用JS设置位置
样式
- 对父元素设置display:table;
.reply_pop {
margin:0px auto;
position: absolute;
}
脚本
$(function () {
$(window).resize(function () {
// 设置弹框div位置
setPosition($("#reply_pop"));
}).resize();
});
function setPosition(pop){
pop.css("top",($(window).height()-pop.height())/2+'px');
pop.css("left",($(window).width()-pop.width())/2+'px');
}
- 元素可用于修改文档所有链接的根地址
- html*{border:1px solid #ccc;}意为所有元素继承html的border属性,可用于查看块的嵌套关系
- iframe边框去除可用style=”height:100%” border=”0” frameborder=”no” scrolling=”auto”来兼容IE浏览器
- 隐藏iframe滚动条可以设置border=”0” frameborder=”0” scrolling=”auto” style=”height:100%”
- 自动改变Iframe的高度:
function setIFrameHeight(iframe) {
var ifm_content = document.getElementById("conFrame");
ifm_content.height = "500px";//默认设置为500px
var heightContent = "500px";
var subContent = document.frames ? document.frames["conFrame"].document : ifm_content.contentDocument;
if (iframe == "content") {//如果传入Ifame Id 等于content 重新给iframe赋值高度
heightContent = Math.max(subContent.body.scrollHeight, subContent.documentElement.scrollHeight);
ifm_content.height = heightContent;
}
}
实例说明:
Html中有一个Iframe 用法如下:
<iframe id="conFrame" src="a.html" frameborder="0" scrolling="no"
width="100%"height="500px"onload="setIFrameHeight('content');"></iframe>
注:自动改变高度只是在初始化的时候将iframe高度设置成内容高度,当页面动态添加标签元素时,iframe高度不可自动增长,导致页面内容被遮住,目前比较好的方法是将iframe高度设置为窗口大小,显示滚动条。
- 使用iframe注意事项:
- iframe不能随窗口大小改变而自动改变,所以在window.resize时应该同样添加改变iframe高度的代码;
- 修改iframe加载时的高度,要把高度运算写在load方法里面,这样才能动态改变高度;
例如
$(function(){
$("#content").load(function(){
var client_h=document.documentElement.clientHeight || document.body.clientHeight;
var iframe_h=client_h-$(".f_wrap").height();
$(this).height(iframe_h);
});
});
$(window).resize(function() {
var client_h=document.documentElement.clientHeight || document.body.clientHeight;
var iframe_h=client_h-$(".f_wrap").height()-4;
$("#content").height(iframe_h);
});
- 修改input不可编辑样式
input:disabled{
background-color: #f5f5f5;
}
input[disabled]{
background-color: #f5f5f5;
}
- 媒体查询and min-width:0兼容IE9及以上,可以用此方法过滤IE8以及以下版本;
- 通用图标尽量写在,因为变换数字即可变换图标,间距也可以统一控制(可使用字体图标进行图标设置,参考图标库阿里图标库);
- position 定位详解
static:默认值,元素按照正常文档流规划排列;
relative:处于正常文档流中,可通过left,top定位;
absolute:脱离正常文档流,可设置left,top,定位参考元素为父级且已设置定位属性的元素;
fixed:脱离正常文档流,可设置left,top定位,以浏览器四角作为参考点;
IE5.5-IE6不支持 - 三种情况脱离文档流:浮动、绝对定位和固定定位;
- 解决拖动滚动条闪烁的bug
*html{background-image:url(about:blank);background-attachment:fixed;}
- .vertical-align:middle;垂直居中针对的是当前元素的下一个元素(vertical-align:middle用于webkit浏览器对齐,line-height:用于IE垂直对齐,基本兼容所有浏览器);
- 改变input placeholder颜色,并且不影响字体颜色:
::-webkit-input-placeholder {
/* WebKit browsers */
color: #ccc;
}
:-moz-placeholder {
/* Mozilla Firefox 4 to 18 */
color: #ccc;
}
::-moz-placeholder {
/* Mozilla Firefox 19+ */
color: #ccc;
}
:-ms-input-placeholder {
/* Internet Explorer 10+ */
color: #ccc;
}
- CSS3垂直居中
对父元素设置:display:table
对子元素设置:vertical-align:middle; display:table-cell;
注:父元素不可绝对定位。 - 禁止iPhone对input的默认样式
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
- @font-face使用自定义字体,可用“字蛛”将文字压缩,node命令为:
font-spider ./demo/*.html - css限制段落行数,并且显示省略号
overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;
-webkit-line-clamp:2; /*限制显示两行*/
- 解决iframe在IE9/8以下会有白边问题
iframe{display:block;}
- 浏览器默认单选框书写规范:
<label class="defaultChex">
<input type="checkbox" name="default1">
折扣店
</label>
好了,这次就发这么多,还有一些js和jQuery笔记,后续再发,有问题随时讨论哈。
事始:只要你还在尝试,就不算失败。