整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標簽（組件），通過這些標簽避免你在項目中集成復雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標簽就能很方便的調用系統組件。
在項目中，你可能希望通過調色板組件動態調整顏色，這時你可以使用 <input type="color"> 就可以輕松調用一個調色板組件，省去你在找第三方組件，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX
在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調，這時你可以使用<blockquote> 標簽來強調你用的內容，示例效果如下所示
示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd
如果從頭寫個音頻播放器是一個費時費力又有挑戰性的工作，但是你現在可以使用<audio>標簽就能很輕松的調用。系統的音頻播放器，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/oNevrEb
我們不僅能很方便的調用系統的音頻組件，我們還可以使用<video> 標簽調用視頻組件，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ
折疊列表的需求也是比較常見的，點擊標題展開對應的信息內容，這時 <details> 標簽就派上用場了，示例效果如下所示：
gif
項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV
日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復雜的樣式和交互需求，使用<input type="date"> 這個標簽就能輕松的勝任，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE
滑塊組件也是一個比較常見的組件，主要應用在數值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設置最小值、最大值以及當前值，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv
為了讓內容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當前容器及所見即所得的編輯，示例如下所示：
示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB
有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標簽的話，你需要做的工作就會許多，但是使用<picture> 標簽就能很輕松的完成在不同分辨率下顯示不同圖片的設置，調整瀏覽器的大小，就會根據窗口的大小顯示不同大小的圖片，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/abybomY
十、進度條（Progress Bar）
進度條組件也是個很常見的組件，你可以使用<progress> 標簽就能輕松完成相關外觀的設置，示例效果如下：
示例地址：https://codepen.io/madarsbiss/pen/oNevKdp
如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結合輸入，能很方便的定位到下拉組件的內容，這時候你可以使用 <datalist> 標簽就能滿足上述需求，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ
如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標經過此區域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現，示例效果如下所示：
示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE
今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標簽（組件），感謝你的閱讀。
參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza
第一步， 先關注我】
大家好， 我是胡侃侃。
相信絕大部分人心中最好用的瀏覽器是谷歌Chrome瀏覽器，它簡潔、快速、穩定、而且有著豐富的拓展插件。 然后我這里用了十幾年的Chrome吐血推薦Microsoft Edge 瀏覽器。
而且Microsoft Edge 瀏覽器本身是基于基于谷歌 Chromium 內核的全新瀏覽器，具有像Chrome 瀏覽器一樣的高效穩定的特點。 Microsoft Edge瀏覽器， 最大的優勢在于和系統深度整合， 還實現了Chrome賬號輕松同步。 Edge內置的網頁休眠功能同樣也是好用到起飛。 當然用Edge來替換掉手上的國產瀏覽器也是一個不錯的決定。
傳送門>>
本篇是基于Chrome和Edge瀏覽器的插件， 通過使用這些插件來提高瀏覽器的效率， 讓本身已經非常方便的瀏覽器， 更加強大和增加效率。 本文瀏覽器插件下載是以Edge瀏覽器為準， 在Chrome下面有同名的插件， 需要大家自己去搜索一下。 但Chrome因為Google被關閉訪問的問題， 所以有些插件獲得并沒有那么容易。
在Edge外接程序界面直接搜索和下載， 傳送門>>
下面我們來點評一下有哪些神級插件， 可以讓我們的工作效率得到翻倍提升吧。
一句話點評， ublock origin，比adblock功能更強，資源占用更低。
來自值友的@GN-001的點評，
ublock現在已經非吳下阿蒙了，adblock已經老已了，ublock的元素抓取比較麻煩，adblock方便點，但是adblock太臃腫了，大家打開第一個頁面ublock而可以，但adblock無法攔截!而且占用很高！我用adblock很久了后來出現這個問題，我就在群里問了下他們，他們叫我試試ublock后面就再也沒有換回去了！ublock的抓取元素是有問題的，多個元素在一起他不能一起抓只能一個一個，但他有個問題，他一次只能抓一個，你重新抓的時候他之前抓的就失效，不知道是我不會操作還是本來就有這個問題！adblock就完全沒有這個問題，adblock交互好點！易用點！
傳送門>>
傳送門>>
老牌廣告攔截器， 一款被稱為最佳廣告攔截的工具，在谷歌開發者商店有著破十億的下載量，可想而知它是多受歡迎的呢！Adblock的強項就是攔截過濾網頁廣告，無論是視頻廣告、橫幅廣告，還是彈窗廣告，它都能有效攔截。
AdBlock 是最好的廣告攔截工具，擁有超過 6500 萬用戶，同時也是最受歡迎的擴展程序之一，下載量已突破 3.5 億！
傳送門>>
Infinity New Tab Pro 讓你可以自定義你的新標簽頁. Infinity新標簽頁 (Pro) 將原生新標簽頁替換為您保存的書簽，并提供了多種快捷實用的功能。 自定義標簽頁，可以將網頁裝扮成類似安卓的應用，支持多種搜索引擎切換，支持切換各種精美壁紙，具有 數據備份同步功能。
谷歌很多功能現在都已經無法使用了， 我過去很多信息都保留在Gmail里面， 這里使用這個可以訪問google搜索，gmail，谷歌學術搜索等谷歌產品， 不包含Youtube 谷歌Drive。 傳送門>>
有人說： 如果一個瀏覽器沒有安裝油猴，那可以說是沒有靈魂的。油猴腳本與擴展的功能大致相同，都是賦予瀏覽器更多實用功能，但相比之下更加輕便。
在Microsoft Edge上面， 油猴叫做Tampermonkey。 最早是Mozilla Firefox的一個附加組件， 在FF上面叫Greasemonkey。它讓用戶安裝一些腳本使大部分HTML為主的網頁于用戶端直接改變得更方便易用。Greasemonkey可替網頁加入些新功能、修正網頁錯誤、組合來自不同網頁的數據、或者數繁不及備載的其他功能。寫的好的Greasemonkey腳本甚至可讓其輸出與被修改的頁面集成得天衣無縫，像是原本網頁里的一部分。
現在油猴也是一個跨瀏覽器的用戶腳本插件， 支持Edge，Chrome，FF等多種主流瀏覽器。
傳送門>>
安裝完成油猴以后， 可以看到瀏覽器右上角有一個油猴的圖標， 點擊圖標， 點擊獲得新腳本， 即來到了油猴的安裝腳本頁面。
我這里舉個例子， 我看微博， 只想看我關注過的人， 去除一些不需要的微博推薦， 這樣的過濾腳本， 在油猴里面叫做， Yet Another Weibo Filter。
我們來到了油猴腳本安裝頁面Greasy Fork， 可以直接點擊， 安裝此腳本。 也可以查看這個腳本被下載過多少次。
如上圖， 搜索， Yet Another Weibo Filter。
其實很多用戶， 和我一樣并不希望進入 GreasyFork，去手動查找用戶腳本，或者我根本就不知道這個網站是不是有可以優化的腳本。 那么下載這個Userscript+, 這個腳本可以自動發現適合當前網站的腳本。
暴力猴是一個開源的腳本管理器， 暴力猴是一款非常強大瀏覽器腳本的管理工具。暴力猴的使用要更加方便，而且同樣強大，通過安裝相應站點的腳本信息，我們可以更加方便的進行各類操作。例如：電影站點的解析、網盤的高速下載、資源搜索與下載、廣告屏蔽等等。 回頭我會仔細說說暴力猴和油猴。
值友點評：violent monkey易用性比tamper高多了。
傳送門>>
傳送門>>
值友@娜娜奇推薦： 目前用的crxMouse,也不知道是不是最優解。這個還支持超級拖拽。目前發現這個插件，如果在新建空白tab中和加載失敗的頁面中會鼠標手勢失效
也有值友推薦了smartUp手勢， 這個我沒有用過， 我也展現出來供大家參考。
傳送門>>
值友點評： lastpass安全性不如keepassxc，多機同步可以用網盤中轉，手機也一樣用
傳送門>>
傳送門>>
這個擴展可以讓你上網只記住一個密碼，便可以登錄所有需要密碼的網站。在安裝該擴展之后首次登錄需要密碼的網站時，擴展會自動記錄下你的密碼，下一次就不需要輸入了。雖然會記錄你的密碼，但這個擴展一定是安全的，所以不必擔心安全問題。
LastPass是免費的密碼管理器，跨平臺同步，自動登錄， 只需要記住一個賬戶密碼， 就可以管理所有賬戶密碼。 解決了密碼難記的問題。
風險提示： 銀行密碼重要信息密碼不要交給他管理， 另外這個只有密碼提示， 無法找回密碼。
同樣的一個密碼管理器
傳送門>>
工具很強大，支持的筆記很多，支持ervernote, onenote, 語雀，為知等所有主流筆記，支持markdown，支持圖床，體驗絕對比原版的好。傳送門>>
傳送門>>
印象筆記·剪藏(Evernote Web Clipper)， 使用印象筆記·剪藏擴展程序一鍵保存精彩網頁內容到印象筆記帳戶，不用復制粘貼編輯再整理，信息收集快人一步。看見什么，「剪」什么。 調研好幫手，剪藏任意文章或網頁， 保存到指定筆記本，并添加網頁， 用印象筆記同步到任意設備， 搭建個人知識庫。
傳送門>>
免費的筆記管理軟件和印象筆記·剪藏一樣的功能，可以保持網頁內容至OneNote，OneNote為Win10系統自帶office軟件。
官方出品的瀏覽器主題皮膚， 使用全新瀏覽器主題個性化設置 Microsoft Edge，此主題的靈感源自 Master Chief 在神秘的外星人環形世界(稱為 Halo)中的歷險經歷。此主題更改了瀏覽器和新標簽頁的外觀，營造出靈感源自游戲的精美而又引入入勝的視覺體驗。你還可以將不同主題應用至各個個人資料，以便輕松區分家庭、學校或工作。傳送門>>
傳送門>>
該插件可以幫助用戶在打印網頁或者PDF文件之前對打印的內容進行調整，比如調節打印的字體大小、去除打印頁面中的所有圖片、刪除網頁中的廣告、刪除多余的文字等方便的自定義打印的功能。
傳送門>>
優秀的截圖插件, 可以捕獲任何網頁的全部或部分。添加注釋，評論，模糊敏感信息，以及一鍵上傳。
傳送門>>
圖片助手(ImageAssistant)是一款運行于chromium(chrome環境下開發)及其衍生瀏覽器(如：360安全瀏覽器、360極速瀏覽器、獵豹瀏覽器、百度瀏覽器、UC瀏覽器等)提供分析、提取網頁中的圖片并以多種篩選方式輔助用戶選取下載等功能的瀏覽器擴展軟件。
傳送門>>
是否看到網頁、微博上的視頻很想保存留念或使用， 這個插件一鍵下載網頁中的視頻
傳送門>>
使用更純凈的百度 1.屏蔽百度廣告推廣 2.阻止百度追蹤 3.去除百度資訊與熱榜。
這篇文章總結了前面幾篇關于Edge瀏覽器經驗的合集， 每一個都是本人自己嘗試過無數次以后的經驗總結，分享給大家，
收藏不等于會了。
收藏不等于會了。
收藏不等于會了。
收藏是點贊的十倍， 為什么， 同學們！
這么養眼的文章難道不點贊嗎？ 點贊美三代， 關注富一生！
更多的內容歡迎關注我的個人號來查找，這樣也方便交流。
全文完~~
編喜歡直接點，比如直接關注小編^_^
今天分享10個簡單、實用又好看的WEB組件，希望對你有幫助。
直接上干貨
1：輸入框
點擊前
點擊后
并且效果還是很絢麗的哦~動態效果也是美的沒話講的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
.fancy-label {
position: relative;
margin-bottom: 20px;
}
.fancy-label label {
position: absolute;
top: 14px;
left: 7px;
padding: 0 5px;
-webkit-transition: top .5s, font-size .3s;
transition: top .5s, font-size .3s;
}
.fancy-label input {
height: 45px;
padding: 0 12px;
}
.fancy-label input:hover + label, .fancy-label input:focus + label, .fancy-label input:valid + label {
top: -9px;
font-size: 12px;
}
label {
color: #000;
background: #fff;
}
input {
color: #000;
border: 2px solid #289afa;
background: #fff;
width: 240px;
outline: 0;
}
body > div {
padding: 1rem 0 0 1rem;
}
</style>
</head>
<body>
<div>
<div class="fancy-label">
<input type="text" id="username" required>
<label for="username">用戶名</label>
</div>
<div class="fancy-label">
<input type="password" id="password" required>
<label for="password">密碼</label>
</div>
</div>
</body>
</html>
2：選擇框
展開前
展開后
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
select {
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
appearance: none;
outline: 0;
box-shadow: none;
border: 0 !important;
background: #2c3e50;
background-image: none;
}
.select {
position: relative;
display: block;
width: 16em;
height: 3em;
line-height: 3;
background: #2c3e50;
overflow: hidden;
border-radius: .25em;
}
select {
width: 100%;
height: 100%;
margin: 0;
padding: 0 0 0 .5em;
color: #fff;
cursor: pointer;
}
select::-ms-expand {
display: none;
}
.select::after {
content: 'BC';
position: absolute;
top: 0;
right: 0;
bottom: 0;
padding: 0 1em;
background: #34495e;
pointer-events: none;
}
.select:hover::after {
color: #f39c12;
}
.select::after {
-webkit-transition: .25s all ease;
-o-transition: .25s all ease;
transition: .25s all ease;
}
body > div {
margin: 1rem 0 0 1rem;
}
</style>
</head>
<body>
<div class="select">
<select id="school">
<option>小編美嗎?</option>
<option value="1">美</option>
<option value="2">不美</option>
<option value="3">不正經</option>
</select>
</div>
</body>
</html>
3：文件選擇框
之前
鼠標移入
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.file-wrapper {
position: relative;
width: 225px;
}
.file-label {
display: block;
padding: 14px 20px;
background: #39D2B4;
color: #fff;
font-size: 1em;
text-align: center;
transition: all .4s;
cursor: pointer;
}
.input-file {
position: absolute;
top: 0; left: 0;
width: 225px;
opacity: 0;
padding: 14px 0;
cursor: pointer;
}
.input-file:hover + .file-label,
.input-file:focus + .file-label {
background: #34495E;
color: #39D2B4;
}
form {
padding: 1rem 0 0 1rem;
}
</style>
</head>
<body>
<form action="#">
<div class="file-wrapper">
<input class="input-file" id="my-file" type="file">
<label tabindex="0" for="my-file" class="file-label">選擇一個文件...</label>
</div>
<p class="file-name"></p>
</form>
<script>
var myfile=document.querySelector( ".input-file" ),
result=document.querySelector(".file-name");
myfile.addEventListener( "change", function( event ) {
var name=this.value;
result.innerHTML="已選文件："+name.substring(name.lastIndexOf("\")+1);
});
</script>
</body>
</html>
4：純CSS彈出框
小編覺得這個效果，響應速度等，都是特別理想的選擇。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
.wrap {
padding: 40px;
text-align: center;
}
.btn {
background: #428bca;
border: #357ebd solid 1px;
border-radius: 3px;
color: #fff;
display: inline-block;
font-size: 14px;
padding: 8px 15px;
text-decoration: none;
text-align: center;
min-width: 60px;
position: relative;
transition: color .1s ease;
}
.btn:hover {
background: #357ebd;
}
.btn.btn-big {
font-size: 18px;
padding: 15px 20px;
min-width: 100px;
}
.btn-close {
color: #aaa;
font-size: 30px;
text-decoration: none;
position: absolute;
right: 5px;
top: 0;
}
.btn-close:hover {
color: #919191;
}
.modal:before {
content: "";
display: none;
background: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
}
.modal:target:before {
display: block;
}
.modal:target .modal-dialog {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
transform: translate(0, 0);
top: 10%;
}
.modal-dialog {
background: #fefefe;
border: #333 solid 1px;
border-radius: 5px;
margin-left: -120px;
position: fixed;
left: 50%;
top: -100%;
z-index: 11;
width: 240px;
-webkit-transform: translate(0, -500%);
-ms-transform: translate(0, -500%);
transform: translate(0, -500%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-moz-transition: -moz-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.modal-body {
padding: 10px 20px;
}
.modal-header,
.modal-footer {
padding: 10px 20px;
}
.modal-header {
border-bottom: #eee solid 1px;
}
.modal-header h2 {
font-size: 20px;
}
.modal-footer {
border-top: #eee solid 1px;
text-align: right;
}
</style>
</head>
<body>
<div class="wrap">
<a href="#modal-one" class="btn btn-big">模態框</a>
</div>
<div class="modal" id="modal-one" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-header">
<h2>42度空間</h2>
<a href="#" class="btn-close" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<p>一個純CSS的模態框！</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">確 定</a>
</div>
</div>
</div>
</body>
</html>
5：導航條 樣式1
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
.dropdownmenu ul, .dropdownmenu li {
margin: 0;
padding: 0;
}
.dropdownmenu ul {
background: gray;
list-style: none;
width: 100%;
}
.dropdownmenu li {
float: left;
position: relative;
width:auto;
}
.dropdownmenu a {
background: #30A6E6;
color: #FFFFFF;
display: block;
font: bold 12px/20px sans-serif;
padding: 10px 25px;
text-align: center;
text-decoration: none;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
.dropdownmenu li:hover a {
background: #000000;
}
#submenu {
left: 0;
opacity: 0;
position: absolute;
top: 35px;
visibility: hidden;
z-index: 1;
}
li:hover ul#submenu {
opacity: 1;
top: 40px;
visibility: visible;
}
#submenu li {
float: none;
width: 100%;
}
#submenu a:hover {
background: #DF4B05;
}
#submenu a {
background-color:#000000;
}
</style>
</head>
<body>
<nav class="dropdownmenu">
<ul>
<li><a href="#">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">二級菜單</a>
<ul id="submenu">
<li><a href="#">JS相關</a></li>
<li><a href="#">CSS相關</a></li>
<li><a href="#">正則相關</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
6：導航條 樣式2
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
#navbar {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
height: 60px;
margin: 0;
padding: 0;
list-style: none;
background: #222;
font-family: 'Oswald', sans-serif;
font-size: 18px;
font-weight: 300;
min-width: 340px;
}
#navbar li {
position: relative;
float: left;
line-height: 60px;
background: inherit;
text-align: center;
transition: all .2s;
}
#navbar li a {
position: relative;
display: block;
padding: 0 20px;
line-height: inherit;
color: white;
text-decoration: none;
}
#navbar li:before {
content: '';
display: block;
position: absolute;
left: 50%;
margin-left: -30px;
width: 60px;
height: 60px;
background: #222;
border-radius: 50%;
transform: rotate(45deg);
transition: all 0, background .2s;
}
#navbar li:hover:before {
margin-top: 1px;
border-radius: 50% 50% 0 50%;
transition: all .1s, background .2s, margin-top .2s cubic-bezier(.5,30,.2,0);
}
#navbar li:hover,
#navbar li:hover:before {
background: #3a3a3a;
}
#navbar li.active,
#navbar li.active:before {
background: steelblue;
}
</style>
</head>
<body>
<ul id="navbar">
<li class="active"><a href="#" title="">首頁</a></li>
<li><a href="#">關于我們</a></li>
<li><a href="#">網站聲明</a></li>
</ul>
</body>
</html>
7：面包屑
面包屑
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>（breadcrumb）</title>
<style>
* {margin: 0; padding: 0;}
.breadcrumb {
margin: 2rem 0 0 0.5rem;
text-align: center;
display: inline-block;
box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35);
overflow: hidden;
border-radius: 5px;
counter-reset: flag;
}
.breadcrumb a {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 12px;
line-height: 36px;
color: white;
padding: 0 10px 0 60px;
background: #666;
background: linear-gradient(#666, #333);
position: relative;
}
.breadcrumb a:first-child {
padding-left: 46px;
border-radius: 5px 0 0 5px;
}
.breadcrumb a:first-child:before {
left: 14px;
}
.breadcrumb a:last-child {
border-radius: 0 5px 5px 0;
padding-right: 20px;
}
.breadcrumb a.active, .breadcrumb a:hover{
background: #333;
background: linear-gradient(#333, #000);
}
.breadcrumb a.active:after, .breadcrumb a:hover:after {
background: #333;
background: linear-gradient(135deg, #333, #000);
}
.breadcrumb a:after {
content: '';
position: absolute;
top: 0;
right: -18px;
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
background: #666;
background: linear-gradient(135deg, #666, #333);
box-shadow:
2px -2px 0 2px rgba(0, 0, 0, 0.4),
3px -3px 0 2px rgba(255, 255, 255, 0.1);
border-radius: 0 5px 0 50px;
}
.breadcrumb a:last-child:after {
content: none;
}
.breadcrumb a:before {
content: counter(flag);
counter-increment: flag;
border-radius: 100%;
width: 20px;
height: 20px;
line-height: 20px;
margin: 8px 0;
position: absolute;
top: 0;
left: 30px;
background: #444;
background: linear-gradient(#444, #222);
font-weight: bold;
}
</style>
</head>
<body>
<div class="breadcrumb">
<a href="#" class="active">首頁</a>
<a href="#">文章</a>
<a href="#">圖片</a>
</div>
</body>
</html>
8：輪播
輪播
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title> </title>
<style>
#slider {
position: relative;
overflow: hidden;
margin: 20px auto 0 auto;
border-radius: 4px;
}
#slider ul {
position: relative;
margin: 0;
padding: 0;
height: 200px;
list-style: none;
}
#slider ul li {
position: relative;
display: block;
float: left;
margin: 0;
padding: 0;
min-width: 300px;
max-width:100%;
height: 200px;
background: #ccc;
text-align: center;
line-height: 200px;
}
a.control_prev, a.control_next {
position: absolute;
top: 40%;
z-index: 999;
display: block;
padding: 4% 3%;
width: auto;
height: auto;
background: #2a2a2a;
color: #fff;
text-decoration: none;
font-weight: 600;
font-size: 18px;
opacity: 0.8;
cursor: pointer;
}
a.control_prev:hover, a.control_next:hover {
opacity: 1;
-webkit-transition: all 0.2s ease;
}
a.control_prev {
border-radius: 0 2px 2px 0;
}
a.control_next {
right: 0;
border-radius: 2px 0 0 2px;
}
</style>
</head>
<body>
<div id="slider">
<a href="#" class="control_next">></a>
<a href="#" class="control_prev"><</a>
<ul>
<li>思否</li>
<li style="background: #aaa;">掘金</li>
<li>sf.gg</li>
<li style="background: #aaa;">42du.cn</li>
</ul>
</div>
<script type="text/javascript" src="http://res.42du.cn/vendor/jquery/jquery.min.js"></script>
<script>
$(document).ready(function () {
var intervalId;
var slideCount=$('#slider ul li').length;
var slideWidth=$('#slider ul li').width();
var slideHeight=$('#slider ul li').height();
var sliderUlWidth=slideCount * slideWidth;
$('#slider').css({ width: slideWidth, height: slideHeight });
$('#slider ul').css({ width: sliderUlWidth, marginLeft: - slideWidth });
$('#slider ul li:last-child').prependTo('#slider ul');
function moveLeft() {
$('#slider ul').animate({
left: + slideWidth
}, 200, function () {
$('#slider ul li:last-child').prependTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function moveRight() {
$('#slider ul').animate({
left: - slideWidth
}, 200, function () {
$('#slider ul li:first-child').appendTo('#slider ul');
$('#slider ul').css('left', '');
});
};
function start() {
intervalId=setInterval(function () {
moveRight();
}, 3000);
}
$('a.control_prev').click(function () {
moveLeft();
});
$('a.control_next').click(function () {
moveRight();
});
$("#slider").mouseenter(function () {
clearInterval(intervalId);
});
$("#slider").mouseleave(function () {
start();
});
start();
});
</script>
</body>
</html>
9： 選項卡 Tab
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>純CSS實現</title>
<style>
* {
margin: 0;
padding: 0;
}
.tabs {
margin:1rem;
max-width: 100%;
min-width: 320px;
}
.tabs input {
height: 2.5em;
visibility: hidden;
}
.tabs label {
background: #f9f9f9;
border-radius: .25em .25em 0 0;
color: #888;
cursor: pointer;
display: block;
float: left;
font-size: 1em;
height: 2.5em;
line-height: 2.5em;
margin-right: .25em;
padding: 0 1.5em;
text-align: center;
}
.tabs input:hover + label {
background: #ddd;
color: #666;
}
.tabs input:checked + label {
background: #f1f1f1;
color: #444;
position: relative;
z-index: 6;
}
.content {
background: #f1f1f1;
border-radius: 0 .25em .25em .25em;
min-height: 120px;
position: relative;
width: 100%;
z-index: 5;
}
.content div {
opacity: 0;
padding: 1.5em;
position: absolute;
z-index: -100;
}
.content p {
clear: both;
padding-bottom: 2rem;
}
.tabs input#tab-1:checked ~ .content #content-1,
.tabs input#tab-2:checked ~ .content #content-2,
.tabs input#tab-3:checked ~ .content #content-3 {
opacity: 1;
z-index: 100;
}
input.visible {
visibility: visible !important;
}
</style>
</head>
<body>
<div class="tabs">
<input id="tab-1" type="radio" name="tab-group" checked="checked" />
<label for="tab-1">知 識</label>
<input id="tab-2" type="radio" name="tab-group" />
<label for="tab-2">名 言</label>
<input id="tab-3" type="radio" name="tab-group" />
<label for="tab-3">笑 話</label>
<div class="content">
<div id="content-1">
<p>
在JavaScript中，永遠不要用for in循環來遍歷數組。
</p>
</div>
<div id="content-2">
簡單是穩定的前提。
</div>
<div id="content-3">
程序員最討厭的四件事：寫注釋、寫文檔、別人不寫注釋、別人不寫文檔。
</div>
</div>
</div>
</body>
</html>
10： 響應式表格
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>(Responsive table)樣式</title>
<style>
.rwd-table {
min-width: 300px;
max-width: 100%;
border-collapse: collapse;
}
.rwd-table tr:first-child {
border-top: none;
background: #428bca;
color: #fff;
}
.rwd-table tr {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
background-color: #f5f9fc;
}
.rwd-table tr:nth-child(odd):not(:first-child) {
background-color: #ebf3f9;
}
.rwd-table th {
display: none;
}
.rwd-table td {
display: block;
}
.rwd-table td:first-child {
margin-top: .5em;
}
.rwd-table td:last-child {
margin-bottom: .5em;
}
.rwd-table td:before {
content: attr(data-th) ": ";
font-weight: bold;
width: 120px;
display: inline-block;
color: #000;
}
.rwd-table th,
.rwd-table td {
text-align: left;
}
.rwd-table {
color: #333;
border-radius: .4em;
overflow: hidden;
}
.rwd-table tr {
border-color: #bfbfbf;
}
.rwd-table th,
.rwd-table td {
padding: .5em 1em;
}
@media screen and (max-width: 601px) {
.rwd-table tr:nth-child(2) {
border-top: none;
}
}
@media screen and (min-width: 600px) {
.rwd-table tr:hover:not(:first-child) {
background-color: #d8e7f3;
}
.rwd-table td:before {
display: none;
}
.rwd-table th,
.rwd-table td {
display: table-cell;
padding: .25em .5em;
}
.rwd-table th:first-child,
.rwd-table td:first-child {
padding-left: 0;
}
.rwd-table th:last-child,
.rwd-table td:last-child {
padding-right: 0;
}
.rwd-table th,
.rwd-table td {
padding: 1em !important;
}
}
body {
background: #4B79A1;
}
</style>
</head>
<body>
<div>
<table class="rwd-table">
<tbody>
<tr>
<th>名稱</th>
<th>國家</th>
<th>成就</th>
</tr>
<tr>
<td data-th="名稱">
林納斯·托瓦茲
</td>
<td data-th="國家">
芬蘭
</td>
<td data-th="成就">
Linux之父
</td>
</tr>
<tr>
<td data-th="名稱">
詹姆斯·高斯林
</td>
<td data-th="國家">
加拿大
</td>
<td data-th="成就">
Java之父
</td>
</tr>
<tr>
<td data-th="名稱">
肯·湯普遜
</td>
<td data-th="國家">
美國
</td>
<td data-th="成就">
C語言和Unix創始人
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
如本文存在文字闡述不準及代碼測試不足等問題，請見諒。供大家學習交流。
也歡迎關注我們。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
