项目基础所需要的东东

  1. 更纯净一点的h5 css reset;
  2. 移动端必加的meta;
  3. 基于SSI做前后端分离时候的include指令两种用法

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form
  , fieldset, legend, button, input, textarea, th, td {
    margin: 0;
    padding: 0;
}
input, select {
    vertical-align: middle;
    font-size: 100%;
    outline: none;
}
h2 {
    font-size: 18px
}
h3 {
    font-size: 14px;
}
h4, h5, h6 {
    font-size: 12px;
    color: #444
}
address, cite, em, dfn {
    font-style: normal;
}
ul {
    list-style: none;
}
fieldset, img, iframe {
    border: none;
}
table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
}
pre {
    white-space: pre-wrap !important
}
/* html5 tags */
article, aside, dialog, footer, header, section, footer, nav, figure {
    display: block
}
/* 让非ie浏览器默认也显示垂直滚动条,防止因滚动条引起的闪烁 */
html {
    overflow-y: scroll;
}
body {
    font: 14px/1.45 tahoma, "\5FAE\8F6F\96C5\9ED1", arial, helvetica, sans-serif;
    color: #333;
    word-wrap: break-word;
    text-shadow: 0 1px 0 white
}
/* common tags */
th, td {
    padding: 6px 5px;
    text-align: left
}
img {
    vertical-align: middle
}
input[type=checkbox], input[type=radio] {
    padding: 0
}
/* for ie9 */
a {
    text-decoration: none;
    color: #1d77b4;
    cursor: pointer;
}
a:hover {
    color: #3e9ee0;
}
button {
    padding: 0;
}
.btn, button, input[type="button"], input[type="reset"], input[type="submit"] {
    cursor: pointer;
    opacity: 0.9;
    -webkit-appearance: button;
}
.btn:hover, button:hover {
    opacity: 1;
}
button::-moz-focus-inner, input::-moz-focus-inner {
    padding: 0;
    border: 0;
}
input[type="text"], input[type="url"], input[type="password"], input[type="email"]
, input[type="number"], input[type="float"], input[type="search"] {
    padding: 0 4px;
    height: 26px; line-height: 26px;
    border: 1px solid #d2d2d2;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1) inset;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
input[type="text"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="email"]:focus
, input[type="number"]:focus, input[type="float"]:focus, input[type="search"]:focus {
    border: 1px solid #ffa800;
    box-shadow: 0 0 2px #ffa800;
}
input[type="text"], input[type="search"], input[type="number"], input[type="float"], input[type="url"], input[type="email"], textarea {
    color: #565656;
}
input:-moz-placeholder, textarea:-moz-placeholder
, input:-ms-input-placeholder, textarea:-ms-input-placeholder
, input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #d2d2d2;
}
input[type="search"] {
    -ms-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
input[type="submit"] {
    border: none;
}
textarea {
    resize: none;
    border: none;
    outline: none;
}
select {
    border: 1px solid #d2d2d2;
    text-align: center;
    color: #565656;
}

.btn, button {
    background: #f15619;
    padding: 4px 25px 6px;
    text-align: center;
    color: #fff;
    outline: none;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
.btn:hover, button:hover {
    color: #fff;
}
.clear:after, .pic-txt:after {
    content: "\20";
    display: block;
}
.clear:after, .pic-txt:after {
    clear: both;
}
.pic-txt .pic {
    float: left;
    margin-right: 8px;
}
.pic-txt .txt {
    overflow: hidden;
}
<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no, minimal-ui"/>
<!--#include virtual="/include/meta.html" -->
<!--include file指令只能引入同级目录或子目录内的文件,不能引入上层目录文件-->
<!--#include file="include/meta.html" -->
/*
 * 参考:
 * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
 * http://www.chedanji.com/css3-box-sizing/
 */
/* html的优先级是大于*的,所以前后顺序无所谓 */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

http://cssor.com/plain-html5-css-reset.html

参与评论

电子邮件地址不会被公开。 必填项已用*标注

*

全部分类
Books(4)code(7)database(6)html&css(24)java(11)JavaScript(48)jQuery(24)linux(20)python(1)React(1)share(1)soft(4)solution(53)thinking(17)vim(9)WordPress(8)前端优化(12)拓展(33)服务器(32)移动开发(4)自然(22)