範本
目標:這是傳統用table標籤配置版面,利用比較新的方法,重新製作。
原始碼(table_layout.html)
<!DOCTYPE html>
<HTML lang="en-US">
<HEAD>
<TITLE> What you will be able to create by now </TITLE>
<META charset="utf-8" />
<META name="keywords" content="white dogs, black dogs, angry dogs" />
<META name="description" content="a website about dogs" />
</HEAD>
<BODY>
<table border="1" style="margin: auto;">
<tr>
<td colspan="2" style="width:800px; height: 100px;">
<h1>My dog website heading</h1>
</td>
</tr>
<tr>
<td style="width:220px; height: 800px;" >
<h3>Menu</h3>
<hr/>
<p>This is the menu bar:<br/></p>
<ul>
<li><a href="page2.html">Angry dog</a><br/></li>
<li><a href="#">LINK 2</a><br/></li>
<li><a href="#">LINK 3</a><br/></li>
<li><a href="#">LINK 4</a><br/></li>
<li><a href="#">LINK 5</a><br/></li>
<li><a href="#">LINK 6</a><br/></li>
<li><a href="#">LINK 7</a><br/></li>
</ul>
<br/><hr/><br/>
<p>If you want more links to <b>dogs</b>, Then please visit our other site at <i>Dogforall.com</i>.<br/><br/>
You will find these types of dogs:</p>
<dl>
<dt><b><i>White dogs</i></b></dt>
<dd>Dogs, white as snow<br/>
<img src="whitedog.jpg"/>
</dd>
<dt><b><i>Black dogs</i></b></dt>
<dd>Dogs, black as the night<br/>
<img src="blackdog.jpg"/>
</dd>
<dt><b><i>Angry dogs</i></b></dt>
<dd>Dog that are just mean!<br/>
<a href="Page2.html"><img src="angrysmall.jpg"/></a>
</dd>
<!-- You can link the images as well -->
</dl>
</td>
<td style="width:580px; height: 800px;">
<h2> A text about dogs </h2><br/>
<p>
THE popularity of the dog as a companion, as a
guardian of property, as an assistant in the pursuit of
game, and as the object of a pleasurable hobby, has
never been so great as it is at the present time. More
dogs are kept in this country than ever there formerly
were, and they are more skilfully bred, more tenderly
treated, and cared for with a more solicitous pride than
was the case a generation ago. There are fewer mongrels
in our midst, and the family dog has become a respect-
able member of society. Two million dog licences were
taken out in the British Isles in the course of 1909. In
that year, too, as many as 906 separate dog shows were
sanctioned by the Kennel Club and held in various parts
of the United Kingdom. At the present time there exist
no fewer than 156 specialist clubs established for the
purpose of watching over the interests of the different
breeds.
<br/><br/>
Recognising this advance in our national love of dogs
and the growing demand for information on their distin-
guishing characteristics, I am persuaded that there is
ample room for a concise and practical handbook on
matters canine. In preparing the present volume, I have
drawn abundantly upon the contents of my larger and
more expensive New Book of The Dog, and I desire to
acknowledge my obligations to the eminent experts who
assisted me in the production of the earlier work and
whose contributions I have further utilised in these pages.
I am indebted to Mr. W. J. Stubbs for his clear exposition
of the points of the Bulldog, to Colonel Claude Cane for<br/><br/>
<img src="Dog.jpg" alt="cute dog"/>
</p>
</td>
</tr>
</table>
</BODY>
</HTML>
理解
的直覺是:
通常 "一個" 包含 "數個" 練習
預期結果
材料
下面是一段文字檔,排成我們要的版面。
💡提示 : 和課程內容不是直接相關
😈 上面的<textarea>在markdown中,仍然會被解譯(因此如果有空白行或行尾2空格,會被加入<p>),如果直接在HTML中文件撰寫textarea,則不會出問題。 因此hint: 書名置中,章節詩,置中,且區別本文。每段落都空2格。
㊙️ <textarea>標籤在MD中,要注意空白行,行尾是否有空白,否則會被自動加HTML標籤。
😒只有blackfriday 會這樣。
操作
- 注意百分比的計算。
- 版面的margin,padding。
結果
原始碼(hw_layout.html)
<html>
<head>
<style>
div.container{
margin-left:90px;
height: 500px;
}
div.top {
height:60px;
line-height:60px;
width:100%;
background-color:#cddc39;
text-align:center;
vertical-align: middle;
justify-content: center;
}
div.content {
display: inline-block;
width: 80%;
vertical-align: top;
}
div.left{
display: inline-block;
width: 10%;
-webkit-writing-mode: vertical-rl;
writing-mode: vertical-rl;
}
div.abstract {
color: blue;
text-align: center;
font-style: italic;
}
</style>
</head>
<body style="height:100%">
<div class="container">
<div class="top">
三國演義
【首頁[🈵]】
</div>
<div class="left">
<h1>第一回：宴桃園豪傑三結義，斬黃巾英雄首立功</h1>
</div>
<div class="content">
<div class="abstract"><p>詞曰：🈵</p>
<p>
滾滾長江東逝水,浪花淘盡英雄。是非成敗轉頭空：青山依舊在,幾度夕陽紅。白髮漁樵江渚上,慣看秋月春風。一壺濁酒喜相逢：古今多少事,都付笑談中。</p>
</div> <!-- abstract -->
<p>話說天下大勢．分久必合，合久必分：周末七國分爭，并入於秦。及秦滅之後，楚、漢分爭，又并入於漢。漢朝自高祖斬白蛇而起義，一統天下。後來光武中興，傳至獻帝，遂分為三國。推其致亂之由，殆始於桓、靈二帝。桓帝禁錮善類，崇信宦官。及桓帝崩，靈帝即位，大將軍竇武、太傅陳蕃，共相輔佐。時有宦官曹節等弄權，竇武、陳蕃謀誅之，作事不密，反為所害。中涓自此愈橫。
</p>
<p>建寧二年四月望日，帝御溫德殿。方陞座，殿角狂風驟起，只見一條大青蛇，從梁上飛將下來，蟠於椅上。帝驚倒，左右急救入宮，百官俱奔避。須臾，蛇不見了。忽然大雷大雨，加以冰雹，落到半夜方止，壞卻房屋無數。建寧四年二月，洛陽地震；又海水泛溢，沿海居民，盡被大浪捲入海中。光和元年，雌雞化雄。六月朔，黑氣十餘丈，飛入溫德殿中。秋七月，有虹見於玉堂；五原山岸，盡皆崩裂。種種不祥，非止一端。
</p>
</div> <!-- content -->
</div> <!-- container -->
</body>
</html>