網頁編輯VII

這一篇的內容主要是介紹

網頁製作的第七節課-導覽列+成果

(一)網頁空間 https://neocities.org/

    空間不大，但是可以免費註冊(英文介面)

    在不用自行架設伺服器的情況下，非常方便。

(二)html 內容 day 7

＜html＞－－－－－－－－－－－－－－－－－－－

    ＜head＞－－－－－－－－－－－－－－－－－－

    <title>網頁教學For Class 301</title>

    <style>

        .banner

        {

           padding-top:43px;

        }

        .wrap

        {

            max-width: 960px;

            width: 100%;

            margin:auto;

            display: flex;

        }

        .item

        {

            max-width: 300px;

            width: 100%;

            margin: 10px;

            padding: 10px;

            border: 1px solid #aaa;

            position: relative;

        }

        .item img

        {

            width: 100%;

        }

        .item .tab

        {

            background-color: crimson;

            color: #fff;

            padding: 6px 10px;

            position: absolute;

            top: 0px;

            left: 0px;

        }

        .header

        {

            width: 100%; 

            position:fixed;

            background-color: black ;

            color: blanchedalmond;

            opacity: 0.8;

            z-index: 1;

            top:0px;

            left: 0px;

            right: 0px;

        }

        .header nav

        {  

            width: 98%; 

            text-align:right;

            opacity: .8;

            

        }

        .header nav a

        {

            font-size: 16px;

            color: #fff;

            text-decoration:none;

            display: inline-block;

            padding: 0px 10px;

            line-height: 52px;

        }

        .header nav a:hover

        {

            background-color: #ff8800;

        }

        .footer

        {

            width: 100%; 

            background-color: black;

            text-align: center;

            color:#888;

            padding: 20px 0;

        }

     </style>                  

    ＜/head＞－－－－－－－－－－－－－－－－－－

    ＜body＞－－－－－－－－－－－－－－－－－－               

    <div class ="header">

        <nav>

            <a href="http://www.tljh.cyc.edu.tw/" target="_blank">大林國中</a>

            <a href="https://tljh-nature.blogspot.com/" target="_blank">自然領域</a>

            <a href="https://sites.google.com/view/roats1000" target="_blank">正の教學網</a>

        </nav> 

    </div>

    

    <div class ="banner">

        <a href="#"> <img src="https://picsum.photos/1745/300?random=2" width="100%" alt="網站名稱"></a>

    </div>

    <h2>關於網頁設計</h2>

    <P>

        關於這裡.....真的應該要要寫點東西才對~<br/>

        雖然就只是個Demo網站，但是經過合理的排版和美化是不是就很有質感了呢！<br/>

        這７天感謝大家的參與啦～不敢保證大家可以學到多少<br/>

        如果都有學起來的話，基本上學校網頁的設計跟維護～我們可以來約定一下１０年後交棒給你嗎？！！（１０年養成計畫，哈哈）<br/>

        課程中把網頁設計最基礎的概念都提了個大概（實在是一大挑戰，比上理化還難，累死我了....）<br/>

        相信我、也相信你自己，想做就一定可以辦得到！<br/>

        加油吧～網頁設計遠遠不只如此喔～人生也是～～～～By佑正 

    </P>

    ＜/body＞－－－－－－－－－－－－－－－－－－

＜/html＞－－－－－－－－－－－－－－－－－－－

---底下是成果預覽 (body內容很多，僅擷取部分內容)--------------------------------------------------------