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