Web Mobile front-end construction (including style layout, pure version does not include other style frameworks), web style

Web Mobile front-end construction (including style layout, pure version does not include other style frameworks), web style

@ 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;}/* placeholder color */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;}/* floating */. fl {float: left! Important;}. fr {float: right! Important;}. clear {clear: both;}/* function */. hide {display: none! Important;}/* hide */. ellipsis {overflow: hidden;-o-text-overflow: ellipsis; white-space: nowrap; word-break: keep-all ;} /* The number of words is omitted */. keep {position: fixed! Important; border-bottom: # ccc 1px solid! Important;}/* scroll to keep */. mask {display: none; position: fixed; left: 0; z-index: 11; width: 100%; height: 100%; background-color: rgba (0, 0, 0, 0.4);}/* Mask Layer * // * effect */. 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 ;}/*------------------------------- --- Topic A starts -------------------------------- * // * master style */. 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: no defined height. When you need a footer, you can define the footer on the current page, and add the tag <div class = "footer"> </div> */. header ,. fo Oter {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 so Lid # ccc}. A-border-right {border-right: 1px solid # ccc}. A-bg {background-color: #00c1d9! Important}/* topic click effect */. a-bg-body {background-color: # d9d9d9;}/* Subject body background */. a-bg-bar {background-color: # e6e6e6! Important}/* topic click effect */. 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 {}/* topic button */. a-btn-click {background-color: # 00b5cb! Important}/* topic click effect * // * ------------------------------------ end of topic ----------------------------------*/

Asp.net master page:

<!DOCTYPE html>
Asp.net homepage:
@ {ViewBag. title = "Homepage" ;}@ 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> //... </Div> <div class = "footer A-bg"> </div> @ section js {<script> //... </script>}
Display result: