開発環境
- macOS Sierra - Apple (OS)
- Emacs (Text Editor)
- Safari(Web browser)
Head First HTML and CSS (Elisabeth Robson(著)、Eric Freeman(著)、O'Reilly Media)の Chapter 11.(Layout and Positioning: Arranging Elements)、EXERCISE(No. 7706) を取り組んでみる。
EXERCISE(No. 7706)
Header1
Paragraph id="amazing"
Paragraph
Paragraph
Paragraph
Paragraph, em detailed directions
Header2
Lemon Breeze
Paragraph
Header3
Paragraph
Header3
Paragraph
Paragraph elixirs.
Header2
Paragraph
- li1
- li2
- li3
- li4
- li5
HTML5
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sample2.css">
</head>
<body>
<div>
<p><img alt="Head First Lounge"></p>
<h1>Header1</h1>
<p id="amazing">
Paragraph id="amazing"
</p>
<p>
Paragraph
</p>
<p id="guarantee">
Paragraph
</p>
<p>
Paragraph
</p>
<p>
Paragraph, <em>em</em>
<a title="Detailed Directions to the Lounge">detailed directions</a>
</p>
<h2>Header2</h2>
<p>
<img src="" alt="Lemon Breeze Elixir">
</p>
<h3>Lemon Breeze</h3>
<p>
Paragraph
</p>
<p>
<img src="" alt="Chai Chiller Elixir">
</p>
<h3>Header3</h3>
<p>
Paragraph
</p>
<p>
<img src="" alt="Black Brain Brew Elixir">
</p>
<h3>Header3</h3>
<p>
Paragraph
</p>
<p>
Paragraph
<a title="Head First Lounge Elixirs">elixirs</a>.
</p>
<h2>Header2</h2>
<p>
Paragraph
</p>
<ul>
<li>li1</li>
<li>li2</li>
<li>li3</li>
<li>li4</li>
<li>li5</li>
</ul>
<p id="footer">
Paragraph
</p>
</div>
</body>
</html>
CSS(Stylesheet)
#amazing {
width: 200px;
float: right;
}
0 コメント:
コメントを投稿