以下这些代码可能并不是每个人都需要全部的，不过不管是css还是html，或是其他的，单独到某个小块代码可能能帮助到您，那就拿走不谢
下面是html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--优先使用IE最新版本和Chrome-->
<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">
<!--主要是针对苹果手机将数字自动识别为号码-->
<meta name="format-detection" content="telephone=no">
<!--启用全屏模式，伪装app，离线应用。-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!--隐藏状态栏/设置状态栏颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器-->
<meta name="HandheldFriendly" content="True">
<!-- 微软的老式浏览器 告诉浏览器页面为某个宽度特殊优化-->
<meta name="MobileOptimized" content="width">
<!--指定适合自己网站的渲染内核名称-->
<meta name="renderer" content="webkit" />
<title>黑马学吧聚合页</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/flexible.js"></script>
<script src="js/flexible_css.js"></script>
</head>
<body>
<script src="js/floatmenu.js"></script>
</body>
</html>
下面是main.scss代码：
@import 'px2rem';
body{
color: #000;
}
// 具体内容可以根据自己的需要来添加
下面是_px2rem.scss的代码：
@function px2em($px, $base-font-size: 75px) {
@if (unitless($px)) {
@warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
@return px2em($px + 0px); // That may fail.
} @else if (unit($px) == em) {
@return $px;
}
@return ($px / $base-font-size) * 1em;
}
@mixin px2rem($property,$px-values,$baseline-px:75px,$support-for-ie:false){
//Conver the baseline into rems
$baseline-rem: $baseline-px / 1rem * 1;
//Print the first line in pixel values
// 打印出第一行的像素值
@if $support-for-ie {
#{$property}: $px-values;
}
//if there is only one (numeric) value, return the property/value line for it.
@if type-of($px-values) == "number"{
#{$property}: $px-values / $baseline-rem;
}
@else {
//Create an empty list that we can dump values into
$rem-values:();
@each $value in $px-values{
// If the value is zero or not a number, return it
@if $value == 0 or type-of($value) != "number"{
$rem-values: append($rem-values, $value / $baseline-rem);
}
}
// Return the property and its list of converted values
#{$property}: $rem-values;
}
}
// 定制一个font-dpr()这样的Sass混合宏
// 为了能更好的利于开发，在实际开发中，我们可以定制一个font-dpr()这样的Sass混合宏：
@mixin font-dpr($font-size){
font-size: $font-size;
[data-dpr="2"] & {
font-size: $font-size * 2;
}
[data-dpr="3"] & {
font-size: $font-size * 3;
}
}
// 有了这样的混合宏之后，在开发中可以直接这样使用
// @include font-dpr(16px);
下面是reset.css的代码：
html * {
outline: 0;
-webkit-text-size-adjust: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
overflow-y: scroll;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
color: #494949;
height: 100%;
}
html,
body {
font-family: "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "STHeiti", "微软雅黑", "Microsoft YaHei", sans-serif;
-webkit-font-smoothing: antialiased;
background-color: #f4f3f9;
}
body {
height: 100%;
-webkit-user-select: none;
user-select: none;
}
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
hr,
button,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
border: 0;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
section,
header,
footer,
nav,
article,
aside {
display: block;
}
body,
button,
input,
select,
textarea {
font-size: 100%;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
table {
border-spacing: 0;
border-collapse: collapse;
}
fieldset,
img {
border: 0;
}
abbr,
acronym {
font-variant: normal;
border: 0;
}
del {
text-decoration: line-through;
}
address,
caption,
cite,
code,
dfn,
em,
th,
var {
font-weight: 500;
font-style: normal;
}
ol,
ul {
list-style: none;
}
li {
list-style-type: none;
}
caption,
th {
text-align: left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 500;
}
q:before,
q:after {
content: '';
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
a:hover {
text-decoration: underline;
}
ins,
a {
text-decoration: none;
}
address,
caption,
cite,
code,
dfn,
ins,
em,
th,
var {
font-weight: normal;
font-style: normal;
}
img {
vertical-align: top;
border-width: 0;
}
*,
:before,
:after {
box-sizing: border-box;
}
a,
a:active,
a:hover,
a:visited {
text-decoration: none;
}
a:focus {
outline: none;
}
下面是common.css的代码：
html, body {
background-color: #f2f2f2;
}
* {
box-sizing: border-box;
}
.b-r-1 {
border-right: 1px solid #e4e4e4;
}
.b-l-1 {
border-left: 1px solid #e4e4e4;
}
.b-b-1 {
border-bottom: 1px solid #e4e4e4;
}
.b-t-1 {
border-top: 1px solid #e4e4e4;
}
/* 限制输入字数，超出部分显示... */
.word-keep {
display: block;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* 隐藏元素 元素的位置也没有 不会触发其点击事件*/
.hide {
display: none !important;
}
.show {
display: block !important;
}
/* 隐藏元素 元素的位置还在 只是设置了透明度 可以触发点击事件*/
.transparent {
opacity: 0;
}
/* 隐藏元素 但是元素的位置还在 无法触发其点击事件*/
.invisible {
visibility: hidden;
}
/* 隐藏元素 只是超出部分不显示, 配合js动画使用*/
.ov {
overflow: hidden;
_zoom: 1;
}
/* 隐藏文本 */
.text-hide {
font: 0/0 a;
color: transparent;
text-shadow: none;
background-color: transparent;
border: 0;
}
/* 空元素 */
.empty {
height: 1.3rem;
background: #f4f3f9;
content: "";
}
/* 加粗 */
.b {
font-weight: bold;
}
i {
font-style: normal;
}
/* 删除线样式 */
.text_through {
text-decoration: line-through;
}
/* 居中对齐 */
.vertical-middle {
vertical-align: middle;
}
.dashed {
border-bottom: 1px dashed #cccccc;
}
.Opacity {
opacity: .5;
filter: alpha(opacity=50);
}
/* 错误消息 */
#errormsg {
color: #f5423b;
}
.red_color {
color: #ff4e5c;
}
.gray_color {
color: #b9b9b9;
}
/* ==============
margin样式
============== */
.mt-20 {
margin-top: 0.26666666666666666rem;
}
.mt-10 {
margin-top: 0.13333333333333333rem;
}
.mg-t30 {
margin-top: 0.4rem;
}
.mb-20 {
margin-bottom: 0.26666666666666666rem;
}
.mb-100 {
margin-bottom: 1.4rem;
}
.mb-300 {
margin-bottom: 4rem;
}
.mb-600 {
margin-bottom: 8rem;
}
.mb-500 {
margin-bottom: 7rem;
}
.mb-800 {
margin-bottom: 12rem;
}
/* ==============
字体大小
============== */
.fs14 {
}
.fs16 {
}
.fs18 {
font-size: .28125rem;
}
.fs20 {
font-size: .3125rem;
}
.fs22 {
font-size: .34375rem;
}
.fs24 {
font-size: .375rem;
}
.fs26 {
font-size: .40625rem;
}
.fs28 {
font-size: .4375rem;
}
.fs30 {
font-size: .46875rem;
}
.fs32 {
font-size: .5rem;
}
.fs34 {
font-size: .53125rem;
}
.fs36 {
font-size: .5625rem;
}
.fs40 {
font-size: .625rem;
}
.fs48 {
font-size: 0.75rem;
}
/* ==============
表单样式
============== */
select,
textarea,
input[type=text],
input[type=search],
input[type=password],
input[type=datetime],
input[type=datetime-local],
input[type=date],
input[type=month],
input[type=time],
input[type=week],
input[type=number],
input[type=email],
input[type=url],
input[type=tel],
input[type=color] {
font-weight: normal;
-webkit-user-select: text;
user-select: text;
outline-style: none;
background: #fff;
vertical-align: middle;
-webkit-font-smoothing: antialiased;
-webkit-appearance: none;
-moz-appearance: none;
height: 1.14666667rem;
line-height: 1.14666667rem;
padding: 0.4rem 0.33333333rem;
border-radius: 0;
}
select:focus,
textarea:focus,
input[type="text"]:focus,
input[type="search"]:focus,
input[type="submit"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
button:focus {
border-color: #606060;
}
input:focus {
border-color: #606060;
}
button {
text-align: center;
-webkit-appearance: none;
-moz-appearance: none;
outline: 0;
border: none;
border-radius: 0.04rem;
}
textarea {
resize: none;
overflow: auto;
}
input,
textarea,
select {
background: #fff;
border: 1px solid #e2e2e2;
border-radius: 0.04rem;
}
input:focus,
textarea:focus {
border-color: #333;
}
input[type="button"], input[type="submit"], input[type="reset"] {
-webkit-appearance: none;
}
textarea {
-webkit-appearance: none;
}
input:focus {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-user-modify: read-write-plaintext-only;
}
/* ==============
按钮样式
============== */
button,
.redbtn,
.whitebtn {
width: 100%;
height: 1.25rem;
line-height: 1.25rem;
}
.btnwrap {
padding: 0.46875rem 0;
}
.btn-bar {
padding-top: 1rem;
width: 100%;
}
.btn {
display: inline-block;
text-align: center;
border: 2px solid #17e7d5;
border-radius: 2.375rem;
}
.btn img {
height: 50%;
}
.xs-btn {
width: 38%;
height: 2.375rem;
line-height: 2.375rem;
margin-top: 0.4rem;
}
.s-btn {
width: 50%;
height: 3.125rem;
line-height: 3.125rem;
border-radius: 3.125rem;
margin-top: 0.6rem;
}
.xm-btn {
width: 45%;
height: 1.875rem;
line-height: 1.875rem;
}
.xm-btn img {
margin-top: 0.4rem;
}
.m-btn {
width: 65%;
height: 2.6rem;
border-radius: 2.6rem;
}
.m-btn img {
margin-top: 0.53rem;
}
.l-btn {
width: 70%;
height: 2.6875rem;
line-height: 2.6875rem;
border-radius: 2.6875rem;
background-color: #1e202d;
}
.l-btn img {
margin-top: 0.5rem;
}
.text-btn {
display: inline-block;
color: #09dca7;
font-size: 0.875rem;
border: 0;
border-radius: 0;
text-decoration: underline;
}
.btn-bar a + a {
margin-left: 0.5rem;
}
.redbtn {
color: #fff;
background: #f5423b;
display: block;
}
.redbtn:active {
background: #e03939;
}
.whitebtn {
color: #f74747;
border: 1px solid #f74747;
background: #f9f9f9;
display: block;
}
.whitebtn:active {
color: #fff;
background: #f74747;
}
.graybtn {
color: #fff;
background: #aeaeae;
display: block;
cursor: pointer;
}
.smallbtn {
width: 0.34375rem;
height: 0.34375rem;
}
/* 获取验证码按钮*/
.getvalidcode {
color: #a3a3a3;
background: #fff;
border: 0.015625rem solid #d2d2d2;
}
.getvalidcode.active {
background: #e2e2e2;
border-color: #e2e2e2;
}
button#getVcode.disabled {
background: #f1f1f1;
color: #a6a6a6;
border-color: #f1f1f1;
}
/* ==============
清除浮动样式
============== */
.cf:before,
.cf:after {
display: table;
content: ' ';
}
.cf:after {
clear: both;
}
/* 弹窗蒙板背景样式 */
.bg {
background: rgba(0, 0, 0, 0.8);
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9;
display: none;
}
/* 分享浮动层 */
#share {
position: absolute;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
text-align: right;
background: rgba(0, 0, 0, 0.7) url(/public/static/img/share.png) no-repeat 100% 0;
background-size: 6.25rem 6.25rem;
}
/* ===========
placeholder颜色重置
=========== */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #9296b2;
opacity: 1;
font-size: 0.75rem;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #9296b2;
opacity: 1;
font-size: 0.75rem;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #9296b2;
opacity: 1;
font-size: 0.75rem;
}
::-webkit-input-placeholder {
color: #b1b1b1;
}
::-moz-input-placeholder {
color: #b1b1b1;
}
:-moz-placeholder {
color: #9296b2;
opacity: 1;
font-size: 0.75rem;
}
::-moz-placeholder {
color: #9296b2;
opacity: 1;
font-size: 0.75rem;
}
:-ms-input-placeholder {
color: #b1b1b1;
}
/* ==============
布局样式
============== */
.fl {
float: left;
}
.fr {
float: right;
}
.text-center {
text-align: center;
}
.text-left {
text-align: left;
}
.text-right {
text-align: right;
}
.center {
right: 0;
left: 0;
margin: auto;
}
.pos-r {
position: relative;
}
.pos-a {
position: absolute;
}
/* ==============
动画样式 animate
============== */
.bounceIn {
-webkit-animation: bounceInDown 0.8s ease;
animation: bounceInDown 0.8s ease;
}
.bounceOut {
-webkit-animation: bounceOut 0.8s 2s ease both;
animation: bounceOut 0.8s 2s ease both;
}
@-webkit-keyframes bounceInDown {
0%, 60%, 75%, 90%, 100% {
-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}
0% {
opacity: 0;
-webkit-transform: translate3d(0, -3000px, 0);
transform: translate3d(0, -3000px, 0);
}
60% {
opacity: 1;
-webkit-transform: translate3d(0, 25px, 0);
transform: translate3d(0, 25px, 0);
}
75% {
-webkit-transform: translate3d(0, -10px, 0);
transform: translate3d(0, -10px, 0);
}
90% {
-webkit-transform: translate3d(0, 5px, 0);
transform: translate3d(0, 5px, 0);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9);
transform: scale3d(0.9, 0.9, 0.9);
}
50%, 55% {
opacity: 1;
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1);
}
100% {
opacity: 0;
-webkit-transform: scale3d(0.3, 0.3, 0.3);
transform: scale3d(0.3, 0.3, 0.3);
}
}
/* ==============
媒体查询
============== */
@media (min-width: 50em) {
}
@media only screen and (min-width: 26.7em) and (max-width: 49.9999em) {
}
@media only screen and (min-width: 22.9em) and (max-width: 26.69999999999em) {
}
@media (max-width: 22.857142857142858em) {
}
flexible.js和flexible_css.js两个文件可以直接从网站上下载。
floatmenu.js 可以在我这篇文章中看到：
floatmenu(http://www.jianshu.com/p/1b624fb6a1b8)
