- 主頁(yè)面設(shè)置
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<!--設(shè)置瀏覽器編碼類型-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta http-equiv="content-type" content="application/xhtml+xml;charset=UTF-8" />
<!--清楚瀏覽器緩存-->
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT" />
<!--禁止瀏覽器縮放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!--iPhone手機(jī)上設(shè)置手機(jī)號(hào)碼不被顯示為撥號(hào)鏈接-->
<meta content="telephone=no, address=no" name="format-detection" />
<!--ios私有屬性箱硕，可以添加到主屏幕-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--ios私有屬性搏恤，網(wǎng)站開啟對(duì)web app的支持-->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="layoutmode" content="standard" />
<meta name="renderer" content="webkit" />
<!--uc瀏覽器判斷到頁(yè)面上文字居多時(shí)律适，會(huì)自動(dòng)放大字體優(yōu)化移動(dòng)用戶體驗(yàn)。添加以下頭部可以禁用掉該優(yōu)化-->
<meta name="wap-font-scale" content="no">
<meta content="telephone=no" name="format-detection" />
<!--讓IE8淮椰，IE9角塑，支持Html5和Css3-->
<!--[if lte IE 8]>
<script src="scripts/selectivizr.js"></script>
<![endif]-->
<!--讓IE9一下的瀏覽器支持Html5標(biāo)簽和媒體查詢器（主要用于響應(yīng)式網(wǎng)站開發(fā)）-->
<!--[if lt IE 9]>
<script src="scripts/css3-mediaqueries.js"></script>
<script src="scripts/html5shiv.js"></script>
<![endif]-->
<!-- 重置樣式 -->
<link type="text/css" href="css/reset.css" rel="stylesheet" />
<!-- 主樣式 -->
<link type="text/css" href="css/common.css" rel="stylesheet" />
<!-- Jquery庫(kù) -->
<!--<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>-->
<!-- 手機(jī)觸摸 -->
<!--<script type="text/javascript" src="scripts/hammer.js"></script>-->
<style>
header {
background-color: black;
color: white;
text-align: center;
padding: 0px;
/* padding: 5px;*/
}
nav {
line-height: 30px;
background-color: #eeeeee;
height: 300px;
width: 100px;
float: left;
padding: 0px;
/*padding: 5px;*/
}
section {
width: 350px;
float: left;
padding: 0px;
/*padding: 10px;*/
}
footer {
background-color: black;
color: white;
clear: both;
text-align: center;
padding: 0px;
/*padding: 5px;*/
}
</style>
</head>
<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
</p>
</section>
<footer>
Copyright W3School.com.cn
</footer>
</body>
</html>
- 引用的common.css文件
/* 禁用iPhone中Safari的字號(hào)自動(dòng)調(diào)整 */
html {
-webkit-text-size-adjust: none;
}
/* 設(shè)置HTML5元素為塊 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
/* 設(shè)置圖片視頻等自適應(yīng)調(diào)整 */
img {
max-width: 100%;
height: auto;
width: auto9;
/* ie8 */
}
.video embed,
.video object,
.video iframe {
width: 100%;
height: auto;
}
body {
font: 14px/22px "Georgia", Helvetica, Arial, sans-serif;
background: #fff;
color: #595959;
overflow-y: scroll;
overflow-x: hidden;
*overflow-y: auto !important;
}
a {
text-decoration: none;
cursor: pointer;
}
.Wrapper {
width: 100%;
padding: 0;
margin: 0;
}
li {
list-style: none;
}
a {
text-decoration: none;
color: #555756;
}
a:hover {
color: #141414;
text-decoration: none;
}
a img {
border: none;
}
a>img {
vertical-align: bottom;
}
.min-height {
min-height: 0;
height: auto;
_height: 0;
overflow: hidden;
_overflow: visible;
}
.position-absolute {
position: absolute;
}
.position-relative {
position: relative;
}
.overflow-hidden {
overflow: hidden;
}
/*
* -----------------------------------------
* 320 ~ 480
* -----------------------------------------
*/
@media only screen and (min-width: 320px) and (max-width: 480px) {}
/*
* -----------------------------------------
* 321 ~ 寬大于321的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 321px) {}
/*
* -----------------------------------------
* ~ 320 寬小于320的設(shè)備
* -----------------------------------------
*/
@media only screen and (max-width: 320px) {}
/*
* -----------------------------------------
* ~ 480 寬小于480的設(shè)備
* -----------------------------------------
*/
@media only screen and (max-width: 480px) {}
/* medium screens (excludes iPad & iPhone) */
/*
* -----------------------------------------
* 481 ~ 767 寬大于480且小于767的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-width: 481px) and (max-width: 767px) {}
/* ipads (portrait and landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {}
/* ipads (landscape) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {}
/* ipads (portrait) */
/*
* -----------------------------------------
* 768 ~ 1024 寬大于480且小于1024的iPad和iPhone
* -----------------------------------------
*/
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {}
/*
* -----------------------------------------
* 1444 ~ 1824 寬大于1444且小于1824的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 1444px) and (max-width: 1824px) {}
/*
* -----------------------------------------
* 1824 ~ 寬大于1824的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 1824px) {}
/*
* -----------------------------------------
* 2224 ~ 寬大于2224的設(shè)備
* -----------------------------------------
*/
@media only screen and (min-width: 2224px) {}
/* iphone 4 and high pixel ratio (1.5+) devices */
/*
* -----------------------------------------
* iphone4 ~
* -----------------------------------------
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {}
/* iphone 4 and higher pixel ratio (2+) devices (retina) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {}
- 引用的reset.css文件
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol,
ul {
list-style: none;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
/* remember to define focus styles! */
:focus {
outline: 0;
}
/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}
注意: 在css樣式中為根節(jié)點(diǎn)設(shè)置屬性時(shí)蔫磨，padding表現(xiàn)出margin的效果，而margin表現(xiàn)出padding的修改圃伶。
