開発環境
- 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)、SHARPEN YOUR PENCIL(No. 8465) を取り組んでみる。
SHARPEN YOUR PENCIL(No. 8465)
Header
Main
Paragraph
HTML5
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="sample8.css">
</head>
<body>
<div id="header0">Header</div>
<div id="main0">
Main
<p>
Paragraph
<img alt="Photo" id="photo0">
</p>
</div>
<div id="navigation0">
Navigation
</div>
</body>
</html>
CSS(Stylesheet)
#main0 {
margin-top: 140px;
margin-left: 20px;
width: 500px;
}
#navigation0 {
position: absolute;
top: 20px;
left: 550px;
width: 200px;
}
#photo0 {
float: left;
}
#header0 {
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 100px;
}
0 コメント:
コメントを投稿