注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

一车,一房,一个温暖家

10万左右的车,80平方的房子,这是我奋斗的暖暖的家

 
 
 

日志

 
 

【转载】前端小记 (1)  

2015-05-30 12:43:57|  分类: 默认分类 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自fanny《前端小记 (1)》
好一段时间没有写博文了,今天再次登录,有种恍如隔世的感觉,呵呵。
这篇博文是用来总结我在前端工作中遇到的小问题的解决方法,记录下来,加深记忆,也方便日后查阅。 
话不多说。。。
1、背景图片自适应

.bg{

background:url(../images/img1.jpg);

filter:"progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale')";

-moz-background-size:100% 100%;

background-size:100% 100%;

}

2、解决盒子边框溢出

-webkit-box-sizing:border-box;

3、打卡页面显示指定位置

<script>

if(!window.location.hash){

window.location.hash='here'; //here为name名

}

</script>

<body>

<a name="here"></a>

</body>

4、ios中禁止用户保存图片

-webkit-touch-callout:none;

5、ios中禁止用户选中文字

-webkit-user-select:none;

6、文字两端对齐,不会出现标点符号把文字拖入下一行的情况

.aaa{text-align:justify;text-justify:inter-ideograph;}

7、文本溢出显示省略号

.text{width:50px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

8、使页面在ie8布局显示正常

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

详情见http://blog.csdn.net/www3300300/article/details/12992489
9、不让谷歌浏览器对小于12号的字体做出修改

html{-webkit-text-size-adjust:none;}

今天用了一下,没起作用,暂时还不知道什么原因,后来用css3的缩放解决的

-webkit-transform:scale(0.8,0.8);

10、文字滚动效果
只需一个标签,搞定

<marquee scrollamount="3" scrolldelay="30" direction="left">文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动文字滚动</marquee>

scrollamount 表示运动速度,值是正整数,默认为6
scrolldelay 用于设定两次滚动操作之间的间隔时间,该时间以毫秒为单位。此属性不是必须使用的;
direction 文字运动的方向。
11、苹果4不支持position:fixed;的解决办法
<div id="fixnav" style=" position: absolute; z-index: 1000; height: 50px; opacity: 0.9;">nav</div>
<script type="text/javascript">
   $(window).scroll(function(){
   $("#fixnav").css({top: window.innerHeight + window.scrollY - $("#fixnav").oute rHeight() });    
});        
</script>
12、改变盒模型,使内容垂直居中

display:table-cell;vertical-align:center;

13、使用css3 “display:-webkit-box;' 使内容垂直居中

display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;





待续。。。
欢迎交流指正fanny






  评论这张
 
阅读(1)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018