前端開發程式碼模版收錄

餘二五發表於2017-11-14
前端

一、建立html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!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">
    <!--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、常用基本樣式、工具樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
/* ===================
    基本預設值
    ================== */
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;
}



附：

  1、顏色拾取器(美工必備螢幕顏色吸取器) http://down.51cto.com/data/2318767

  2、10個HTML5美化版核取方塊和單選框：http://www.html5tricks.com/10-pretty-checkbox-radiobox.html

本文轉自 藝晨光 51CTO部落格，原文連結：http://blog.51cto.com/ycgit/1939281，如需轉載請自行聯絡原作者


相關文章