【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)

简介: 【实用】一组原创原生样式的基础控件、UI组件样式(偏向移动端H5页面的样式)

点击查看效果

代码直接复制就可以用了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
    <style>
        /*蓝色按钮----------------------------------------*/
        button {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;height: 50px;width: 100%;border: 1px solid rgba(51, 100, 237, .35);color: #fff;font-size: 16px;font-weight: bold;border-radius: 3px;background: linear-gradient(180deg, #648CFF 0%, #4172FA 100%);box-shadow: 0 3px 4px 0 rgba(44, 71, 146, .32), inset 0 -2px 0 0 #3262e6;text-align: center;line-height: 46px;user-select: none;}  button:hover {opacity: .9;box-shadow: none;}  button:focus, button:active {outline: none;background: linear-gradient(180deg, #4d7bff, #154deb);transform: scale(.97);}  button[disabled] {color: #fff;background: #b0c7ff;pointer-events: none;cursor: default;box-shadow: none;}
        /*白色按钮----------------------------------------*/
        button[white] {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;transition: .618s ease;cursor: pointer;width: 100%;height: 50px;border: none;border-radius: 3px;font-size: 16px;font-weight: bold;color: #292f3a;letter-spacing: 0;outline: none;background: linear-gradient(-180deg, #fff 8%, #f2f2f7 97%);box-shadow: 0 2px 3px 0 rgba(44, 71, 146, .32), 0 -1px 1px 0 rgba(44, 71, 146, .1);}  button[white]:hover {background: linear-gradient(-180deg, #f2f2f7 20%, #f2f2f7 97%);box-shadow: none;color: #3973ff;border: none;}  button[white]:active, button[white]:active {background: #d8dde6;transform: scale(.97);}  button[white][disabled] {background: rgba(216, 221, 230, .8) !important;pointer-events: none;cursor: default;color: white;box-shadow: none;}
        /*输入框----------------------------------------*/
        input {transition: .618s ease;width: 100%;height: 40px;background: #fff;border-radius: 3px;padding: 10px;outline: none;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;box-sizing: border-box;border: 1px solid #c0c4cc;}  input:hover {border-color: #909399;}  input:focus, input:active {border-color: #3973ff;background: #f7f9fc;}  input[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;}  input[error] {border-color: #dd1a32;background: #ffeff1;}  input[error]:focus, input[error]:active {color: #dd1a32;border-color: #ad0015;background: #dd1a3222;}
        /*下拉框----------------------------------------*/
        select {transition: .618s ease;width: 100%;height: 40px;font-size: 16px;color: #292f3a;letter-spacing: 0;line-height: 16px;border: 1px solid #c0c4cc;border-radius: 3px;background: #fff;outline: none;-webkit-appearance: none;-moz-appearance: none;appearance: none;padding: 10px 12px 10px 12px;cursor: pointer;}  select:hover {border-color: #909399;}  select:focus, select:active {border: 2px solid #3973ff;background: #f7f9fc;padding: 9px 11px 9px 11px;}  select[disabled] {pointer-events: none;background: #f2f5fa;border: 1px solid #c0c4cc;}
        /*标签----------------------------------------*/
        .tag {
            display: inline-block;
            position: relative;
            padding: 6px 12px;
            font-size: 14px;
            background: #e4e9f2;
            color: rgb(32, 17, 172);
            border-radius: 100px;
            cursor: default;
        }
        /*黑色气泡框----------------------------------------*/
        .black-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;max-width: 240px;border-radius: 3px;font-size: 12px;color: #fff;line-height: 12px;box-sizing: border-box;background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);}  .black-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;border-radius: 2px;transform: rotate(45deg);background: #292f3a;box-shadow: 0 2px 3px 0 rgba(41, 47, 58, .4);}
        /*白色气泡框----------------------------------------*/
        .white-arrow-tip {position: relative;display: inline-block;padding: 10px 12px;border-radius: 3px;max-width: 240px;font-size: 12px;color: #fff;line-height: 12px;background: #fff;box-shadow: 0 -1px 1px 0 rgba(216, 221, 230, .4), 0 2px 4px 0 #ccd0d9;color: rgba(41, 47, 58, .7);}  .white-arrow-tip:after {content: "";position: absolute;left: -4px;top: 11px;display: block;width: 10px;height: 10px;background: #fff;box-shadow: -1px 2px 1px 0 rgba(41, 47, 58, .14);border-radius: 2px;transform: rotate(45deg);}
        /*普通提示----------------------------------------*/
        .normal-tip {display: inline-block;padding: 10px 12px;background: #525966;border-radius: 2px;font-size: 12px;color: hsla(0, 0%, 100%, .7);letter-spacing: 0;line-height: 12px;}
        /*关闭按钮----------------------------------------*/
        .close-btn {tap-highlight-color: transparent !important;-webkit-tap-highlight-color: transparent !important;width: 24px;height: 24px;font-size: 16px;cursor: pointer;display: inline-block;font-style: normal;position: relative;text-align: center;user-select: none;}  .close-btn:after {content: "";position: absolute;margin-top: -21px;display: block;width: 100%;height: 100%;border-radius: 100%;background-color: rgba(0, 0, 0, .08);opacity: 0;transform: scale(.5);transition: all .2s cubic-bezier(.175, .885, .32, 1.275);}  .close-btn:hover:after {opacity: 1;transform: scale(1.4);}
        /*卡片----------------------------------------*/
        .normal-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 2px 4px 0 #ccd0d9;}  .card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 -1px 3px 0 rgba(216, 221, 230, .3), 0 6px 12px 0 rgba(204, 208, 217, .8);}  .large-card {border-radius: 8px;box-sizing: border-box;padding: 10px;margin: 10px;background: #fff;box-shadow: 0 12px 29px 0 #ccd0d9;}
        /*单选框----------------------------------------*/
        input[type="radio"] {width: 20px;height: 20px;transform: translateY(4px);}
        /*复选框----------------------------------------*/
        input[type="checkbox"] {width: 20px;height: 20px;transform: translateY(4px);}
    </style>
</head>
<body>
<button>蓝色按钮</button>
<br>
<br>
<button disabled>蓝色按钮(禁用)</button>
<br>
<br>
<button white>白色按钮</button>
<br>
<br>
<button white disabled>白色按钮(禁用)</button>
<br>
<br>
<input type="text" placeholder="请输入…">
<br>
<br>
<input type="text" placeholder="请输入必填项" error="">
<br>
<br>
<input type="text" placeholder="禁止输入" disabled>
<br>
<br>
<select>
    <option value="">选项1</option>
    <option value="">选项2</option>
    <option value="">选项3</option>
</select>
<br>
<br>
<select disabled>
    <option value="">禁止选中</option>
</select>
<br>
<br>
<div class="tag">标签文字</div>
<br>
<br>
<div class="black-arrow-tip">黑色气泡框</div>
<br>
<br>
<div class="white-arrow-tip">白色气泡框</div>
<br>
<br>
<div class="normal-tip">普通提示</div>
<br>
<br>
<i class="close-btn">✕</i>
<br>
<div class="normal-card" style="width: 300px;height: 200px;">普通阴影卡片</div>
<br>
<div class="card" style="width: 300px;height: 200px;">正常阴影卡片</div>
<br>
<div class="large-card" style="width: 300px;height: 200px;">大面积阴影卡片</div>
<br>
<br>
<p>旋转加载</p>
<svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#3973ff" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>
<svg data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><path data-v-b9c138e2="" fill="#000" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)"><animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform></path></svg>
<button style="vertical-align:middle">
    <svg style="transform: translateY(5px);" data-v-b9c138e2="" version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 50 50" xml:space="preserve"><pathdata-v-b9c138e2
        =""fill="#fff"d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z" transform="rotate(332.128 25 25)">
        <animateTransform data-v-b9c138e2="" attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"></animateTransform>
        </path></svg>
    loading...
</button>
<br>
<br>
<p>单选框</p>
<input type="radio" name="sex" value="1" checked>男  <input type="radio" name="sex" value="0">女
<br>
<br>
<p>复选框</p>
<input type="checkbox" id="interest-1" name="interest" value="1" checked><label for="interest-1">唱歌</label>
<input type="checkbox" id="interest-2" name="interest" value="2" ><label for="interest-2">跳舞</label>
<input type="checkbox" id="interest-3" name="interest" value="3" checked><label for="interest-3">游戏</label>
<input type="checkbox" id="interest-4" name="interest" value="4" ><label for="interest-4">旅游</label>
<input type="checkbox" id="interest-5" name="interest" value="5" ><label for="interest-5">书法</label>
<br>
<br>
</body>
</html>


相关文章
|
6天前
|
消息中间件 编译器 API
Windows窗口程序
Windows窗口程序
|
7天前
|
C# 开发者 Windows
基于Material Design风格开源、易用、强大的WPF UI控件库
基于Material Design风格开源、易用、强大的WPF UI控件库
|
12天前
|
JavaScript 前端开发
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
12 0
如何优雅的只在当前页面中覆盖ui库中组件的样式(vue的问题)
|
22天前
|
机器学习/深度学习 人工智能 前端开发
机器学习PAI常见问题之web ui 项目启动后页面打不开如何解决
PAI(平台为智能,Platform for Artificial Intelligence)是阿里云提供的一个全面的人工智能开发平台,旨在为开发者提供机器学习、深度学习等人工智能技术的模型训练、优化和部署服务。以下是PAI平台使用中的一些常见问题及其答案汇总,帮助用户解决在使用过程中遇到的问题。
|
26天前
|
Windows
实现Windows程序的数据更新
实现Windows程序的数据更新
12 0
|
26天前
|
Windows
构建布局良好的Windows程序
构建布局良好的Windows程序
11 0
|
26天前
|
C# Windows
初识Windows程序
初识Windows程序
9 0
|
1月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
27 0
|
1月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
13 0
|
1月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
29 0