精华内容
下载资源
问答
  • 2021-08-04 04:50:38

    明天要给大家安利的一个软件是zeplin,用于连贯设计师和前端开发者,同时对于独立开发者,这也是一个神器。这个软件有web版本和客户端(mac/win)。有了它,利用Zeplin从设计图主动生成CSS,进步前端款式开发效率,升高前端款式入门门槛,像我一样的开发小白,学习前端开发的门槛又升高了1厘米。

    Zeplin工作流

    能够从sketch十分不便导入到zeplin,装置插件之后,你能够在plugins-zeplin插件找到对应的导入办法。无缝导入,对sketch用户十分不便。

    在导入zeplin之后,你能够针对不同的组件,间接查看和复制对应的CSS代码,疾速复制到你开发中的代码,对于前端开发者能够进步从设计到前端代码的过程,同时也升高了信息沟通中的乐音,进步了效率,你不须要设计师去切图、标注色值,所有的信息你都能够从设计原图无缝进入到CSS款式阶段。

    .Rectangle-Copy-3

    {

    width: 1125px;

    height: 319px;

    margin: 135px 0 0;

    padding: 85px 57px 0 58px;

    box-shadow: -5px -5px 50px 0 rgba(123, 123, 123, 0.25);

    background-color: #ffffff;

    }

    多说一句,对于很多的独立开发者敌人,这样的工具无疑在降低生产的难度,让产品设计到开发过程丝滑适度。值得体验领有。

    对于骇客白专访 hackerby.com

    开发者、设计师、产品的1v1深度交流平台。

    更多相关内容
  • 餐饮小程序前端样式

    2018-07-06 09:57:36
    餐饮小程序前端样式,仅供参考使用~直接导入就可以使用
  • jsp前端样式

    2016-01-14 22:28:32
    java前端jsp样式 function editUser() { var row = $('#dg').datagrid('getSelected'); if (row) { $('#dlg').dialog('open').dialog('setTitle', 'Edit User'); $('#fm').form('load', row); url...
  • 前端样式 分页中间是省略号,如果有什么问题,随时留言哦
  • 让微信小程序和页面界面 UI 统一:WeUI 前端样式库-附件资源
  • weui微信前端样式

    2017-07-24 14:42:13
    weui微信前端样式
  • 前端样式手风琴,非常好用,简单明了,前端样式手风琴,非常好用,简单明了
  • 个人整理和编写的前端样式 比如:多个按钮的移入移出点击的三种变换样式、网络自定义按钮样式、网络JQuery弹出提示框定时自动消失
  • 后台前端样式DEMO

    2017-04-24 16:27:19
    后台前端样式DEMO
  • 前端样式框架

    2018-01-01 12:16:46
    前端ace框架,从网上下载的,收集起来,仅供各位参考。
  • 一个在线博客系统,样式demo,亲测可用,前台bootstrap
  • ruoyi 更改前端样式

    千次阅读 2021-12-13 00:26:57
    1.复古按钮 (1)CSS .btn-dqn { background-color: #4CAF50; /* Green */ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block;... cu

    1.复古按钮

    在这里插入图片描述
    (1)CSS
    在这里插入图片描述

    .btn-dqn {
        background-color: #4CAF50; /* Green */
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
    }
    
    .btn-dq {
        background-color: white;
        color: black;
        border: 2px solid #008CBA;
    }
    

    (2)html
    在这里插入图片描述

        <button class="btn-dqn btn-dq" onclick="beginTest()">测试开始</button>
        <button class="btn-dqn btn-dq" onclick="saveAll()">保存方案</button>
    

    2.复古表格-隔行异色

    在这里插入图片描述

    在这里插入图片描述

    rowStyle: function(row, index) {                         // 动态修改行的颜色
        if(row.id %2 == 1 ){                                 // 如果值是1,表示已删除,设置行的颜色
            return  {css:{"background-color":'#f2f8fd'}};
        }
        return '';                                           // 注意:即使不改变颜色,也得返回 '' ,否则会报错。
    },
    

    color 可以改色号

    3.html背景底色

    在这里插入图片描述
    在这里插入图片描述

    <body class="gray-bg" style="background-color: #1a2226">
    
    展开全文
  • 前端样式-卡片01

    千次阅读 2022-03-19 20:08:05
    样式: HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content=...

    运用到的技术:

    html + css+ js

    样式:

    在这里插入图片描述

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" type="text/css" href="css/cardstyle.css"/>
        <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>
    </head>
    <body>
        <div id="card">
            <section id="team">
                <!--container-->
                <div class="container">
                    <!-- box-1 -->
                    <div class="box">
                        <!-- top-bar -->
                        <div class="top-bar"></div>
                        <!-- nav -->
                        <div class="nav">
                            <!-- verify-icon -->
                            <i class="verify fas fa-check-circle"></i>
                            <!-- heart-btn -->
                            <input type="checkbox" class="heart-btn" id="heart-btn">
                            <label for="heart-btn" class="heart"></label>
                        </div>
                        <!-- img and details  -->
                        <div class="details">
                            <img src="" alt="">
                            <strong>Emma Oliva</strong>
                            <p>Emmaoliva@gmail.com</p>
                        </div>
                        <!-- view-btns  -->
                        <div class="btn">
                            <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                            <a href="#"><i class="fas fa-eys"></i>view</a>
                        </div>
                    </div>
                    <!-- box-2 -->
                    <div class="box">
                        <!-- top-bar -->
                        <div class="top-bar"></div>
                        <!-- nav -->
                        <div class="nav">
                            <!-- verify-icon -->
                            <i class="verify fas fa-check-circle"></i>
                            <!-- heart-btn -->
                            <input type="checkbox" class="heart-btn" id="heart-btn">
                            <label for="heart-btn" class="heart"></label>
                        </div>
                        <!-- img and details  -->
                        <div class="details">
                            <img src="" alt="">
                            <strong>Emma Oliva</strong>
                            <p>Emmaoliva@gmail.com</p>
                        </div>
                        <!-- view-btns  -->
                        <div class="btn">
                            <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                            <a href="#"><i class="fas fa-eys"></i>view</a>
                        </div>
                    </div>
                    <!-- box-3 -->
                    <div class="box">
                        <!-- top-bar -->
                        <div class="top-bar"></div>
                        <!-- nav -->
                        <div class="nav">
                            <!-- verify-icon -->
                            <i class="verify fas fa-check-circle"></i>
                            <!-- heart-btn -->
                            <input type="checkbox" class="heart-btn" id="heart-btn">
                            <label for="heart-btn" class="heart"></label>
                        </div>
                        <!-- img and details  -->
                        <div class="details">
                            <img src="" alt="">
                            <strong>Emma Oliva</strong>
                            <p>Emmaoliva@gmail.com</p>
                        </div>
                        <!-- view-btns  -->
                        <div class="btn">
                            <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                            <a href="#"><i class="fas fa-eys"></i>view</a>
                        </div>
                    </div>
                    <!-- box-4 -->
                    <div class="box">
                        <!-- top-bar -->
                        <div class="top-bar"></div>
                        <!-- nav -->
                        <div class="nav">
                            <!-- verify-icon -->
                            <i class="verify fas fa-check-circle"></i>
                            <!-- heart-btn -->
                            <input type="checkbox" class="heart-btn" id="heart-btn">
                            <label for="heart-btn" class="heart"></label>
                        </div>
                        <!-- img and details  -->
                        <div class="details">
                            <img src="" alt="">
                            <strong>Emma Oliva</strong>
                            <p>Emmaoliva@gmail.com</p>
                        </div>
                        <!-- view-btns  -->
                        <div class="btn">
                            <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                            <a href="#"><i class="fas fa-eys"></i>view</a>
                        </div>
                    </div>
                    <!-- box-5 -->
                    <div class="box">
                        <!-- top-bar -->
                        <div class="top-bar"></div>
                        <!-- nav -->
                        <div class="nav">
                            <!-- verify-icon -->
                            <i class="verify fas fa-check-circle"></i>
                            <!-- heart-btn -->
                            <input type="checkbox" class="heart-btn" id="heart-btn">
                            <label for="heart-btn" class="heart"></label>
                        </div>
                        <!-- img and details  -->
                        <div class="details">
                            <img src="" alt="">
                            <strong>Emma Oliva</strong>
                            <p>Emmaoliva@gmail.com</p>
                        </div>
                        <!-- view-btns  -->
                        <div class="btn">
                            <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                            <a href="#"><i class="fas fa-eys"></i>view</a>
                        </div>
                    </div>
                    <!-- box-6 -->
                    <div class="box">
                        <!-- top-bar -->
                        <div class="top-bar"></div>
                        <!-- nav -->
                        <div class="nav">
                            <!-- verify-icon -->
                            <i class="verify fas fa-check-circle"></i>
                            <!-- heart-btn -->
                            <input type="checkbox" class="heart-btn" id="heart-btn">
                            <label for="heart-btn" class="heart"></label>
                        </div>
                        <!-- img and details  -->
                        <div class="details">
                            <img src="" alt="">
                            <strong>Emma Oliva</strong>
                            <p>Emmaoliva@gmail.com</p>
                        </div>
                        <!-- view-btns  -->
                        <div class="btn">
                            <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                            <a href="#"><i class="fas fa-eys"></i>view</a>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </body>
    </html>
    

    CSS

    body{
        margin:0px;
        padding:0px;
        font-family:poppins;
        background-color: #f8f8f8;
    }
    *{
        box-sizing:border-box;
    }
    a{
        text-decoration:none;
    }
    #card #team{
        width:100%;
        height:100vh;
        display:flex;
        justify-content:center;
        align-items: center;
        flex-direction:column;
    }
    #card #team .heading{
        font-size:1.3rem;
        color:#2c2c2c;
        font-weight:500;
        display:flex;
        align-items:center;
        margin:20px;
    }
    #card #team .heading i{
        background-color: #507bfc;
        box-shadow:2px 5px 30px rgba(80,123,252,0.4);
        color:#ffffff;
        width:40px;
        height:40px;
        display:flex;
        justify-content:center;
        align-items: center;
        font-size:0.9rem;
        margin:0px 20px;
    }
    #card #team .container .box{
        width:266px;
        height:340px;
        background-color: #fff;
        box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        padding:20px;
        border-radius:10px;
        margin:20px;
        position: relative;
    }
    #card #team .container{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }
    #card #team .container .top-bar{
        width:50%;
        height:4px;
        position:absolute;
        left:50%;
        top:0px;
        transform:translateX(-50%);
        background-color: #507bfc;
        border-radius: 0px 0px 10px 10px;
    }
    #card #team .container .box .nav{
        display:flex;
        justify-content:space-between;
        align-items:center;
        width:100%;
    }
    #card #team .container .box .nav .verify{
        color:#17b667;
    }
    #card #team .container .box .nav .heart{
        color:rgba(155,155,155);
    }
    #card #team .container .box .nav .heart:before{
        content:'\f004';
        font-family:fontAwesome;
        line-height:30px;
        z-index:1;
    }
    #card #team .container .box .nav .heart-btn:checked ~ .heart:before{
        color:#e41934;
    }
    #card #team .container .box .nav .heart-btn{
        display:none;
    }
    #card #team .container .box .details{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction:column;
    }
    #card #team .container .box .details img{
        width:100px;
        height:100px;
        border-radius:50%;
        overflow:hidden;
        object-fit:cover;
        object-position: center;
    }
    #card #team .container .box .details strong{
        font-weight: 500;
        color:#141414;
        letter-spacing:1px;
        margin-top:10px;
    }
    #card #team .container .box .details p{
        font-size:0.8rem;
        color:#7a7a7a;
        margin:5px 0px;
    }
    #card #team .container .box .btn{
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
    }
    #card #team .container .box .btn a{
        color:#8b8b8b;
        padding:8px 22px;
        border-radius:20px;
        font-size:0.9rem;
    }
    #card #team .container .box .btn a i{
        margin-right: 10px;
    }
    #card #team .container .box .btn a:hover{
        color:#fff;
        background-color: #507bfc;
        box-shadow:2px 5px 15px rgba(80,123,252,0.5);
        transition:all ease 0.3s;
    }
    #card #team .container .box:hover{
        box-shadow: 2px 2px 30px rgba(4,15,49,0.1);
        transform:scale(1.01);
        transition:all ease 0.1s;
    }
    
    展开全文
  • 拼单前端样式

    2017-11-13 16:32:53
    拼单前端样式拼单前端样式拼单前端样式拼单前端样式拼单前端样式拼单前端样式拼单前端样式拼单前端样式
  • AtomFile 一些好看的前端样式
  • 大气炫酷前端设计前端模板是一款大气精美的HTML5前端网站模板下载,需要的朋友可以免费下载使用。
  • 自己也在看,代码不错
  • 前端样式常用的reset
  • 表格导出前端样式.rar

    2019-12-12 21:21:46
    前端导出excel 样例 支持excel ppt world,非常容易上手,适合初学者 >>>>
  • 前端开发人员,非常便捷的一个取色工具,点击放大取色,右键取消,默认保存,直接复制。
  • bootstrap前端样式

    2017-07-24 14:40:31
    bootstrap
  • Vue前端样式框架

    千次阅读 2019-02-14 18:52:23
    iview: http://v1.iviewui.com/ Element: http://element-cn.eleme.io/#/zh-CN
    展开全文
  • 微信小程序WeUI 前端样式

    千次阅读 2019-05-02 15:12:34
    之前在小程序开发文档上见过WeUI 前端样式库,下载下来后一直摸不着头脑,今天终得拨云见日。 其实这就是使得微信小程序和页面界面 UI 统一:WeUI 前端样式库(含 Sketch 源文件) 微信里使用的 H5 页面是相当多,...
  • 前端样式--取色器.rar

    2021-03-31 10:10:33
    前端样式--取色器.rar
  • 50个项目:前端样式的代码片段
  • 前端展示广告各种样式,公告轮播样式,内含十多种方式
  • 前端样式类操作----class属性

    千次阅读 2019-03-06 16:12:18
    &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;对class进行操作&lt;/title&gt;...
  • 网页开发常用小图标案例
  • Anaconda jupyter notebook 简单更改前端样式 方案一:关于notebook的主题方案二:直接改变notebook前端样式第一步:找到可以编写自定义样式的文件第二步,找到要修改样式的地方第三步,编辑`custom.css`文件第四步...
  • 一套白色系,mac风格的前端模板框架,支持页面标签切换,适用于常见管理后台前端页面开发。ui元素标比较丰富,可以满足常见页面应用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 284,973
精华内容 113,989
关键字:

前端样式