WebApp–基礎搭建

凌浩雨發表於2017-10-13
WebAPP
  1. 主頁面設定
<!DOCTYPE html>
<html>

    <head>
        <title>Test</title>
        
        <!--設定瀏覽器編碼型別-->
        <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手機上設定手機號碼不被顯示為撥號連結-->
        <meta content="telephone=no, address=no" name="format-detection" />
        <!--ios私有屬性，可以新增到主螢幕-->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!--ios私有屬性，網站開啟對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瀏覽器判斷到頁面上文字居多時，會自動放大字型優化移動使用者體驗。新增以下頭部可以禁用掉該優化-->
        <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標籤和媒體查詢器（主要用於響應式網站開發）-->
        <!--[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庫 -->
        <!--<script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>-->
        <!-- 手機觸控 -->
        <!--<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>
  1. 引用的common.css檔案
/* 禁用iPhone中Safari的字號自動調整 */

html {
    -webkit-text-size-adjust: none;
}


/* 設定HTML5元素為塊 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}


/* 設定圖片視訊等自適應調整 */

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的裝置
 * -----------------------------------------
 */

@media only screen and (min-width: 321px) {}


/*
 * -----------------------------------------
 *  ~ 320  寬小於320的裝置
 * -----------------------------------------
 */

@media only screen and (max-width: 320px) {}


/*
 * -----------------------------------------
 *  ~ 480  寬小於480的裝置
 * -----------------------------------------
 */

@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的裝置
 * -----------------------------------------
 */

@media only screen and (min-width: 1444px) and (max-width: 1824px) {}


/*
 * -----------------------------------------
 * 1824 ~  寬大於1824的裝置
 * -----------------------------------------
 */

@media only screen and (min-width: 1824px) {}


/*
 * -----------------------------------------
 * 2224 ~  寬大於2224的裝置
 * -----------------------------------------
 */

@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) {}
  1. 引用的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樣式中為根節點設定屬性時，padding表現出margin的效果，而margin表現出padding的修改。


相關文章