整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
篇文章主要介紹了CSS樣式更改篇中的字體設置Font&邊框Border設置，這篇文章分享列表、表格和輪廓，一起來看看吧。
<ul style='list-style-type:square'><li></li></ul>
none 無標記
disc 實心圓
circle 空心圓
square 實心方塊
decimal 數字
none 無<ul><li style='list-style-image:url(1.png)'></li></ul><ul><li style='list-style-position:inside'></li></ul>
inside 列表項目標記放置在文本以內
outside 列表項目標記放置在文本以外這三者屬性可以放在list-style中統一設置。
table
{
border-collapse:collapse
}
separate 邊框會被分開
collapse 邊框合并為一個單一的邊框設置水平對齊方式，比如左對齊、右對齊或者居中
td
{
text-align:right
}
設置垂直對齊方式，比如頂部對齊、底部對齊或居中對齊
td
{
vertical-align:bottom
}table
{
border-spacing:10px 50px
}
可以使用像素，不允許負值。
如果定義一個length 參數，那么定義的是水平和垂直間距
如果定義兩個length 參數，那么第一個設置水平間距，而第二個設置垂直間距caption
{
caption-side:bottom
}
top 表格標題定位在表格之上
bottom 表格標題定位在表格之下table
{
empty-cells:hide
}
hide 不在空單元格周圍繪制邊框
show 在空單元格周圍繪制邊框table
{
table-layout:fixed;
}
automatic 列寬度由單元格內容設定
fixed 列寬由表格寬度和列寬度設定div
{
outline-color:red
}div
{
outline-style:dotted
}
和邊框的風格是一樣的div
{
outline-width:1px
}這篇文章主要介紹了CSS樣式更改篇中的列表、表格和輪廓，希望讓大家對CSS選擇器有個簡單的認識和了解。
****看完本文有收獲？請轉發分享給更多的人****
IT共享之家
想要學習更多，請前往Python爬蟲與數據挖掘專用網站：http://pdcfighting.com/
家好，我是 Echa。
今天來分享 50 個超實用的 Chrome 瀏覽器擴展！
JSON Viewer Pro 用于可視化JSON文件。其核心功能包括：
輸入界面如下：
格式化之后：
JSONVue 是一個JSON數據查看器，主要用來格式化JSON數據：
Library Sniffer 是一款給開發者使用的工具，能夠探測當前網頁所使用的類庫、框架和服務器環境，為開發者提供了方便。
Wappalyzer 擴展可以用來識別網站背后的底層技術。通過此擴展，可以了解特定應用程序是否是用 React、Vue、Angular、PHP等編寫的。還可以訪問有關 Web 服務器、編程語言、框架、內容管理系統、分析的信息工具、數據庫等。
WhatRuns 擴展程序只需單擊一下即可找到任何網站上使用的技術。
使用PerfectPixel插件可以將設計圖加載至網頁中，與已成型的網頁進行重疊對比，以幫助開發和設計人員規范網頁像素精度。這是一款可以優化前端頁面顯示的Chrome插件。
可以使用此擴展程序快速清除緩存，無需任何確認對話框、彈出窗口等。可以在選項頁面上自定義要清除的數據和數量，包括：應用程序緩存、緩存、Cookie、下載、文件系統、表單數據、歷史記錄、索引數據庫、本地存儲、插件數據、密碼和 WebSQL。
VisBug 是一個使用 JavaScript 構建的開源網頁設計調試工具，它可以讓用戶使用點擊式和拖放式界面來查看網站的元素。
Debug CSS 是一個幫助調試CSS的插件。他可以顯示出頁面元素的輪播，按住Ctrl，并將鼠標懸浮在元素上，即可查看其信息：
CSS Viewer 是一款適用于 Web 開發人員的高效 Chrome 擴展。顧名思義，CSS 查看器可以顯示將鼠標懸停在任何網頁上的元素的 CSS 屬性。
EditThisCookie 是一個 cookie 管理器。可以添加，刪除，編輯，搜索，鎖定和屏蔽cookies。
React Developer Tools 是開源 JavaScript 庫 React 的 Chrome DevTools 擴展。它允許我們在 Chrome 開發者工具中檢查 React 組件層次結構。安裝此插件之后，將在 Chrome DevTools 中獲得兩個新選項卡："?? Components" 和 "?? Profiler"：
Vue.js devtools 是一款基于chrome瀏覽器的用于調試Vue.js應用程序的插件，可以使得開發人員大大提高調試效率。支持用戶對DOM結構數據結構進行解析和調試功能。
Augury 可以幫助開發人員在 Google Chrome 瀏覽器中調試和分析 Angular 應用程序。
Firebug Lite是火狐瀏覽器中著名的開發者工具firebug插件移植到Chrome中的插件，在Chrome中安裝了Firebug Lite插件以后，開發人員可以像在火狐瀏覽器中使用firebug一樣熟悉的方式來調試網頁內容，其包含了基本的HTML、CSS以及Javascript的調試功能，用于幫助網頁前端開發工程師快速地調試網頁，以便及時地找到網頁中的BUG并及時修復。
HTML Validator 在 Chrome 的開發者工具中添加了 HTML Validator。HTML 頁面的錯誤數通過瀏覽器狀態欄中的圖標顯示，詳細信息可以在瀏覽器的開發者工具中查看。
Web Developer 擴展為帶有各種 Web 開發工具的瀏覽器添加了一個工具欄按鈕。該擴展適用于 Chrome 和 Firefox，并且可以在這些瀏覽器支持的任何平臺上運行，包括 Windows、macOS 和 Linux。
Requestly 是一款Chrome和Firefox瀏覽器插件，提供URL轉發、修改HTTP請求和結果、插入腳本等功能。
Window Resizer 主要用來調整瀏覽器窗口的大小以模擬各種屏幕分辨率。
Responsive Viewer 是在一個視圖中顯示多個屏幕的 Chrome 擴展程序。該擴展將幫助前端開發人員在開發響應式網站/應用程序時測試多個屏幕。
此插件允許直接從瀏覽器發送跨域請求，而不會收到跨域錯誤。可以使用此插件覆蓋 Request Origin 標頭，并將 Access-Control-Allow-Origin 設置為 *.
ColorPick Eyedropper 是一個放大的吸管和顏色選擇器工具，可讓從網頁等中選擇顏色值。
CSS Peeper 用于檢查和復制元素樣式的優秀工具，使用 CSSPeeper 可以將鼠標懸停在網頁中的任何元素上，然后單擊鼠標即可復制元素的樣式。
24. Dimensions
Dimensions是一款能幫助使用者對網頁上各種元素屬性之間的距離進行測量的Chrome頁面元素測量插件，該插件在點擊啟動插件圖標后，可以對頁面中圖像、輸入字段、按鈕以及視頻等頁面元素之間上下左右的方位尺寸進行測量，同時還可以通過使用快捷鍵來快速啟用或關閉該插件的功能，簡單實用。
Site Palette 用于生成調色板。設計師和前端開發人員必備的工具。可以通過這款插件輕松獲取網站的配色方案。
ColorZilla 是一款功能強大地提取網頁色彩的工具；也是個快速的對顏色進行調節的Chrome插件，許多的用戶將這款軟件稱呼為顏色吸取插件，它提取的顏色是非常的多樣化，還可生產css顏色的代碼等。
當我們想查看網頁中文字的字體時，最常用的方法就是在控制臺查看文字的字體樣式。那還有沒有更簡單的方法呢？WhatFont 就是一個查看網頁字體的Chrome擴展。只需要的點擊擴展圖標，再點需要查看為文字即可：
Fonts Ninja 可以從任何網站識別字體、添加書簽、試用并購買它們。
使用 BrowserStack 快速啟動擴展在任何瀏覽器中啟動一個新的測試會話。最多可設置 12 個瀏覽器以實現快速訪問并最大限度地減少切換瀏覽器所花費的時間。
Toby 是一款 Chrome 新標簽頁工具，能夠將未讀的標簽頁分組顯示在新標簽頁中，這樣就能把所有未看完的標簽頁都關閉了。分組相當于多個 Chrome 窗口，將你的標簽頁都拖進 Toby 中，就不需要實時開著占地方了。
該擴展提供了每日熱門開發者新聞，不需要再浪費時間搜索高質量的文章了。
Momentum 擁有漂亮的新標簽頁面，每日更新精彩背景壁紙圖片，可設置每日新鮮事焦點以及跟蹤待辦事項，無廣告，無彈窗。
The Great Suspender 是一個輕量級的擴展用來減少 Chrome 的內存占用。如果同時打開許多選項卡，在可配置的時間之后未查看的選項卡將在后臺自動掛起，從而釋放該選項卡消耗的內存和 CPU。
Session Buddy是一個可以幫助用戶查看、新增、編輯當前網站Session狀態的Chrome插件。用戶可以利用該插件保存網站當前的狀態以便在關閉Chrome或關閉計算機后恢復，從而達到節省內存的作用。
Octotree 旨在讓 GitHub 體驗更好。通常，為了檢查 Github 中的子文件夾，需要手動單擊文件夾并導航。Octotree 擴展解決了這個問題。此擴展在項目的左側顯示存儲庫的目錄結構，這有助于更好地理解文件夾結構。
1_EKF88oqIyX6FzgueCKdtXg.gif
File Icons for GitHub and GitLab 可以將 GitHub 和 GitLab 上的原始文件圖標替換為特定文件類型的圖標。
ax DevTools 是一個快速、輕量級但功能強大的測試工具，由 Deque 開發的世界上最值得信賴的可訪問性測試引擎 axe-core 驅動。使用 ax DevTools 在網站開發過程中查找并修復更多可訪問性問題。
OctoLinker 可以將特定語言的語句（如 include、require 或 import）轉換為鏈接。當打開一個包含多個導入語句的文件并且想要快速打開它時，只需將鼠標懸停在鏈接的文件上并單擊即可打開。
此擴展可幫助 Web 開發人員分析網頁是否違反最佳實踐。
Check My Links 是一個鏈接檢查器，它可以抓取網頁并查找損壞的鏈接。
Checkbot 是用于驗證一組HTML頁面上的鏈接的工具。Checkbot可以檢查一個或多個服務器上的單個文檔或一組文檔。它會創建一個報告，該報告匯總了引起某種警告或錯誤的所有鏈接。
Google Page Speed Insighs 是一款旨在優化所有設備上的網頁、提高網頁加載速度的工具。
META SEO inspector是一款可以幫助用戶分析網頁的meta信息并得到SEO評估的谷歌瀏覽器插件。
Ghostery 是強大的隱私保護擴展程序。其主要有以下功能：
AdBlock 用來在YouTube、Facebook、Twitch和其他你喜愛的網站上攔截廣告和彈窗。
番茄工作法（Pomodoro?）時間管理助理。? 長短兩種休息時間 ? 帶有倒計時顯示的工具欄圖標 ? 追蹤Pomodoro歷史和統計訊息 ? 可配置的長休間隔 ? 可配置的定時器時長 ? 桌面與新標簽頁通知 ? 超過20種音效可選的聲音通知 ? 計時器秒針走動音效
Loom 可以用來快速錄制視頻，并且能夠將錄制的視頻上傳到指定的網頁中，Loom還支持在用戶點擊啟動插件時，立即捕捉屏幕圖像，同時開始視頻錄制操作，還可以將錄制好的視頻復制到粘貼板中存儲。
GoFullPage 是一款全屏截圖插件（整個網頁截圖），完整捕獲您當前頁面的屏幕，進行滾動截圖，而無需任何額外的權限。單擊擴展程序圖標，然后將其傳輸到屏幕快照的新標簽頁中，可以在其中將其下載為圖像或PDF，甚至只需拖動即可，保存到桌面。
BetterViewer 可以提供更好的圖像查看體驗，旨在替代基于 Chrome 瀏覽器中內置的圖像查看模式。使用時，只需在頁面右鍵點擊圖片，選擇“在新標簽頁中打開圖片”即可。
svg-grabber 是一個快速預覽并從網站獲取所有 svg 的工具。可以用來預覽、下載和復制網站中所有 SVG 圖標和插圖的代碼。
樣的地方，同樣的時間，又跟大家見面了。
很多人問我，前端開發入門怎么開始？這里呢，先看下我之前發的文章有大體的概括思路跟流程在里面。今天主要分享入門第一篇： HTML。
由于時間有限，空間有限，關于HTML歷史我就不嘮叨了，大家去w3c，菜鳥教程都可以查看的到，我主要是跟大家講講怎么快速理解并且掌握HTML。在文章最后我會給出總體輪廓圖，讓大家看完能夠清晰的帶著思路收藏起來。
一樣的老規矩，列出熟悉的流程：
1.HTML是什么
2.它跟瀏覽器有著什么樣的關系
3.HTML在工作中常用的東西是哪些
這四個流程講下來，你就知道我們打開的網頁原來就是這個樣子。
繼續，長篇大論我就不講了，感覺有點虛，直接進入主題關鍵是“懂”。那么首先第一步，HTML是什么？
這樣理解吧，我們可以把瀏覽器，屏幕當成一張A4紙，你在紙上面寫個人獎勵，有頭有尾，還有中心，那么網頁也是一樣，它也有頭，有尾，組合在一起的。我們只不過換了個地方，換了種方法在寫東西而已。這樣在你的大腦里，HTML就相當于是A4紙了，正如HTML的定義也是相當如此，即：它是超文本標記語言（相當于可以理解為很高級的A4紙）。帶著這種理解去開HTML的定義，你肯定收獲很大，比起你腦袋一片空白去看代碼要事半功倍的多。
第二點，這個HTML跟瀏覽器是怎么配合的？我們可以簡單理解為，你的A4紙，寫出來的東西，得讓人看的懂吧，別人在看的時候是不是在分析你的文字或者圖片。那么同樣的，瀏覽器它作用于幫助大家把代買看懂，然后用大家看的懂得形式展現出來。起到一個解析你的HTML作用。那么總結下來就是你寫的HTML，瀏覽器幫助你解析展現給大家。
到這里，說了這么多，一個代買沒見著？笑話，這怎么分享啊！ 不，我覺得大家先大腦有個概念，這樣下面的代碼就幾分鐘理解透徹。
好了，小二，來份HTML！ 。。。好嘞客觀稍等片刻。。。熱騰騰的HTML上來了
菜名：HTML
這是一個標準的HTML5文檔（不要怕，其實還是HTML，只是版本不同而已，不要想的太復雜），我們來用A4紙的例子解釋下。首先第一行，文本類型HTML的意思，直接翻譯就好，因為瀏覽器不只會讀懂HTML，還會有其他的。第二行是這個文檔解析標準英文。第三行head的意思就是頭咯，那么這就是文檔的頭，相當于A4紙的title，里面有meta告訴瀏覽器用的，說我是中文，不要給我解析成什么俄羅斯語言。。。繼續下面body，身子的意思，A4紙正文的意思。
為什么我不跟大家先說這些是標簽呢？--因為，個人認為，先知道這些代表什么，然后再知道怎么組裝他們更適合理解。
那么看完上面現在跟大家講：標簽是什么，其實理解簡單點就是組合HTML的規則，比如這個標準的HTML文檔，你要組合它，你的按規則來，不能亂寫。那么組合方法是什么，其實呀，用HTML規定的東西拼接起來，HTML規定標簽有兩種，單標簽跟雙標簽，單的就是上面的meta，雙的就是head，成雙成對出現的就是雙的，單個出現的就是單的。這還不好理解呀，那么問題來了，有多少標簽？ 網上搜索你就知道了，帶著這樣的理解思路，一看就懂咯。
現在回到流程第三步，最常用的在開發過程中的有哪些除了上面標準的格式。
以上就是最常用的了，仔細看可以看到有單標簽，有雙標簽。這些標簽組合上HTML標準格式，就是我們看到的網頁了。
那么，有人就問了，我該怎么寫呢？不急，繼續往下看。
仔細重回上面看，可以看到body里面什么也沒有，這里就是你可以寫常用標簽的地方，網頁標簽組合的規則是：由外到內。也就是說它們存在包含關系，比如：一個框框里面有文字
div就是框，就是拼接的磚塊，它包含著你想表達的東西。那么，整個網頁外層就是一個大大的div框，里面包含了文字，圖片，選擇框等等我們看到的東西。
理解方法思路大概就是這個樣子，這些里面還有數多標簽，大家可以去網上查查，然后這樣去理解，基本一看就懂了。哦？原來網頁就是這個樣子。。。下面是我畫的一張大體圖片。
用HTML解釋下上圖（基本簡單的網站模型），這個外面粉色的框是個大的DIV，包含了里面的頭部，輪播圖，還有三塊內容．頭部也是一個DIV塊，里面包含了我們可以選擇進入的導航。輪播圖也是一個DIV，包含了我們看到的圖片。下面三塊內容也是一個DIV，包含了三塊內容，三塊內容分別又有DIV包含著。這下明白了，從最外層包含到最內層，就是前面講的：由外到內。這樣整個的結構清晰了，大家再去看些資料，就OK了。HTML文檔其實就這么簡單，沒有邏輯成分，只要找到理解技巧，看下就會了，比起看幾個小時的視頻而且還很多的專業名詞去理解要來的輕松些。
那么這些磚磚瓦瓦都砌上了，怎么把它們放到理想的位置上呢？其實呀，就是下一篇將要分享的CSS在搞的鬼！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
