Home >Web Front-end >HTML Tutorial >web移动端前端构建（含样式布局，纯净版不含其它样式框架）_html/css_WEB-ITnose
web移动端前端构建（含样式布局，纯净版不含其它样式框架）_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:411544browse
@charset 'utf-8';*{margin:0;padding:0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:none; } /* highlight equal to outline,only dose it has a effect in google chrome lite browser */*:focus,*:active {outline:none;}html, body { height:100%;}body{ width: 100%;font-family: \5FAE\8F6F\96C5\9ED1,\5B8B\4F53;-webkit-user-select:none;}p,a,span,textarea,b,input,dt,dd { color: #666;font-size: 0.9rem;}ul, ol{list-style:none;}img{border:none;}a { text-decoration:none;}textarea {resize:none;}input[type=button],button{text-align: center; background: none; border: 0; outline: none; }input { background: white; border: none; outline: none;}/*占位符颜色*/input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color:#ccc; }input:-moz-placeholder, textarea:-moz-placeholder { color:#ccc; }input::-moz-placeholder, textarea::-moz-placeholder { color: #ccc; }input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #ccc; }/* 浮动 */.fl { float: left !important; }.fr { float: right !important; }.clear { clear: both; }/* 功能 */.hide { display:none !important; }/*隐藏*/.ellipsis { overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;word-break:keep-all; } /* 字数省略 */.keep { position:fixed !important;border-bottom: #ccc 1px solid !important; } /*滚动保持*/.mask {display: none;position: fixed;left: 0;z-index: 11;width: 100%; height: 100%;background-color:rgba(0, 0, 0, 0.4);}/*遮罩层*//* 效果 */.shadow,.all-shadow * {box-shadow: 0 0 .3rem #ddd !important;}.gradient,.all-gradient * {background: -webkit-linear-gradient(top, #fff4f4,#fff);}.radius,.all-radius * { border-radius: .2em;}.left-radius {border-top-left-radius: .2em;border-bottom-left-radius: .2em;}.right-radius {border-top-right-radius: .2em;border-bottom-right-radius: .2em;}.top-radius {border-top-left-radius: .2em;border-top-right-radius: .2em;}/* ---------------------------------- 主题A开始 ---------------------------------- *//* 母版样式 */.app{display:table;width:100%;height:100%;}.app>* { display: table-row; }.app>:nth-child(2) { width: 100%;height:100%; }.app>:first-child,.header{top:0; width: 100%;height: 2.5rem;line-height:2.5rem;}.app>:last-child,.footer{ bottom:0;width: 100%; /*height: 4rem;*/}/*height:无定义高度，当需要页脚时可在当前页定义页脚，并添加标签<div class="footer"></div>即可*/.header,.footer{ position:fixed;display:table;}.header>*{display:table-cell;font-size:1rem;color:white;}.A-color{ color: #00c1d9 }.A-color-gray {color: #ccc}.A-color-error { color: #ff8181 }.A-color-success { color:green }.A-color-disabled { color: #999 }.A-border { border-color: #ccc }.A-border-top{ border-top:1px solid #ccc}.A-border-bottom {border-bottom:1px solid #ccc }.A-border-left { border-left:1px solid #ccc }.A-border-right{ border-right:1px solid #ccc }.A-bg {background-color:#00c1d9 !important } /* 主题点击效果 */.A-bg-body { background-color: #d9d9d9; } /* 主题body背景 */.A-bg-bar {background-color:#e6e6e6 !important } /* 主题点击效果 */.A-icon-filter{ background: url(/Image/Ico/filter.png) center no-repeat;background-size:1.4rem;}.A-icon-user{ background: url(/Image/Ico/user.png) center no-repeat;background-size:1.4rem;}.A-icon-arrow-down{ background: url(/Image/Ico/arrow_down.png) 1rem center no-repeat;background-size:.8rem .4rem;}.A-btn-all,.A-btn {} /* 主题按钮 */.A-btn-click {background-color:#00b5cb !important } /* 主题点击效果 *//* ---------------------------------- 主题A结束 ---------------------------------- */ asp.net 母版页：
<!DOCTYPE html><html><head> <meta charset="utf-8" name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> <title>@ViewBag.Title</title> @Styles.Render("~/Css") @RenderSection("css", false)</head><body><div class="app"> <div></div> <div>@RenderBody()</div> <div></div></div>@Scripts.Render("~/Js")@RenderSection("js", required: false)</body></html> asp.net 首页：
@{ ViewBag.Title = "首页";}@section css{ <style> .app > :last-child, .footer { height:2.5rem } .city-btn { width: 5.5rem;text-indent:2.3rem; } .filter-btn,.user-btn{ width:3.2rem;} </style>}<div class="header A-bg"> <a class="city-btn A-icon-arrow-down A-btn"></a> <h1></h1> <a class="filter-btn A-icon-filter A-btn"></a> <a class="user-btn A-icon-user A-btn"></a></div><div class="body"><br /> //...</div><div class="footer A-bg"></div>@section js{ <script> //... </script>} 显示结果：
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：html和css基础_html/css_WEB-ITnoseNext article：padding和margin的区别_html/css_WEB-ITnose