整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
用 CSS 進(jìn)行繪圖和布局時(shí)，除了借助瀏覽器開發(fā)工具之外，還經(jīng)常需要繪制一些輔助線，以便定位參考。今天就以第 170 號作品中使用的網(wǎng)格線為例，詳細(xì)講解一下輔助線的原理和畫法。
為了使輔助線明顯可見，把線的顏色設(shè)置為和背景對比強(qiáng)烈的白色，并且線也粗一些，在實(shí)際使用時(shí)，你應(yīng)該降低輔助線與背景的對比并且使用細(xì)線。
div {
font-size: 50px;
width: 6em;
height: 4em;
background-color: teal;
}假設(shè)你有一個(gè) <div> 容器，容器里是否有元素都可以，當(dāng)前演示為了突顯輔助線，暫時(shí)讓容器里空空如也：
div {
background-image: linear-gradient(to bottom, transparent 95%, white 95%);
}網(wǎng)格線是一條一條線條組成的，所以要先畫出一條線，它的95%都是透明的，只有5%是白色的：
div {
background-size: 1em 1em;
background-repeat: no-repeat;
}我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關(guān)注我的頭條號并在后臺(tái)私信我：前端，即可免費(fèi)獲取。
請把繪制網(wǎng)格線想象成是鋪地磚，首先要定義地磚的尺寸，這里用 1em 1em 定義了一塊方磚，同時(shí)讓磚塊不重復(fù)，所以只顯示出了孤單的一塊磚：
div {
background-repeat: repeat-x;
}如果把地磚橫向平鋪，就能組合成一條水平線：
div {
background-repeat: repeat-y;
}如果把地磚縱向平鋪，就能組合成一條垂直線。
錯(cuò)！
縱向平鋪是像階梯一樣的效果：
div {
background-repeat: repeat;
}橫向和縱向同時(shí)平鋪，就是像作業(yè)本一樣的多條橫線效果。注意，這時(shí)最頂端是沒有線的：
div {
background-image: linear-gradient(to right, transparent 95%, white 95%);
background-size: 1em 1em;
background-repeat: repeat;
}假如把地磚換成向右的豎線，即只把 to bottom 改為 to right ，其他不變，繪制出的就是一排一排的豎線。同樣注意，這時(shí)最左邊是沒有線的：
div {
background-image:
linear-gradient(to bottom, transparent 95%, white 95%),
linear-gradient(to right, transparent 95%, white 95%);
background-size: 1em 1em;
background-repeat: repeat;
}把第6步和第7步合并起來，網(wǎng)格線基本成型了，不過頂端和左端還缺少線條：
div {
background-image:
linear-gradient(to top, transparent 95%, white 95%);
background-size: 1em 1em;
background-repeat: no-repeat;
}來解決頂端線的問題，先畫出一段頂端線。這段代碼和第3步極相似，僅僅是 to bottom 改成了 to top：
div {
background-repeat: repeat-x;
}把這一段頂端線水平平鋪，就是一條定位在頂部的水平線：
div {
background-image:
linear-gradient(to left, transparent 95%, white 95%);
background-size: 1em 1em;
background-repeat: no-repeat;
}用類似的辦法解決左端線問題，先定義一段左端線，注意 linear-gradient 函數(shù)的第 1 個(gè)參數(shù)改成 to left 了：
div {
background-repeat: repeat-y;
}平鋪這段左端線，就得到了一條緊挨容器左側(cè)的豎線：
div:nth-child(13) {
background-image:
linear-gradient(to bottom, transparent 95%, white 95%),
linear-gradient(to right, transparent 95%, white 95%),
linear-gradient(to top, transparent 95%, w hite 95%),
linear-gradient(to left, transparent 95%, white 95%);
background-size: 1em 1em;
background-repeat: repeat, repeat, repeat-x, repeat-y;好了，我們把第8步不完美的網(wǎng)格線、頂端線、左端線都合起來，就是完美的網(wǎng)格線了，注意 background-repeart 的寫法，它有 4 個(gè)參數(shù)，分別對應(yīng) background-image 里的 4 條線：
干得漂亮！收工。
原文鏈接：https://segmentfault.com/a/1190000021507641
作者：comehope
、使用 div 后，什么時(shí)候使用 table
Web標(biāo)準(zhǔn)并不排除表格的使用，但使用表格排版是不明智的，因?yàn)楸砀駳w根結(jié)底只是一種顯示“數(shù)據(jù)”的方式。大家應(yīng)該知道，在 Excel 中，表格就是用來放置數(shù)據(jù)信息的。使用表格顯示信息能讓瀏覽者閱讀起來更輕松，表達(dá)也更清楚。
XHTML 中的元素可分為三大類，下面分別介紹。
輔助布局設(shè)計(jì)元素:主要指div、span等，這類元素的主要功能是布局整個(gè)頁面。靈活使用這些元素，能讓網(wǎng)頁豐富多彩。
結(jié)構(gòu)化元素或信息元素:主要指table、ul、pre、code等元素，是一種信息顯示與整理方式，如 table 是用來顯示表格信息的，ul是用來顯示列表信息的，當(dāng)需要用表格或列表的時(shí)候，用這兩種方式來顯示是合理的。
為實(shí)現(xiàn)某些功能而添加的元素:如添加關(guān)鍵字的meta keyword，設(shè)置鏈接的a等。由上面的分析可知，符合Web標(biāo)準(zhǔn)的設(shè)計(jì)思路是，使用div等布局元素來制作頁面的布局、定位、色塊、圖像等，使用table、ul等元素來顯示頁面中需要展示的數(shù)據(jù)。這實(shí)際上是一個(gè)信息合理化整合的過程，什么地方該用什么元素還是照用不誤。
二、初學(xué) Web 標(biāo)準(zhǔn)的幾個(gè)誤區(qū)
初次接觸 Web標(biāo)準(zhǔn)的用戶可能會(huì)受表格布局或其他一些問題的影響，常見問題及解決建議如下:
1.不要用傳統(tǒng)的表格思維來套div
用慣了表格的用戶可能會(huì)覺得，CSS 布局就是將原來用table的地方用div來代替，原來是 table 嵌套，現(xiàn)在是 div嵌套。這種觀點(diǎn)是錯(cuò)誤的。
應(yīng)該跳出表格布局的禁錮，拋棄一個(gè)td接一個(gè)td放置內(nèi)容的思維方式。按前文所述，Web標(biāo)準(zhǔn)的目的是將內(nèi)容和表現(xiàn)完全分離。即在加入表現(xiàn)之前，頁面里有的僅僅是內(nèi)容，在沒有修飾的情況下，它就是一張有一些文字和圖像(圖像是指內(nèi)容中的圖像，是有真正意義的圖像，而非修飾性的圖像)的簡單頁面，這些文字和圖像僅僅是依次羅列下來，只有結(jié)構(gòu)，沒有任何樣式。當(dāng)加人表現(xiàn)，將所有修飾的圖像作為背景，用CSS 來定義每一塊內(nèi)容的位置、字體、顏色等時(shí)，才構(gòu)成了一個(gè)完整的頁面。
這樣制作的頁面才是內(nèi)容與表現(xiàn)完全分離的，即抽掉 CSS 文件，剩下的就只是干凈的內(nèi)容。
2.不必為每塊內(nèi)容都創(chuàng)建一個(gè)id
內(nèi)容都是有結(jié)構(gòu)的，相同結(jié)構(gòu)的內(nèi)容可以用同一個(gè)樣式來定義，如相同級別的標(biāo)題、正文、圖像等。對干多次引用的樣式可以用cass 來定義，不需要全部用id:另外也不是說只能用 div 布局，在需要的時(shí)候，完全可以用p來代替。
至于僅僅為了行高、間距，或者一個(gè)修飾性圖像而增加的div，隨著大家對 CSS應(yīng)用的熟練和理解，很快就會(huì)知道這是沒有必要的。希望大家多研究 CSS，做出最簡練、最有效的樣式表。
HTML5流行的時(shí)代，網(wǎng)站前端也越來越受到大家的關(guān)注，但是還是有很多人表示有懷疑前端到底是做什么的，能夠在網(wǎng)站建設(shè)中起到什么作用呢？很多公司的職位劃分的時(shí)候是沒有前端這個(gè)職位，只有特別專業(yè)或者具有很完善的公司體系才會(huì)安排這個(gè)職位，很多公司的安排會(huì)把前端與設(shè)計(jì)何為一起，還有把前端和后臺(tái)建設(shè)合在一體，所以網(wǎng)站建設(shè)中前端給人的印象不是十分的深刻。
前端的職位已經(jīng)不像很早以前，網(wǎng)站存在著簡單的模板樣式，那時(shí)的頁面設(shè)計(jì)風(fēng)格相對單一，對應(yīng)的頁面需求比較簡單，并且當(dāng)時(shí)的瀏覽器也基本是 IE6 的天下，javascript 也只是網(wǎng)頁特效的代名詞，HTML 頁面本身沒有引起太多人的關(guān)注，似乎只要能用 div 甚至 table 加 css 輔助把圖片定好位，把頁面內(nèi)容預(yù)留好就 OK 了，并且這種觀念存在了很長一段時(shí)間。
隨著移動(dòng)互聯(lián)網(wǎng)業(yè)務(wù)的風(fēng)靡，還有不同人群對網(wǎng)站建設(shè)要求的層次不同，網(wǎng)站的設(shè)計(jì)風(fēng)格越來越個(gè)性化、專業(yè)化、精良化。交互復(fù)雜性的增加，AJAX 的應(yīng)用，瀏覽器的更新?lián)Q代，又讓大家重新對最基本的頁面本身重視起來。然后熱議的就是瀏覽器的兼容性，碰到問題最熱衷的就是滿網(wǎng)絡(luò)搜索 hack，順便再罵罵 IE6、7……當(dāng)這些都做一遍后，似乎又遇到了瓶頸，又開始尋找出路。我們就從這個(gè)階段開始說起。
網(wǎng)站前端具體能夠給網(wǎng)站帶來哪些好處呢：
（1）能夠給網(wǎng)站結(jié)構(gòu)布局帶來良好的展現(xiàn)：拿到設(shè)計(jì)圖后一定要靜心思考，多觀察。先分框架然后規(guī)劃結(jié)構(gòu)，編寫代碼。特別在大型項(xiàng)目中，合理使用模塊化的開發(fā)不論從整體進(jìn)行還是拓展維護(hù)都有相當(dāng)大的好處。
（2）關(guān)于 hack很多同學(xué)在頁面開發(fā)時(shí)上網(wǎng)搜索最多的就是 hack 了，是否我們完全要依賴 hack 來實(shí)現(xiàn)頁面兼容性，答案是否定的。大家經(jīng)常比喻 IE6 向我們?nèi)隽艘粋€(gè)謊，結(jié)果我們要再撒一百個(gè)謊來圓這個(gè)謊。不否認(rèn) IE6 經(jīng)常讓我們口吐鮮血，但不代表我們用更多的“謊言”來彌補(bǔ)就可以心安理得。大部分情況下可以通過變換思路調(diào)整 HTML 結(jié)構(gòu)，或使用一些雖然無法解釋但相對安全的 css 來干掉 hack。誰都無法預(yù)計(jì)使用 hack 什么時(shí)候會(huì)讓我們栽一個(gè)大跟頭。比如觸發(fā) layout 或 position:relative 就可以幫助解決很多 IE6 的問題。
（3）優(yōu)美的代碼：看到合理的標(biāo)簽使用、良好的注釋、清晰的代碼結(jié)構(gòu)、用意準(zhǔn)確的 css 不僅猶如欣賞一個(gè)藝術(shù)品，更為下游開發(fā)和協(xié)同開發(fā)降低了不小的溝通成本。特別是 HTML5 提供了更豐富的語義化標(biāo)簽，它們都苦苦地在等待戰(zhàn)場上的沖鋒號，讓我們?nèi)ソ夥潘鼈儼桑?/p>
(4)“工欲善其事，必先利其器”，除了實(shí)戰(zhàn)經(jīng)驗(yàn)和代碼習(xí)慣的形成可以幫助我們提高效率外，想要提高對自己開發(fā)的進(jìn)度掌控能力，還有很多輔助工具可以幫助我們進(jìn)行頁面開發(fā)。比如使用 Less 或 Sass 可以幫助我們拓展和組織 CSS，大大提高 CSS 的編寫效率增加了可維護(hù)性。
(5)與HTML5的結(jié)合，HTML5時(shí)代的來臨伴隨著移動(dòng)互聯(lián)網(wǎng)的興起創(chuàng)造了更大的機(jī)會(huì)，還有太多的東西值得我們?nèi)W(xué)習(xí)去發(fā)現(xiàn)。 HTML5 提供了豐富的 JS API 接口，需要我們?nèi)パ芯浚籆SS3的絢麗吸引了足夠多的眼球，需要我們?nèi)パ芯浚灰苿?dòng)設(shè)備上如何開發(fā)更加適配的頁面，需要我們?nèi)パ芯俊?/p>
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
