zoukankan      html  css  js  c++  java
  • Bootstrap3写的红色警告框样式组件

    用的是BT3的类和fa的图标

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width initial-scale=1">
        <link type="text/css" rel="stylesheet" href="framework/bootstrap-3.0.0/css/bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="framework/bootstrap-3.0.0/css/responsive-nav.css">
        <link type="text/css" rel="stylesheet" href="framework/font-awesome-4.3.0/css/font-awesome.min.css">
        <script type="text/javascript" src="framework/vendor/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="framework/bootstrap-3.0.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="framework/bootstrap-3.0.0/js/responsive-nav.js"></script>
        <script type="text/javascript" src="framework/vendor/html5shiv.js"></script>
        <script type="text/javascript" src="framework/vendor/respond.min.js"></script>
        <title>navbar-inverse导航条</title>
        <style type="text/css">
            .list-group-item:first-child{border-top-right-radius:5px;border-top-left-radius:5px;}
            .list-group-item:last-child{border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
            .hander{cursor: pointer}
            .white{color:white;}
            .red{color: red;}
            .bgred{background: red;}
            .borred{border: 1px solid red;}
            .circle{border-radius: 50%;}
            .dis-ib{display: inline-block;}
        </style>
    </head>
    <body>
         <div class="container">
             <!--列表组件之警告框-->
             <ul class="list-group col-xs-6 col-xs-offset-3">
                 <li class="list-group-item text-center borred">
                     <i class="fa fa-exclamation bgred circle dis-ib white" style=" 16px;height: 16px;line-height:18px;margin-right: 12px;"></i>
                     <a href="#" class="red">用户名或密码输入错误</a>
                     <span class="fa fa-remove pull-right hander" onclick="this.parentNode.style.display='none'"></span>
                 </li>
             </ul>
         </div>
    </body>
    </html>

  • 相关阅读:
    git
    Java命令行参数解析
    Java调用本地命令
    理解JavaScript继承
    python selenium自动化(三)Chrome Webdriver的兼容
    python selenium自动化(二)自动化注册流程
    python selenium自动化(一)点击页面链接测试
    使用python selenium进行自动化functional test
    JUnit中测试异常抛出的方法
    爬坑 http协议的options请求
  • 原文地址:https://www.cnblogs.com/koleyang/p/5383432.html
Copyright © 2011-2022 走看看