1. 程式人生 > >渡課學習日記(2018/7/20)

渡課學習日記(2018/7/20)

一、今日學習內容:

1.學習Markdown
2.筆記日誌撰寫標準
3.表格、列表、表單、佈局標籤

二、程式碼編寫

1.使用所學的表格標籤製作一個表格程式碼如下:

<!DOCTYPE html>
<html>
<head>
    <title>課程表</title>
    <style>
        #p1 b {
            position:relative;
            right:60px;
            top:10px;
            }
        #p1
strong { position:relative; left:60px; bottom:10px; } #p1:before { content: ""; position: absolute; width:1px; height:210px;/*這裡需要自己調整,根據td的寬度和高度*/ top:89px; /*下移*/ left:220px
; /* 向右移*/ background-color: black; display: block; transform: rotate(-80deg);/*這裡需要自己調整,根據線的位置*/ transform-origin: top; }
</style> </head> <body> <h1><center>課程表</center></h1> <table style="text-align:center"
width="928" height="400" border="1" align="center" text-aligm="center">
<thead> <tr> <th colspan="2" id="p1"><b>節次</b><strong>星期</strong></th></th> <th>星期一</th> <th>星期二</th> <th>星期三</th> <th>星期四</th> <th>星期五</th> <th>星期六</th> </tr> </thead> <tr> <td rowspan="5">上午</td> <td>早自習</td> <td>語文</td> <td>英語</td> <td>語文</td> <td>英語</td> <td>語文</td> <td></td> </tr> <tr> <td>第一節</td> <td>物理</td> <td>英語</td> <td>語文</td> <td>英語</td> <td>語文</td> <td>物理</td> </tr> <tr> <td>第二節</td> <td>數學</td> <td>語文</td> <td>數學</td> <td>數學</td> <td>英語</td> <td>數學</td> </tr> <tr> <td>第三節</td> <td>英語</td> <td>生物</td> <td>化學</td> <td>語文</td> <td>數學</td> <td>生物</td> </tr> <tr> <td>第四節</td> <td>化學</td> <td>數學</td> <td>英語</td> <td>物理</td> <td>體育</td> <td>化學</td> </tr> <tr> <td rowspan="3">下午</td> <td>第一節</td> <td>語文</td> <td>化學</td> <td>物理</td> <td>化學</td> <td>計算機</td> <td>語文</td> </tr> <tr> <td>第二節</td> <td>語文</td> <td>物理</td> <td>生物</td> <td>英語</td> <td>生物</td> <td>英語</td> </tr> <tr> <td>第三節</td> <td>德育</td> <td>數學</td> <td>體育</td> <td>生物</td> <td>自習</td> <td></td> </tr> <tr> <td>晚上</td> <td>晚自習</td> <td>數學</td> <td>英語</td> <td>語文</td> <td>化學</td> <td>物理</td> <td></td> </tr> </table> </body> </html>

成品如圖所示:
這裡寫圖片描述
2.兩個站點的佈局結構,並書寫HTML程式碼:

<!DOCTYPE html>
<html>
<head>
    <title>w3schoo1</title>
</head>
<body>
    <!--頭部佈局開始-->
    <div id="header">
        <div id="h-logo">
            <a href="http://www.w3school.com.cn/index.html" title="w3school線上教程">W3shool</a>
        </div>
        <div>
            <form>
                <input type="text">
                <input type="submit" value="GO" title="搜尋">
            </form>
        </div>
            <a href="http://www.w3school.com.cn/index.html" title="html 系列教程">HTML/CSS</a>
            <a href="http://www.w3school.com.cn/index.html" title="瀏覽器指令碼教程">JavaScript</a>
            <a href="http://www.w3school.com.cn/index.html" title="伺服器指令碼教程">Server Side</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>NET 教程">ASP>NET</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>XML 系列教程">XML</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>web services 系列教程">Web Services</a>
            <a href="http://www.w3school.com.cn/index.html" title="ASP>NET 教程">Web Building</a>
        </div>
        <!--頭部內容結束-->
        <!--內容部分佈局開始-->
        <div id="centent">
            <h3>HTML 教程</h3>
            <ul>
                <ol title="HTML 教程">HTML</ol>
                <ol title="HTML 教程">HTML5</ol>
                <ol title="HTML 教程">XHTML</ol>
                <ol title="HTML 教程">CSS</ol>
                <ol title="HTML 教程">CSS3</ol>
                <ol title="HTML 教程">TCP/IP</ol>
            </ul>
            </div>
        <div id="c-center">
            <h2>領先的 Web 技術教程 - 全部免費</h2><hr/>
            <p>在w3school,你可以找到你所需要的所有的網站建設教程。<br/>
                從基礎的 HTML 到 CSS,乃至進階的XML、SQL、JS、PHP 和 ASP.NET。<br/>
                <b >從左側的選單選擇你需要的教程!</b>
            </p>
        </div>
        <div id="c-right">
            <h3>參考手冊</h3>
            <ul>
                <li>HTML/HTML5顏色</li>
                <li>HTML顏色</li>
                <li>CSS 1,2,3</li>
            </ul>
        </div>
    </div>
    <!--內容部分佈局結束-->
    <!--底部佈局開始-->
    <div id="buttom">
        <p style="background-color:#D8D8D8;color:white ">W3School 簡體中文版提供的內容僅用於培訓和測試,不保證內容的正確性。通過使用本站內容隨之而來的風險與本站無關</p>
        <p><a href="/about/about_use.asp" title="關於使用">使用條款</a><a href="/about/about_privacy.asp" title="關於隱私">隱私條款</a>。版權保留,保留一切權利。贊助商:“<a target="_blank" href="http://www.yktz.net/" title="上海贏科投資有限公司">上海贏科投資有限公司</a><a target="_blank" href="http://www.miitbeian.gov.cn/">蒙ICP備06004630號</a></p>
    </div>
    <!--底部佈局結束-->
        </div>
    </div>
</body>
</html>

成品如下:
這裡寫圖片描述

三、預習的內容

1.預習了CSS的樣式的大概內容為第二天做準備

四、學習心得

經過今天的一天學習收穫頗多,深刻認識了div對於佈局而言的重要,以及編寫列表所需的一些標籤。