Day12 翻玩 About.php -Show me the code

第 11 屆 iThome 鐵人賽

DAY 12

自我挑戰組

30天翻玩動態網站-會員需驗證才能看到部落格文章系列第 12 篇

11th鐵人賽

sean666

2019-09-28 01:45:45

2098 瀏覽

分享至

感謝各位邦友們的觀看，第12天，是很特別的日子呢!

7 和 12 是很獨特的數字，在不同文化中，都扮演很重要的角色。12 生肖、12 星座、12 小時、耶穌 12門徒、孔子門生 72人，也是 12 的倍數。中國古代已有七曜、十二地支的說法，西方一星期也有 7 天。為什麼老是 7 和 12 呢？7 和 12 還有個共通點：它們都是 3 和 4 的結合，一個是 3+4，一個是 3X4 ……

如果你是第一次看本系列的邦友，可以先點擊下方 Day01 文章，內含 30 秒的 Demo 短片跟原始碼下載。

內容

玩轉 about.php

先快速瀏覽一下程式碼，扣掉框架，body部分只有不到100行而且跟昨天index有許多相同的地方。

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>The Perfect Cup - About us</title>

    <!-- Bootstrap Core CSS -->
    <link href="css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="css/business-casual.css" rel="stylesheet">

    <!-- Fonts -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700,100italic,300italic,400italic,600italic,700italic" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>

<body>

    <div class="brand">The Perfect Cup</div>

    <!-- Navigation -->
    <?php require_once 'nav.php'; ?>

    <div class="container">

        <div class="row">
            <div class="box">
                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">About
                        <strong>The Perfect Cup</strong>
                    </h2>
                    <hr>
                </div>
                <div class="col-md-6">
                    <style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/ooUAVHJAcyk' frameborder='0' allowfullscreen></iframe></div>
                </div>
                <div class="col-md-6">
                    <p>The Perfect Cup launched in 2000, in the heart of California. Our mission is simple. We want to teach coffee drinkers all over the world how to make the perfect blend!

Our Coffee experts have a lifelong passion for coffee. They are internationally traveled and have experienced many varieties.</p>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

        <div class="row">
            <div class="box">
                <div class="col-lg-12">
                    <hr>
                    <h2 class="intro-text text-center">Our
                        <strong>Team</strong>
                    </h2>
                    <hr>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="img/abt1.jpg" alt="">
                    <h3>James Moore</h3>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="img/abt2.jpg" alt="">
                    <h3>Jane Brown</h3>
                </div>
                <div class="col-sm-4 text-center">
                    <img class="img-responsive" src="img/abt3.jpg" alt="">
                    <h3>Anne Marie</h3>
                </div>
                <div class="clearfix"></div>
            </div>
        </div>

    </div>
    <!-- /.container -->

    <footer>
        <div class="container">
            <div class="row">
                <div class="col-lg-12 text-center">
                    <p>Copyright © The Perfect Cup 2019</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="js/bootstrap.min.js"></script>

</body>

</html>

內容架構說明

Navigation　導覽列

<?php require_once 'nav.php'; ?>

因為三個選單分頁都有導覽列，所以提取出來成一個 php 程式

動手改程式碼

先開啟 iTCafe 網頁與用 Sublime 開啟 about.php

試著將所有The Perfet Cup改成你的咖啡店名:iTCafe
影片連結改成你想放的youtube影片，嵌入影片程式碼

將影片連結放到下面網站，可以幫你生成響應式影片
- http://embedresponsively.com/
取得程式碼後取代 52 行的程式碼

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/ooUAVHJAcyk' frameborder='0' allowfullscreen></iframe></div>