這 12 個實用的 HTML標(biāo)簽（組件）建議盡早用上

家好，今天給大家分享一篇閱讀的文章，本篇文章主要講了 12 個 HTML 標(biāo)簽（組件），通過這些標(biāo)簽避免你在項目中集成復(fù)雜第三方組件，比如日歷組件、顏色選擇、進度條等...，簡單的標(biāo)簽就能很方便的調(diào)用系統(tǒng)組件。

一、顏色選擇組件（Color Picker）

在項目中，你可能希望通過調(diào)色板組件動態(tài)調(diào)整顏色，這時你可以使用 <input type="color"> 就可以輕松調(diào)用一個調(diào)色板組件，省去你在找第三方組件，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/vYJBqeX

二、引用標(biāo)簽（Blockquote）

在文章排版時，有時候我們需要引用一些信息，這時我們需要用特殊的樣式進行強調(diào)，這時你可以使用<blockquote> 標(biāo)簽來強調(diào)你用的內(nèi)容，示例效果如下所示

示例地址：https://codepen.io/madarsbiss/pen/JjyPQBd

三、音頻播放器（Audio Player）

如果從頭寫個音頻播放器是一個費時費力又有挑戰(zhàn)性的工作，但是你現(xiàn)在可以使用<audio>標(biāo)簽就能很輕松的調(diào)用。系統(tǒng)的音頻播放器，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/oNevrEb

四、視頻播放器（Video Player）

我們不僅能很方便的調(diào)用系統(tǒng)的音頻組件，我們還可以使用<video> 標(biāo)簽調(diào)用視頻組件，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/BadBgxJ

五、折疊組件（Accordion）

折疊列表的需求也是比較常見的，點擊標(biāo)題展開對應(yīng)的信息內(nèi)容，這時 <details> 標(biāo)簽就派上用場了，示例效果如下所示：

gif

項目地址：https://codepen.io/madarsbiss/pen/zYdOVPV

六、日期選擇（Date Picker）

日期選擇組件可以說是項目中必備的組件，想必大家都有自己比較常用的日期組件，如果沒有復(fù)雜的樣式和交互需求，使用<input type="date"> 這個標(biāo)簽就能輕松的勝任，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/qBXWzXE

七、滑塊組件（Slider）

滑塊組件也是一個比較常見的組件，主要應(yīng)用在數(shù)值范圍的篩選上，方便用戶進行選擇，這時我們可以使用 <input type="range"> ，我們可以設(shè)置最小值、最大值以及當(dāng)前值，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/GRvKbXv

八、內(nèi)容編輯（Content Editor）

為了讓內(nèi)容具有編輯性，你可以不必使用表單組件，比如 input、textarea 標(biāo)簽，你可以在可編輯的容器(div) 上添加 contenteditable 屬性，就能很輕松的完成當(dāng)前容器及所見即所得的編輯，示例如下所示：

示例地址：https://codepen.io/madarsbiss/pen/ExvYBwB

九、圖片標(biāo)簽（Picture Tag）

有時候需要在不同的分辨率下顯示不同的圖片，如果你使用<img> 標(biāo)簽的話，你需要做的工作就會許多，但是使用<picture> 標(biāo)簽就能很輕松的完成在不同分辨率下顯示不同圖片的設(shè)置，調(diào)整瀏覽器的大小，就會根據(jù)窗口的大小顯示不同大小的圖片，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/abybomY

十、進度條（Progress Bar）

進度條組件也是個很常見的組件，你可以使用<progress> 標(biāo)簽就能輕松完成相關(guān)外觀的設(shè)置，示例效果如下：

示例地址：https://codepen.io/madarsbiss/pen/oNevKdp

十一、下拉組件（Dropdown）

如果下拉組件選項比較多，用戶選擇就會比較困難，用戶可能希望結(jié)合輸入，能很方便的定位到下拉組件的內(nèi)容，這時候你可以使用 <datalist> 標(biāo)簽就能滿足上述需求，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/eYEOwdQ

十二、提示框（Tooltip）

如果你需要對頁面某部分進行詳細介紹時，你可能需要鼠標(biāo)經(jīng)過此區(qū)域顯示詳細的提示框效果，這時我們可以使用 title 屬性就能輕松實現(xiàn)，示例效果如下所示：

示例地址：https://codepen.io/madarsbiss/pen/VwzwZvE

結(jié)束語

今天的文章就分享到這里，希望在日后的項目中你能想起今天分享的這12個標(biāo)簽（組件），感謝你的閱讀。

參考：
https://javascript.plainenglish.io/12-simple-html-snippets-to-avoid-complex-libraries-7f2965087312
作者：Madza

近忙里偷閑，給自己加油充電的時候，發(fā)現(xiàn)自己腦海中布局這塊非常的凌亂混雜，于是花了一些時間將一些常用的布局及其實現(xiàn)方法整理梳理了出來，在這里，分享給大家。

單列布局

單列布局是最常用的一種布局，一般是將一個元素作為容器，設(shè)置一個固定的寬度，水平居中對齊。

單列布局一般有兩種形式：

(圖片來源：https://blog.csdn.net/Ace_Arm/article/details/81036129)

一欄布局

一欄布局頭部、內(nèi)容、底部寬度一致

效果圖

代碼實現(xiàn)

html

<header></header>
<main></main>
<footer></footer>
復(fù)制代碼

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
復(fù)制代碼

一欄布局（通欄）

一欄布局（通欄）頭部和底部寬度一致，占滿整個頁面，中間內(nèi)容區(qū)域?qū)挾容^小不占滿屏幕。

效果圖

代碼實現(xiàn)

html

<header></header>
<main></main>
<footer></footer>
復(fù)制代碼

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
復(fù)制代碼

單列布局是最為基礎(chǔ)和簡單的一種，實現(xiàn)方法并不局限于以上兩種，大家可自由發(fā)揮，找到更多的方法來實現(xiàn)。

2列布局

2列布局的使用頻率也非常高，其實現(xiàn)效果主要就是將頁面分割成左右寬度不等的兩列。一般寬度較小的一列會設(shè)置為固定寬度，作為側(cè)邊欄之類的，而另一列則充滿剩余寬度，作為內(nèi)容區(qū)。

在后臺管理系統(tǒng)及api文檔中使用較為廣泛。

效果圖

先來看看效果：

代碼實現(xiàn)

實現(xiàn)兩列布局的方法有很多，這里主要介紹兩種方法。

calc函數(shù)

calc() 函數(shù)用于動態(tài)計算長度值。實現(xiàn)思路很簡單，側(cè)邊欄寬度固定，設(shè)置絕對定位，使其脫離文檔流，內(nèi)容區(qū)域通過calc()函數(shù)計算剩余寬度并設(shè)置寬度，再加一個margin-left，值為側(cè)邊欄的寬度。

代碼如下：

html

<div class="slider"></div>
<div class="main"></div>
復(fù)制代碼

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
.slider,.main{
    height: 100%;
}
.slider{
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    background: black;
}
.main{
    width: calc(100% - 100px);
    background: red;
    margin-left: 100px;
}
復(fù)制代碼

flex屬性

通過flex屬性實現(xiàn)思路也很簡單，將父元素設(shè)置為flex，側(cè)邊欄寬度固定，內(nèi)容區(qū)域設(shè)置flex:1即可充滿剩余區(qū)域。

代碼如下：

html

<div class="slider"></div>
<div class="main"></div>
復(fù)制代碼

css

*{
    margin: 0;
    padding: 0;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}
.slider,.main{
    height: 100%;
}
.slider{
    width: 100px;
    background: black;
}
.main{
    flex: 1;   
    background: red;
}
復(fù)制代碼

3列布局

3 列布局在日常開發(fā)中使用頻率也是很高的，其按照左中右的順序進行排列，通常中間列最寬，左右兩列次之。左右兩邊定寬，中間自適應(yīng)，能根據(jù)屏幕大小做響應(yīng)。

效果圖

還是先來看看效果圖

代碼實現(xiàn)

三列布局的實現(xiàn)方法也很多，這里主要介紹兩種（雙飛翼布局、圣杯布局、flex布局）

在介紹雙飛翼布局和圣杯布局之前要先說一下margin設(shè)置負值的作用：

當(dāng)margin的值設(shè)為負值的時候，元素會對應(yīng)的像那個放向移動，比如margin-left為負值，元素則會左移

雙飛翼布局

代碼如下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中間
        </div>
    </div>
    <div class="left">
        左邊
    </div>
    <div class="right">
        右邊
    </div>
</div>
復(fù)制代碼

css

* {
    margin: 0;
    padding: 0;
}

body,
html {
    width: 100%;
    height: 100%;
}
div{
    height: 100%;
}
.main>div {
    float: left;
}

.left {
    width: 200px;
    background: red;
    margin-left: -100%;
}

.right {
    width: 200px;
    background: blue;
    margin-left: -200px;
}

.middle {
    width: 100%;
    background: yellow;

}

.content {
    margin-left: 200px;
    margin-right: 200px;
}
復(fù)制代碼

圣杯布局

代碼如下: html

<div class="main">
    <div class="center">中間中間中間中間中間中間中間后</div>
    <div class="left">左邊</div>
    <div class="right">右邊</div>
</div>
復(fù)制代碼

css

* {
    margin: 0;
    padding: 0;
}

.main {
    height: 200px;
    padding: 0 150px 0 200px;
    background: greenyellow;
    *zoom: 1;
}

.left,
.center,
.right {
    float: left;
}

.center {
    width: 100%;
    height: 200px;
    background: red;
}

.left {
    width: 200px;
    height: 200px;
    background: yellow;
    margin-left: -100%;
    position: relative;
    left: -200px;
}

.right {
    width: 150px;
    height: 200px;
    background: gainsboro;
    margin-left: -150px;
    position: relative;
    left: 150px;
}
復(fù)制代碼

雙飛翼布局其實和圣杯布局的精髓是一樣的，都是通過設(shè)置負margin來實現(xiàn)元素的排布，不同的就是html結(jié)構(gòu)，雙飛翼是在center元素內(nèi)部又設(shè)置了一層inner-center的元素并設(shè)置它的左右margin，而非圣杯布局的padding，來排除兩邊元素的覆蓋。所以這兩種布局原理基本一樣，關(guān)鍵就是在于設(shè)置負margin的技巧，和元素浮動的相對定位技巧來實現(xiàn)。

flex布局

代碼如下: html

<div class="main">
    <div id="left">左邊定寬</div>
    <div id="main">中間自適應(yīng)</div>
    <div id="right">右邊定寬</div>
</div>
復(fù)制代碼

css

* {
    padding: 0px;
    margin: 0px;
}
body,html{
    width: 100%;
    height: 100%;
}
body{
    display: flex;
}

#left,
#right {
    width: 100px;
    background-color: #0FC;
}
#main {
    flex: 1;
    background-color: #999;
}
復(fù)制代碼

如果不考慮瀏覽器兼容問題的話，運用flex布局是最簡單的方式。

垂直方向的布局（sticky footer）

這種布局將頁面分成上、中、下三個部分，上、下部分都為固定高度，中間部分高度不定。當(dāng)頁面高度小于瀏覽器高度時，下部分應(yīng)固定在屏幕底部；當(dāng)頁面高度超出瀏覽器高度時，下部分應(yīng)該隨中間部分被撐開，顯示在頁面最底部。

這種布局也稱之為sticky footer，意思是下部分粘黏在屏幕底部。

代碼實現(xiàn)

首先我們先構(gòu)建簡單的HTML代碼

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>
復(fù)制代碼

其中content為我們的內(nèi)容區(qū)。下面開始介紹解決方法。

為內(nèi)容區(qū)域添加最小的高度

這種方法重要用vh(viewpoint height)來計算整體視窗的高度(1vh等于視窗高度的1%),然后減去底部footer的高度，從而求得內(nèi)容區(qū)域的最小高度。例如我們可以添加如下樣式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}  
復(fù)制代碼

從而這個問題就解決了，但是如果頁面的footer高度不同怎么辦?每一個頁面都要重新計算一次，這是很麻煩的，所以這種方法雖然簡單但卻是不推薦的。

使用flex布局

這種方法就是利用flex布局對視窗高度進行分割。footer的flex設(shè)為0，這樣footer獲得其固有的高度;content的flex設(shè)為1，這樣它會充滿除去footer的其他部分。

代碼如下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
復(fù)制代碼

這樣的布局簡單使用，比較推薦。

在content的外面可以添加一個wrapper

這種方法就是在content的外面添加一個包裹容易，將html代碼改成這樣：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
復(fù)制代碼

然后添加以下樣式：

html, body, .wrapper {
     height: 100%;
}
body > .wrapper {
     height: auto; 
     min-height: 100%;
}
.content {
    padding-bottom: 150px; /* 必須使用和footer相同的高度 */
}  
.footer {
    position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;
}
復(fù)制代碼

另外，為了保證兼容性，需要在wrapper上添加clearfix類。其代碼如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
復(fù)制代碼

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
復(fù)制代碼

ok,好，完成了，這種方法也比較推薦，但就是加入的代碼比較多，也改變了html的文檔結(jié)構(gòu)。

粘性布局（sticky）

粘性布局是什么呢？我們先來看看效果演示

沒錯，其實就是在頁面滾動的時候保持元素（這里的是標(biāo)題）在頁面視圖上方，也就是我們常常看到的吸附效果。

標(biāo)題行設(shè)置了背景色。如果不設(shè)置背景色（背景透明），正常文檔流的文字就會和標(biāo)題行文字重疊在一起顯示。

sticky定位的元素會遮住滾動而來的“正常”的文檔流；后面的sticky元素會覆蓋前面的sticky元素，就好像一層層的便利貼，是不是很酷~~。

代碼實現(xiàn)

實現(xiàn)粘性布局主要依靠position的sticky屬性。

position: sticky;
復(fù)制代碼

先來看看兼容性：

從Can I use上查詢可以看出，sticky的兼容性并不是太好，所以大家使用的時候要慎重考慮，如果不要求兼容的情況，用這個還是相當(dāng)?shù)氖娣恕?/p>

下面給出一個簡單的示例。

html:

<main>
    <header>標(biāo)題一</header>
    <div class="content">
    </div>
    <header>標(biāo)題二</header>
    <div class="content">
    </div>
    <header>標(biāo)題三</header>
    <div class="content">
    </div>
    <header>標(biāo)題四</header>
    <div class="content">
    </div>
</main>
復(fù)制代碼

js(不想寫太多p標(biāo)簽，所以用js生成，偷個懶):

let num = 20
let html = ''
for (var i = 0; i < num; i++) {
    html += `<p>${i + 1}</p>`
}
Array.prototype.slice.call(document.getElementsByClassName('content')).forEach(item=>{
    item.innerHTML = html
})
復(fù)制代碼

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
復(fù)制代碼

作者：monkeysoft
鏈接：https://juejin.cn/post/6907027007318687751
來源：掘金

編喜歡直接點，比如直接關(guān)注小編^_^

今天分享10個簡單、實用又好看的WEB組件，希望對你有幫助。

直接上干貨

1：輸入框

點擊前

點擊后

并且效果還是很絢麗的哦~動態(tài)效果也是美的沒話講的。

<!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">不正經(jīng)</option>
</select>
</div>
</body>
</html>

3：文件選擇框

之前

鼠標(biāo)移入

<!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彈出框

小編覺得這個效果，響應(yīng)速度等，都是特別理想的選擇。

<!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">模態(tài)框</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的模態(tài)框！</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">確定</a>
</div>
</div>
</div>
</body>
</html>

5：導(dǎo)航條樣式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="#">關(guān)于我們</a></li>
<li><a href="#">二級菜單</a>
<ul id="submenu">
<li><a href="#">JS相關(guān)</a></li>
<li><a href="#">CSS相關(guān)</a></li>
<li><a href="#">正則相關(guān)</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>

6：導(dǎo)航條樣式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="#">關(guān)于我們</a></li>
<li><a href="#">網(wǎng)站聲明</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實現(xiàn)</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循環(huán)來遍歷數(shù)組。
</p>
</div>
<div id="content-2">
簡單是穩(wěn)定的前提。
</div>
<div id="content-3">
程序員最討厭的四件事：寫注釋、寫文檔、別人不寫注釋、別人不寫文檔。
</div>
</div>
</div>
</body>
</html>

10：響應(yīng)式表格

<!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創(chuàng)始人
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

如本文存在文字闡述不準(zhǔn)及代碼測試不足等問題，請見諒。供大家學(xué)習(xí)交流。

也歡迎關(guān)注我們。

在線咨詢

上一篇：HTML5大顯神通：8個3D視覺效果“讓你好看”
下一篇：使用JavaScript寫爬蟲

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

這 12 個實用的 HTML標(biāo)簽（組件）建議盡早用上

一、顏色選擇組件（Color Picker）

二、引用標(biāo)簽（Blockquote）

三、音頻播放器（Audio Player）

四、視頻播放器（Video Player）

五、折疊組件（Accordion）

六、日期選擇（Date Picker）

七、滑塊組件（Slider）

八、內(nèi)容編輯（Content Editor）

九、圖片標(biāo)簽（Picture Tag）

十一、下拉組件（Dropdown）

十二、提示框（Tooltip）

結(jié)束語

單列布局

一欄布局

效果圖

代碼實現(xiàn)

一欄布局（通欄）

效果圖

代碼實現(xiàn)

2列布局

效果圖

代碼實現(xiàn)

calc函數(shù)

flex屬性

3列布局

效果圖

代碼實現(xiàn)

雙飛翼布局

圣杯布局

flex布局

垂直方向的布局（sticky footer）

代碼實現(xiàn)

為內(nèi)容區(qū)域添加最小的高度

使用flex布局

在content的外面可以添加一個wrapper

粘性布局（sticky）

代碼實現(xiàn)

您的項目需求