html 常用功能

记录写过的代码中用到过的常用功能

返回顶部按钮

<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;}

参考：CSS实现单行、多行文本溢出显示省略号

图片，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;}