天天看點
傳回

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的修改。

Web App開發 移動開發 前端開發 iOS開發 html5 javascript UED 緩存 webapp搭建 webapp建立 webapi搭建 webapp問題 webapp是什麼
上一篇: Android Animation(動畫)---基礎一
下一篇: MySQL 基礎---資料庫維護和性能提高

繼續閱讀