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