記錄寫(xiě)過(guò)的代碼中用到過(guò)的常用功能

返回頂部按鈕

<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控制強(qiáng)制換行 以div為例

div
{
word-break:break-all; /* 支持IE和chrome，F(xiàn)F不支持*/
word-wrap:break-word; /* 以上三個(gè)瀏覽器均支持 */
}

識(shí)別系統(tǒng)語(yǔ)言自動(dòng)切換

var type=navigator.appName
if (type=="Netscape"){
var lang = navigator.language
}
else{
var lang = navigator.userLanguage
}
//取得瀏覽器語(yǔ)言的前兩個(gè)字母
var lang = lang.substr(0,2)
// 英語(yǔ)
if (lang == "en"){
window.location.
}
// 中文 - 不分繁體和簡(jiǎn)體
else if (lang == "zh"){
//  window.location.
//  注釋掉了上面跳轉(zhuǎn),不然會(huì)陷入無(wú)限循環(huán)
}
// 除上面所列的語(yǔ)言
else{
window.location.
}

css限制單行顯示文本字?jǐn)?shù)

p{width: 330px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

參考：CSS實(shí)現(xiàn)單行、多行文本溢出顯示省略號(hào)

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