色卡选择效果代码
代码语言:html
所属分类:选择器
代码描述:色卡选择效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300'> <style> * { box-sizing: border-box; } body { background: #222; font-family: "Lato", sans-serif; font-weight: 300; -webkit-transition: background .33s; transition: background .33s; } .colour { width: 18.4%; background: rgba(255, 255, 255, 0.9); float: left; text-align: center; } .colour:nth-child(n) { margin-top: 2%; margin-right: 2%; margin-bottom: 2%; } .colour:nth-child(5n) { margin-right: 0; margin-bottom: 0; } @media (max-width: 1200px) { .colour { width: 23.5%; } .colour:nth-child(n) { margin-top: 2%; margin-right: 2%; margin-bottom: 2%; } .colour:nth-child(4n) { margin-right: 0; margin-bottom: 0; } } @media (max-width: 900px) { .colour { width: 30.6666666667%; } .colour:nth-child(n) { margin-top: 4%; margin-right: 4%; margin-bottom: 4%; } .colour:nth-child(3n) { margin-right: 0; margin-bottom: 0; } } @media (max-width: 600px) { .colour { width: 47%; } .colour:nth-child(n) { margin-top: 6%; margin-right: 6%; margin-bottom: 6%; } .colour:nth-child(2n) { margin-right: 0; margin-bottom: 0; } } @media (max-width: 400px) { .colour { width: 100%; } .colour:nth-child(n) { margin-top: 8%; margin-right: 8%; margin-bottom: 8%; } .colour:nth-child(1n) { margin-right: 0; margin-bottom: 0; } } .colour div { display: block; float: left; width: 50%; height: 100px; padding-top: 40px; color: #fff; font-size: 16px; overflow: hidden; cursor: pointer; } .colour span { display: inline-block; padding: 10px; cursor: default; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } </style> </head> <body translate="no" > <div class="colour"&g.........完整代码请登录后点击上方下载按钮下载查看
网友评论0