前端开发代码模版收录

发布时间：2020-04-03 00:13:28 作者：艺晨光
来源：网络阅读：500

一、创建html

<!DOCTYPE html>
<html lang="zn-CN">
<head >
    <meta charset="UTF-8">
    <!--ie8~ie10  使用电脑上IE最新的文档模式edge渲染页面  ie11已放弃兼容模式，本身兼容已经很好了-->
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <!--移动端响应式设置-->
    <meta name="viewport" content="width=device-width,initial-scale=1，maximum-scale=1, minimum-scale=1, user-scalable=no">
    <!--SEO-->
    <meta name="keywords" content="购物,电商">
    <meta name="description" content="综合购物平台">
    <title>网页标题</title>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<!--版本小于等于ie8处理-->
<!--[if lte IE 8]>
<p class="browserupgrade">您的浏览器版太旧了，请到 <a href="http://browsehappy.com">这里</a>更新，以获取最佳的体验</p>
<![endif]-->
<header>
</header>
<div class="container">
</div>
<footer>
</footer>
</body>
</html>

二、基本css

1、初始化页面（normalize.css）：http://down.51cto.com/data/2318760

2、常用基本样式、工具样式（pc上使用rem的话，需要考虑下css3属性rem的兼容性）

/* ===================
    基本默认值
    ================== */
html{
    font-size: 125%;/* 浏览器默认16px*125%=20px,页面中使用1rem=20px */
    color: #222;
}
::selection{
    background-color: #b3d4fc;
    text-shadow: none;
}/* 设置文字选中的颜色，以及是否有阴影 */

ul{
    margin: 0;
    padding: 0;
}
li{
    list-style: none;
}

/* =====================
    工具样式
    ==================== */
.center-block{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.pull-right{
    float: right; !important;
}
.pull-left{
    float: left; !important;
}
.text-right{
    text-align: right; !important;
}
.text-left{
    text-align: left; !important;
}
.text-center{
    text-align: center; !important;
}
.hide{
    display: none; !important;
}
.show{
    display: block; !important;
}

.invisible{
    visibility: hidden;
}/* 不仅隐藏元素，而且不占用空间 */

.text-hide{
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}/* 隐藏文本 */

.clearfix:before,
.clearfix:after{
    content:"";
    display: table;
}/* 清除浮动1  使用：before可以防止本元素的顶部margin与上方元素的底部margin发生重叠*/

.clearfix:after{
    clear: both;
}/* 清除浮动2 */

/* ======================
    浏览器更新提示
    ===================== */
.browserupgrade{
    margin: 0;
    padding: 0.5rem;
    background: #cccccc;
}

/* ====================
    自定义页面样式
    =================== */
body{
    font-size: 0.6rem;
    font-family: normal normal,microsoft yahei,Arial,sans-serif;
    line-height: 1.5;
    background-color: #f7f7f7;
}
a{
    color: #666666;
    text-decoration: none;
}
a:hover,a:active{
    color: #0ae;
    text-decoration: underline;
}

三、移动端rem处理（已1rem=30px为例）

(function() {
  var iWidth = document.documentElement.getBoundingClientRect().width;
  iWidth = iWidth > 750 ? 750 : iWidth;
  document.getElementsByTagName('html')[0].style.fontSize = iWidth / 25 + 'px';
})();

附：

1、颜色拾取器(美工必备屏幕颜色吸取器) http://down.51cto.com/data/2318767

2、10个HTML5美化版复选框和单选框：http://www.html5tricks.com/10-pretty-checkbox-radiobox.html

前端开发代码模版收录

相关阅读