这 12 个实用的 HTML标签（组件）建议尽早用上

家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 12 个 HTML 标签（组件），通过这些标签避免你在项目中集成复杂第三方组件，比如日历组件、颜色选择、进度条等...，简单的标签就能很方便的调用系统组件。

一、颜色选择组件（Color Picker）

在项目中，你可能希望通过调色板组件动态调整颜色，这时你可以使用 <input type="color"> 就可以轻松调用一个调色板组件，省去你在找第三方组件，示例效果如下：

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

二、引用标签（Blockquote）

在文章排版时，有时候我们需要引用一些信息，这时我们需要用特殊的样式进行强调，这时你可以使用<blockquote> 标签来强调你用的内容，示例效果如下所示

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

三、音频播放器（Audio Player）

如果从头写个音频播放器是一个费时费力又有挑战性的工作，但是你现在可以使用<audio>标签就能很轻松的调用。系统的音频播放器，示例效果如下所示：

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

四、视频播放器（Video Player）

我们不仅能很方便的调用系统的音频组件，我们还可以使用<video> 标签调用视频组件，示例效果如下所示：

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

五、折叠组件（Accordion）

折叠列表的需求也是比较常见的，点击标题展开对应的信息内容，这时 <details> 标签就派上用场了，示例效果如下所示：

gif

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

六、日期选择（Date Picker）

日期选择组件可以说是项目中必备的组件，想必大家都有自己比较常用的日期组件，如果没有复杂的样式和交互需求，使用<input type="date"> 这个标签就能轻松的胜任，示例效果如下所示：

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

七、滑块组件（Slider）

滑块组件也是一个比较常见的组件，主要应用在数值范围的筛选上，方便用户进行选择，这时我们可以使用 <input type="range"> ，我们可以设置最小值、最大值以及当前值，示例效果如下所示：

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

八、内容编辑（Content Editor）

为了让内容具有编辑性，你可以不必使用表单组件，比如 input、textarea 标签，你可以在可编辑的容器(div) 上添加 contenteditable 属性，就能很轻松的完成当前容器及所见即所得的编辑，示例如下所示：

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

九、图片标签（Picture Tag）

有时候需要在不同的分辨率下显示不同的图片，如果你使用<img> 标签的话，你需要做的工作就会许多，但是使用<picture> 标签就能很轻松的完成在不同分辨率下显示不同图片的设置，调整浏览器的大小，就会根据窗口的大小显示不同大小的图片，示例效果如下所示：

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

十、进度条（Progress Bar）

进度条组件也是个很常见的组件，你可以使用<progress> 标签就能轻松完成相关外观的设置，示例效果如下：

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

十一、下拉组件（Dropdown）

如果下拉组件选项比较多，用户选择就会比较困难，用户可能希望结合输入，能很方便的定位到下拉组件的内容，这时候你可以使用 <datalist> 标签就能满足上述需求，示例效果如下所示：

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

十二、提示框（Tooltip）

如果你需要对页面某部分进行详细介绍时，你可能需要鼠标经过此区域显示详细的提示框效果，这时我们可以使用 title 属性就能轻松实现，示例效果如下所示：

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

结束语

今天的文章就分享到这里，希望在日后的项目中你能想起今天分享的这12个标签（组件），感谢你的阅读。

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

近忙里偷闲，给自己加油充电的时候，发现自己脑海中布局这块非常的凌乱混杂，于是花了一些时间将一些常用的布局及其实现方法整理梳理了出来，在这里，分享给大家。

单列布局

单列布局是最常用的一种布局，一般是将一个元素作为容器，设置一个固定的宽度，水平居中对齐。

单列布局一般有两种形式：

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

一栏布局

一栏布局头部、内容、底部宽度一致

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>
复制代码

css

header,footer{
    width: 1200px;
    height: 100px;
    margin: 0 auto;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
复制代码

一栏布局（通栏）

一栏布局（通栏）头部和底部宽度一致，占满整个页面，中间内容区域宽度较小不占满屏幕。

效果图

代码实现

html

<header></header>
<main></main>
<footer></footer>
复制代码

css

header,footer{
    width: 100%;
    height: 100px;
    background: black;
}
main{
    width: 1200px;
    height: 600px;
    background: red;
    margin: 0 auto;
}
复制代码

单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，大家可自由发挥，找到更多的方法来实现。

2列布局

2列布局的使用频率也非常高，其实现效果主要就是将页面分割成左右宽度不等的两列。一般宽度较小的一列会设置为固定宽度，作为侧边栏之类的，而另一列则充满剩余宽度，作为内容区。

在后台管理系统及api文档中使用较为广泛。

效果图

先来看看效果：

代码实现

实现两列布局的方法有很多，这里主要介绍两种方法。

calc函数

calc() 函数用于动态计算长度值。实现思路很简单，侧边栏宽度固定，设置绝对定位，使其脱离文档流，内容区域通过calc()函数计算剩余宽度并设置宽度，再加一个margin-left，值为侧边栏的宽度。

代码如下：

html

<div class="slider"></div>
<div class="main"></div>
复制代码

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;
}
复制代码

flex属性

通过flex属性实现思路也很简单，将父元素设置为flex，侧边栏宽度固定，内容区域设置flex:1即可充满剩余区域。

代码如下：

html

<div class="slider"></div>
<div class="main"></div>
复制代码

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;
}
复制代码

3列布局

3 列布局在日常开发中使用频率也是很高的，其按照左中右的顺序进行排列，通常中间列最宽，左右两列次之。左右两边定宽，中间自适应，能根据屏幕大小做响应。

效果图

还是先来看看效果图

代码实现

三列布局的实现方法也很多，这里主要介绍两种（双飞翼布局、圣杯布局、flex布局）

在介绍双飞翼布局和圣杯布局之前要先说一下margin设置负值的作用：

当margin的值设为负值的时候，元素会对应的像那个放向移动，比如margin-left为负值，元素则会左移

双飞翼布局

代码如下：

html

<div class="main">
    <div class="middle">
        <div class="content">
            中间
        </div>
    </div>
    <div class="left">
        左边
    </div>
    <div class="right">
        右边
    </div>
</div>
复制代码

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;
}
复制代码

圣杯布局

代码如下: html

<div class="main">
    <div class="center">中间中间中间中间中间中间中间后</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>
复制代码

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;
}
复制代码

双飞翼布局其实和圣杯布局的精髓是一样的，都是通过设置负margin来实现元素的排布，不同的就是html结构，双飞翼是在center元素内部又设置了一层inner-center的元素并设置它的左右margin，而非圣杯布局的padding，来排除两边元素的覆盖。所以这两种布局原理基本一样，关键就是在于设置负margin的技巧，和元素浮动的相对定位技巧来实现。

flex布局

代码如下: html

<div class="main">
    <div id="left">左边定宽</div>
    <div id="main">中间自适应</div>
    <div id="right">右边定宽</div>
</div>
复制代码

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;
}
复制代码

如果不考虑浏览器兼容问题的话，运用flex布局是最简单的方式。

垂直方向的布局（sticky footer）

这种布局将页面分成上、中、下三个部分，上、下部分都为固定高度，中间部分高度不定。当页面高度小于浏览器高度时，下部分应固定在屏幕底部；当页面高度超出浏览器高度时，下部分应该随中间部分被撑开，显示在页面最底部。

这种布局也称之为sticky footer，意思是下部分粘黏在屏幕底部。

代码实现

首先我们先构建简单的HTML代码

<body>
　　<div class="content"></div>
　　<div class="footer"></div>
</body>
复制代码

其中content为我们的内容区。下面开始介绍解决方法。

为内容区域添加最小的高度

这种方法重要用vh(viewpoint height)来计算整体视窗的高度(1vh等于视窗高度的1%),然后减去底部footer的高度，从而求得内容区域的最小高度。例如我们可以添加如下样式：

.content{
     min-height:calc(100vh-footer的高度);
     box-sizing:border-box;
}  
复制代码

从而这个问题就解决了，但是如果页面的footer高度不同怎么办?每一个页面都要重新计算一次，这是很麻烦的，所以这种方法虽然简单但却是不推荐的。

使用flex布局

这种方法就是利用flex布局对视窗高度进行分割。footer的flex设为0，这样footer获得其固有的高度;content的flex设为1，这样它会充满除去footer的其他部分。

代码如下：

body { 
    display: flex; 
    flex-flow: column; 
    min-height: 100vh;
 }
 .content {
    flex: 1; 
}
.footer{
    flex: 0;      
}
复制代码

这样的布局简单使用，比较推荐。

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

这种方法就是在content的外面添加一个包裹容易，将html代码改成这样：

<body>
    <div class="wrapper">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
复制代码

然后添加以下样式：

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;
}
复制代码

另外，为了保证兼容性，需要在wrapper上添加clearfix类。其代码如下：

<body>
    <div class="wrapper clearfix">
        <div class="content"></div>
    </div>　
　　<div class="footer"></div>
</body>
复制代码

.clearfix{
     display: inline-block;
}
.clearfix:after {
     content: ".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}    
复制代码

ok,好，完成了，这种方法也比较推荐，但就是加入的代码比较多，也改变了html的文档结构。

粘性布局（sticky）

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

没错，其实就是在页面滚动的时候保持元素（这里的是标题）在页面视图上方，也就是我们常常看到的吸附效果。

标题行设置了背景色。如果不设置背景色（背景透明），正常文档流的文字就会和标题行文字重叠在一起显示。

sticky定位的元素会遮住滚动而来的“正常”的文档流；后面的sticky元素会覆盖前面的sticky元素，就好像一层层的便利贴，是不是很酷~~。

代码实现

实现粘性布局主要依靠position的sticky属性。

position: sticky;
复制代码

先来看看兼容性：

从Can I use上查询可以看出，sticky的兼容性并不是太好，所以大家使用的时候要慎重考虑，如果不要求兼容的情况，用这个还是相当的舒服了。

下面给出一个简单的示例。

html:

<main>
    <header>标题一</header>
    <div class="content">
    </div>
    <header>标题二</header>
    <div class="content">
    </div>
    <header>标题三</header>
    <div class="content">
    </div>
    <header>标题四</header>
    <div class="content">
    </div>
</main>
复制代码

js(不想写太多p标签，所以用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
})
复制代码

css:

main {
    width: 400px;
    height: 300px;
    margin: 200px auto;
    overflow: auto;
}
header {
    position: sticky;
    top: 0;
    height: 30px;
    background-color: blanchedalmond;
}
复制代码

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

编喜欢直接点，比如直接关注小编^_^

今天分享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>

如本文存在文字阐述不准及代码测试不足等问题，请见谅。供大家学习交流。

也欢迎关注我们。

在线咨询

上一篇：HTML5大显神通：8个3D视觉效果“让你好看”
下一篇：使用JavaScript写爬虫

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

这 12 个实用的 HTML标签（组件）建议尽早用上

一、颜色选择组件（Color Picker）

二、引用标签（Blockquote）

三、音频播放器（Audio Player）

四、视频播放器（Video Player）

五、折叠组件（Accordion）

六、日期选择（Date Picker）

七、滑块组件（Slider）

八、内容编辑（Content Editor）

九、图片标签（Picture Tag）

十一、下拉组件（Dropdown）

十二、提示框（Tooltip）

结束语

单列布局

一栏布局

效果图

代码实现

一栏布局（通栏）

效果图

代码实现

2列布局

效果图

代码实现

calc函数

flex属性

3列布局

效果图

代码实现

双飞翼布局

圣杯布局

flex布局

垂直方向的布局（sticky footer）

代码实现

为内容区域添加最小的高度

使用flex布局

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

粘性布局（sticky）

代码实现

您的项目需求