渡課學習日記(2018/7/20)
阿新 • • 發佈:2019-01-22
一、今日學習內容:
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對於佈局而言的重要,以及編寫列表所需的一些標籤。