整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
7. 開(kāi)始使用 Command (命令) 菜單 (如果你還沒(méi)有用過(guò)的話)
有一些 Chrome 調(diào)試工具的功能被深深的隱藏在特別的面板中，菜單中等等。并且有一些甚至隱藏在這些地方之下。這也是為什么 Command 菜單 是一個(gè)在工具盒中必不可少的工具。
如果你在 WebStorm 中使用過(guò) Find Action (查找動(dòng)作) 或者 Visual Studio Code 中的 Command Palette 那么 (Command 菜單) 也是類似的功能。可以這樣讓它顯示出來(lái)：
你可以看到命令的輸入和一系列的可供你選擇的命令，按照我在下圖所選擇的類型被分組排列。
順便說(shuō)一句. 我個(gè)人認(rèn)為上面這張圖，是對(duì)于 DevTools 有多么強(qiáng)力的最好的象征
讓我們一起來(lái)看看隱藏在這里的精華吧，一起？
18.截屏，大小通吃
如果你想對(duì)一個(gè)特別的 DOM 節(jié)點(diǎn)進(jìn)行截圖，選中那個(gè)節(jié)點(diǎn)，打開(kāi) Command 菜單并且尋找節(jié)點(diǎn)截圖的命令。
更有用的是什么呢，你同樣可以用這種方式全屏截圖 - 使用 Capture full size screenshot。請(qǐng)注意，我們說(shuō)的是全屏，并不是嵌入頁(yè)面的一部分。我記得這可是得使用瀏覽器插件才能做到的！
19.快速切換面板
DevTools 的部分使用雙面板布局（例如：元素或者資源面板）經(jīng)常將它們以適合閱讀的方式展示出來(lái)，根據(jù)屏幕可用的部分，將它們橫向或者縱向的排列。有時(shí)候這個(gè)布局卻并不是你喜歡的。
（你是否重置過(guò)DevTools呢？將樣式面板將其從html預(yù)覽的底部移動(dòng)到右邊或者其他的周圍位置呢？是的，這就是我所說(shuō)的）
打開(kāi) Commands 菜單并且輸入layout,你會(huì)看到 2 到3個(gè)可供選擇的項(xiàng)(當(dāng)前你已經(jīng)激活的選項(xiàng)不會(huì)在這里顯示)：
選擇你需要的
20.快速切換主題
你是否突然開(kāi)始討厭強(qiáng)光，并且不能忍受一直看著白光閃閃的屏幕呢？或者你一直都在黑暗的模式下工作，突然太陽(yáng)出來(lái)了，照在你的 DevTools 上所以你什么都看不到？
在 Commands菜單中尋找與 theme 相關(guān)的選項(xiàng)，以實(shí)現(xiàn)在明亮&暗黑兩種主題之間的切換。
好的，今天就分享這么多啦~
作者：dendoink
鏈接：https://juejin.im/post/5c0ee12551882545e24ef291
多學(xué)習(xí)HTML5的小伙伴在學(xué)習(xí)的過(guò)程中都遇到過(guò)這樣的問(wèn)題：為什么感覺(jué)能做出來(lái)的頁(yè)面，然而做起來(lái)卻總是諸多問(wèn)題?千鋒廣州小編告訴你，其實(shí)這是正常現(xiàn)象，誰(shuí)也不能幾天就成為大師，你的實(shí)踐還太少了!練習(xí)多了，經(jīng)驗(yàn)多了，靜態(tài)網(wǎng)頁(yè)自然也就手到擒來(lái)。
靜態(tài)的網(wǎng)頁(yè)其實(shí)就是由兩部分組成，一個(gè)是底層結(jié)構(gòu)HTML，另外一個(gè)就是負(fù)責(zé)修飾結(jié)構(gòu)的CSS。其實(shí)書(shū)寫(xiě)靜態(tài)網(wǎng)頁(yè)就像小時(shí)候過(guò)家家，首先得把需要的家庭成員找齊了，即首先考慮要做一個(gè)什么樣的網(wǎng)站，例如一個(gè)綜合類網(wǎng)站包括：搜索框、導(dǎo)航、文章類別模塊、文章標(biāo)題以及一部分廣告板塊;一個(gè)博客主頁(yè)包括：導(dǎo)航、文章縮略、文章搜索、文章導(dǎo)航以及沒(méi)有顯示但可能會(huì)有的評(píng)論區(qū)。
寫(xiě)頁(yè)面的時(shí)候是有劇本的，這個(gè)劇本指網(wǎng)頁(yè)設(shè)計(jì)圖，或者某個(gè)現(xiàn)有網(wǎng)頁(yè)，建議大家在模仿網(wǎng)上現(xiàn)有網(wǎng)頁(yè)的時(shí)候利用瀏覽器自帶的截圖功能，把整個(gè)完整的頁(yè)面截取下來(lái)，QQ瀏覽器，360瀏覽器都可以做到。這樣的優(yōu)點(diǎn)在于可以利用PS自己一步步測(cè)量數(shù)據(jù)、切圖都做到親力親為，并且做到了頁(yè)面數(shù)據(jù)的精準(zhǔn)度，而不是隨意的給數(shù)據(jù)，或者是利用瀏覽器的F12功能查看原網(wǎng)頁(yè)的數(shù)據(jù)。
按照設(shè)計(jì)好的劇本接著就可以找對(duì)應(yīng)的成員了，例如百度網(wǎng)頁(yè)從上往下分為導(dǎo)航頭部、中間logo和表單、尾部二維碼和文字，相對(duì)來(lái)說(shuō)頁(yè)面的整體布局是比較簡(jiǎn)單的，當(dāng)然還有很多不同類型的頁(yè)面，布局要復(fù)雜一些。
當(dāng)看到一個(gè)網(wǎng)頁(yè)時(shí)，需要在腦海當(dāng)中對(duì)頁(yè)面進(jìn)行一個(gè)簡(jiǎn)單的掃描，如果把頁(yè)面當(dāng)成一張紙，要怎么樣從大到小一點(diǎn)點(diǎn)分割。當(dāng)有了初步的認(rèn)識(shí)之后，就可以把這些東西轉(zhuǎn)化成HTML結(jié)構(gòu)，所有不同顏色的框框在寫(xiě)的時(shí)候用的都是DIV。
從上往下，從大到小一點(diǎn)點(diǎn)先把某個(gè)模塊以不同的顏色色塊利用代碼堆積出來(lái)。保證大的模塊布局沒(méi)問(wèn)題之后，在往里面放一些小的東西，比如圖片img、表單form input、文字、超鏈接a、列表ul li，這時(shí)候簡(jiǎn)單的頁(yè)面結(jié)構(gòu)就出來(lái)了。
接下來(lái)要把寫(xiě)好的結(jié)構(gòu)進(jìn)行美化，不然頁(yè)面就會(huì)一團(tuán)亂麻，沒(méi)有美感，而網(wǎng)頁(yè)當(dāng)中潤(rùn)色部分是用CSS來(lái)做的。這個(gè)環(huán)節(jié)需要更加細(xì)心，例如百度首頁(yè)導(dǎo)航紅色框整體在綠色框的右邊，需要給紅色框添加float：right;紅色框里面文字的字號(hào)大小，字體，字體顏色，水平間距，垂直間距都需要一點(diǎn)點(diǎn)寫(xiě)。如果在寫(xiě)的過(guò)程中遇見(jiàn)了問(wèn)題，可以借助Chrome瀏覽器的調(diào)試功能，哪里錯(cuò)了用箭頭點(diǎn)哪里，結(jié)構(gòu)看左邊，CSS看右邊，看看CSS屬性有沒(méi)有顯示，有沒(méi)有劃掉，有沒(méi)有黃色報(bào)錯(cuò)等等。
在做頁(yè)面時(shí)，需要大量的練習(xí)，才可以熟能生巧。一個(gè)頁(yè)面寫(xiě)完之后，總結(jié)一下這個(gè)頁(yè)面在書(shū)寫(xiě)過(guò)程中遇到了哪些問(wèn)題，是怎么解決的，為什么這樣解決，深入思考這個(gè)模塊的這個(gè)效果可不可以用其他的方法來(lái)實(shí)現(xiàn)，以做到舉一反三。
千鋒廣州小編建議大家在HTML5的過(guò)程中輪與實(shí)踐要相結(jié)合，配合實(shí)戰(zhàn)項(xiàng)目講解網(wǎng)站頁(yè)面布局，一定要學(xué)好HTML、CSS，基礎(chǔ)打好了，才能更有信心面對(duì)之后的挑戰(zhàn)。
們學(xué)習(xí)如何應(yīng)用CSS給元素添加邊框。
CSS邊框?qū)傩裕试S我們指定一個(gè)元素邊框的樣式、寬度和顏色。
我們先來(lái)學(xué)習(xí)元素邊框的樣式。border-style 屬性指定了要顯示什么樣的邊框。允許使用以下的值：
dotted，定義一個(gè)點(diǎn)狀的邊框
dashed ，定義一個(gè)虛線邊框
solid，定義一個(gè)實(shí)線邊框
double，定義一個(gè)雙倍的邊框
none，定義無(wú)邊框
hidden，定義一個(gè)隱藏的邊框
我們來(lái)實(shí)驗(yàn)一下。
創(chuàng)建一個(gè) 009-css-borders 文件夾，在文件夾里創(chuàng)建一個(gè) css-borders.html 文件和一個(gè)border-style.css 文件。
構(gòu)建 html 基礎(chǔ)代碼，引入樣式文件。
編寫(xiě) p.dotted 回車，填入文本點(diǎn)狀的邊框。按照同樣的方法，添加其他的幾個(gè)邊框結(jié)構(gòu)。
<p>點(diǎn)狀的邊框</p>
<p>虛線邊框</p>
<p>實(shí)線邊框</p>
<p>雙倍的邊框</p>
<p>無(wú)邊框</p>
<p>隱藏的邊框</p>
<p>混合邊框</p>
<p>速記邊框</p>
在 css 里定義 p.dotted 選擇器，聲明樣式 border-style: dotted。定義其他幾個(gè)選擇器，全部聲明 border-style 屬性，值分別為：dashed、solid、double、none、hidden。
在瀏覽器里查看結(jié)果，邊框的效果都做好了。
border-style: none 和 border-style: hidden 視覺(jué)上都不顯示邊框，有什么區(qū)別呢？
在 html 里編寫(xiě)：table 大于 括號(hào) tr 大于 td 乘以3 再乘以3 （table>(tr>td*3)*3）。回車，創(chuàng)建一個(gè)3行3列的表格。給 table 元素定義border屬性，值為 1。 給第二行第一個(gè)和第二個(gè)td 定義 class屬性，值分別為 lm、m。
在 css 里定義 table 選擇器，聲明樣式 border-collapse: collapse，讓表格線細(xì)一些。這個(gè)屬性我們?cè)诤竺鏁?huì)詳細(xì)講解。
定義 td.lm 選擇器，聲明樣式 border-style: dashed。定義 td.m 選擇器，聲明樣式 text-align: center。
看一下效果，左中和左上、中以及左下邊框是相鄰的，在這些單元格上定義邊框樣式一定會(huì)產(chǎn)生沖突。
給 td.m 選擇器添加樣式聲明 border-style: none。
我們看，沒(méi)有去掉任何邊框。
再把 border-style 屬性值改為 hidden。
我們?cè)倏矗虚g的 td 邊框消失了，當(dāng)然，左側(cè)相鄰的邊框也消失了。
當(dāng)表格單元格相鄰邊框產(chǎn)生沖突時(shí)，border-style: hidden 優(yōu)先級(jí)最高，border-style: solid 優(yōu)先級(jí)次之，border-style: none 優(yōu)先級(jí)最低。
還是這個(gè)表格示例，單元格左中和中之間用點(diǎn)線來(lái)分隔。如何實(shí)現(xiàn)呢？
在 td.m 選擇器里將 border-style 的值改為 dotted。
很顯然，并不是我們要的效果。看來(lái)，得把單元格左中的右邊線隱藏。如何控制一條邊框線呢？
可以在 border-style 中間添加一個(gè)表示方位的詞，就可以設(shè)置單個(gè)邊框線了。
比如，給 td.lm 選擇器聲明 border-right-style 屬性，就可以設(shè)置這個(gè)單元格右邊框樣式了，這里設(shè)置的值為 none。
效果實(shí)現(xiàn)了。
把這里的 border-right-style 的值設(shè)置為 hidden 是什么效果呢
通過(guò)這個(gè)例子發(fā)現(xiàn)，可以分別指定每個(gè)邊框的樣式。這些屬性有 border-top-style、border-right-style、border-bottom-style、border-left-style，用來(lái)設(shè)置元素的上、右、下、左邊框的樣式。
除了單個(gè)樣式屬性外，border-style 的屬性值，還可以使用混合的簡(jiǎn)寫(xiě)方法。有四種寫(xiě)法：
第一種寫(xiě)法：四個(gè)值，分別代表上邊、右邊、下邊、左邊的邊框樣式。從頂部開(kāi)始，按照順時(shí)針?lè)较騺?lái)設(shè)置值。比如 border-style: dotted solid double dashed，設(shè)置上邊框?yàn)樘摼€、右邊框?yàn)閷?shí)線、下邊框?yàn)殡p線、左邊框?yàn)樘摼€。
第二種寫(xiě)法：三個(gè)值，分別代表上邊、左右邊、下邊的邊框樣式。第一個(gè)值表示上邊框的樣式、第二個(gè)值表示左邊和右邊框的樣式，第三個(gè)值表示下邊框的樣式。比如 border-style: dotted solid double，設(shè)置頂部邊框?yàn)樘摼€、左右邊框?yàn)閷?shí)線，底部邊框是雙線。
第三種寫(xiě)法：兩個(gè)值，分別表示上下邊，左右邊的邊框樣式。第一個(gè)值表示上下邊框的樣式、第二個(gè)值表示左右邊框的樣式。比如 border-style: dotted solid，設(shè)置頂部和底部的邊框是點(diǎn)狀的、右邊和左邊的邊框是實(shí)心的。
第四種寫(xiě)法：一個(gè)值，表示四個(gè)邊框的樣式。比如 border-style: dotted，四個(gè)邊都是點(diǎn)狀邊框。
在 html 里添加一個(gè) p 元素，定義 屬性。填入一些文本。
在 css 里定義 p.mix 選擇器，聲明樣式 border-style: dotted dashed solid double。
最后一個(gè)段落的混合邊框?qū)崿F(xiàn)了。
除了設(shè)置邊框樣式，還可以設(shè)置邊框的寬度。
border-width 屬性用于設(shè)置四個(gè)邊框的寬度。寬度可以被設(shè)置為一個(gè)特定的尺寸，以 px、em等為單位，或者使用三個(gè)預(yù)定義的值： thin、medium、thick——薄、中、厚。
給前三個(gè) p 元素全部聲明 border-width 樣式屬性，值分別為 5px，0.5em，thick。
三個(gè)段落的邊框線寬度就添加好了。
和邊框樣式 border-style 屬性一樣，邊框?qū)挾鹊闹狄部梢允褂没旌系暮?jiǎn)寫(xiě)方法，可以給 border-width 設(shè)置四個(gè)值、三個(gè)值、兩個(gè)值或一個(gè)值。
給第四個(gè) p 元素添加 border-width: 5px 10px; 樣式。
我們看，這個(gè)邊框?qū)挾壬舷率?5 像素，左右是 10 像素。
再給最后一個(gè) p 元素添加 border-width: 2px 3px 4px 5px 樣式。
這樣，四邊不同的邊框，就擁有了不同的寬度！
除了設(shè)置邊框樣式，還可以設(shè)置邊框的顏色。
border-color 屬性用于設(shè)置四個(gè)邊框的顏色。可以通過(guò)顏色名稱、十六進(jìn)制顏色值、RGB顏色值來(lái)設(shè)置顏色，也可以通過(guò) transparent 來(lái)設(shè)置透明。
給前三個(gè) p 元素全部聲明 border-color 樣式屬性，值分別為 red，#00ff00，rgb(0, 0, 255)。
三個(gè)段落的邊框線顏色就添加好了。
和邊框樣式 border-style 屬性一樣，邊框顏色的值也可以使用混合的簡(jiǎn)寫(xiě)方法，可以給 border-color 設(shè)置四個(gè)值、三個(gè)值、兩個(gè)值或一個(gè)值。
給第四個(gè) p 元素添加 border-color: purple orange 樣式。
我們看，這個(gè)邊框上下是紫色，左右是橙色。
再給最后一個(gè) p 元素添加 border-color: red green blue yellow 樣式。
這樣，四邊不同的邊框，就擁有了不同的顏色！
和字體 font 屬性一樣，邊框也可以使用速記屬性。為了縮短代碼，可以在一個(gè) border 屬性中指定 border-style、border-width、border-color 等單獨(dú)的邊框?qū)傩浴１热纾篵order: 5px solid red，表示設(shè)置元素的邊框?qū)挾葹?像素，邊框樣式為實(shí)線，邊框顏色為紅色。
注意，border-style 是必須要聲明的，其他兩個(gè)可以省略，省略后會(huì)采用 1 像素、黑色線這兩個(gè)默認(rèn)值。
在 html 里添加一個(gè) p 元素，定義 屬性。填入一些文本。
在 css 里定義 p.shorthand 選擇器，聲明樣式 border: 5px solid #ccc。
一行樣式代碼就實(shí)現(xiàn)了邊框樣式、寬度和顏色的設(shè)置！
這個(gè)簡(jiǎn)寫(xiě)的方法默認(rèn)四個(gè)邊，全部定義了相同的邊框。能不能定義單個(gè)邊呢？可以的！
很自然的猜到，通過(guò)聲明 border-top，border-right，border-bottom，border-left 四個(gè)屬性，值為上面簡(jiǎn)寫(xiě)的方式，就可以單獨(dú)定義元素的某一條邊了。
注釋掉這行代碼，再聲明一個(gè) border-bottom 屬性，值同樣是 5px solid #ccc。
一行代碼，同樣實(shí)現(xiàn)了一條底部的邊框線
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
