layer mobile手机端移动端弹出层弹出框多种效果代码

代码语言:html

所属分类:弹出层

代码描述:layer mobile手机端移动端弹出层弹出框多种效果代码

代码标签: 移动 弹出 弹出 多种 效果

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>


<html>

<head>
    <meta charset="utf-8">
    <title>layer弹层组件移动版</title>
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <style>
        html,body,h1,h2,h3,h4,h5,p,div,ul,ol,li,pre,code,button{margin:0; padding:0;}
        html, body{overflow-x:hidden;}
        img{border:0}
        body{ font-family: 'seanfont', "microsoft yahei"; font-size: 14px; line-height:22px; color:#333;}
        h1{font-size:30px;}
        ol{margin-left:20px;}
        code{ margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #eaeaea; background-color: #f8f8f8; border-radius: 3px; font-size:14px;}
        pre{white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
        h2{font-size:20px; margin:15px 0 10px; font-weight:400;}
        a{text-decoration: none; color:#0099cc}
        
        html{background-color:#F3F3F3;}
        .main{position:relative; max-width:640px; margin:0 auto; padding:0 10px; }
        header{background-color:#0099CC; margin-bottom:20px; color:#fff;}
        header .main{height:120px;}
        .main p{padding-bottom:5px;}
        .main strong{font-weight:400;}
        header h1{position:absolute; top:30px; left:20px;}
        header h1 code{position:relative; top:-15px; margin-left: 8px; background:none;}
        header nav{ position:absolute; bottom:15px; right:0; padding:0 10px;}
        header nav a{display:inline-block; vertical-align:top; margin:0 10px; height:30px; line-height:30px; border:1px solid #AAEAFF; border-radius:3px; padding:0 20px; color:#fff;}
        header nav a:hover{border:1px solid #fff;}
        
        .demo{margin:10px 0;}
        .demo a, .b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0