css使用技巧實(shí)例分析

今天小編給大家分享一下css使用技巧實(shí)例分析的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。

創(chuàng)新互聯(lián)建站十年專(zhuān)注成都高端網(wǎng)站建設(shè)按需網(wǎng)站開(kāi)發(fā)服務(wù),為客戶(hù)提供專(zhuān)業(yè)的成都網(wǎng)站制作,成都網(wǎng)頁(yè)設(shè)計(jì),成都網(wǎng)站設(shè)計(jì)服務(wù);創(chuàng)新互聯(lián)建站服務(wù)內(nèi)容包含成都網(wǎng)站建設(shè),小程序開(kāi)發(fā),軟件開(kāi)發(fā),網(wǎng)絡(luò)營(yíng)銷(xiāo)推廣,網(wǎng)絡(luò)運(yùn)營(yíng)服務(wù)及企業(yè)形象設(shè)計(jì);創(chuàng)新互聯(lián)建站擁有眾多專(zhuān)業(yè)的高端網(wǎng)站制作開(kāi)發(fā)團(tuán)隊(duì),資深的高端網(wǎng)頁(yè)設(shè)計(jì)團(tuán)隊(duì)及經(jīng)驗(yàn)豐富的架構(gòu)師高端網(wǎng)站策劃團(tuán)隊(duì);我們始終堅(jiān)持從客戶(hù)的角度出發(fā),為客戶(hù)量身訂造網(wǎng)絡(luò)營(yíng)銷(xiāo)方案，解決網(wǎng)絡(luò)營(yíng)銷(xiāo)疑問(wèn)。

為body添加行高

你不需要分別為每一個(gè)

,

等元素添加行高，而是為body添加:

body {

line-height: 1;

}

逗號(hào)分離的列表

讓列表看起來(lái)更像一個(gè)真正的逗號(hào)分離列表：

ul > li:not(:last-child)::after {

content: ",";

}

使用:not()去除導(dǎo)航上不需要的邊框

添加邊框…

/* 添加邊框*/

.nav li {

border-right: 1px solid #666;

}

…然后去除最后一個(gè)元素的邊框…

/* 移除邊框*/

.nav li:last-child {

border-right: none;

}

文本顯示優(yōu)化

有些字體在所有的設(shè)備上并不是最優(yōu)顯示，因此讓設(shè)備瀏覽器來(lái)幫忙：

html {

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: optimizeLegibility;

}

表格單元格等寬

使用表格會(huì)非常難受，因此使用table-layout：fixed來(lái)保持單元格相同的寬度：

.calendar {

table-layout: fixed;

}

使用屬性選擇器選擇空連接

顯示沒(méi)有文本值但是 href 屬性具有鏈接的a元素的鏈接：

a[href^="http"]:empty::before {

content: attr(href);

}

這樣做很簡(jiǎn)便。

上面的小技巧支持Chrome，F(xiàn)irefox，Safari， 以及Edge， 和IE11

以上就是“css使用技巧實(shí)例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

新聞名稱(chēng)：css使用技巧實(shí)例分析
本文地址：http://m.jiaotiyi.com/article/jgedph.html