整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
家好，今天给大家分享一篇阅读的文章，本篇文章主要讲了 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小时内与您取得联系。
