记录写过的代码中用到过的常用功能
返回顶部按钮
<a href="#gotop"><img src="img/top.png" alt="" class="top"></a>
<header id="gotop"></header>
img.top{width: 65px; height: 65px;bottom: 10px;/*display: none; */position: fixed;right: 30px;bottom: 30px;}
邮件链接 outlook
<a href="mailto:foreignersonchina@chinamatters.com"><i>foreignersonchina@chinamatters.com</i></a>
css控制强制换行 以div为例
div
{
word-break:break-all; /* 支持IE和chrome，FF不支持*/
word-wrap:break-word; /* 以上三个浏览器均支持 */
}
识别系统语言自动切换
var type=navigator.appName
if (type=="Netscape"){
var lang = navigator.language
}
else{
var lang = navigator.userLanguage
}
//取得浏览器语言的前两个字母
var lang = lang.substr(0,2)
// 英语
if (lang == "en"){
window.location.href="http://www.xxx.com/"
}
// 中文 - 不分繁体和简体
else if (lang == "zh"){
// window.location.href="http://www.xxx.cn/"
// 注释掉了上面跳转,不然会陷入无限循环
}
// 除上面所列的语言
else{
window.location.href="http://www.xxx.com.cn/"
}
css限制单行显示文本字数
p{width: 330px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
图片，div圆角效果
.card__picture{border-top-left-radius:0;border-top-right-radius:0;border-bottom-left-radius:0;border-bottom-right-radius:0}
阴影效果 背景图片平铺效果
.boxed-page{box-shadow:0 0 10px rgba(0, 0, 0, 0.3);background:#fff url("../img/bg.png") center center repeat;}
