小编喜欢直接点，比如直接关注小编^_^
今天分享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: '\25BC';
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>
如本文存在文字阐述不准及代码测试不足等问题，请见谅。供大家学习交流。
也欢迎关注我们。
本文暂时没有评论，来添加一个吧(●'◡'●)