開発環境
- OS X Yosemite - Apple (OS)
- Safari, Firefox + Firebug, Google Chrome(Webプラウザ、プラグイン)
- BBEdit - Bare Bones Software, Inc. (GUI) , Emacs (CUI) (Text Editor)
- HTML (マークアップ言語)
- Cascading Style Sheets(CSS) (スタイルシート)
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)
HTML (BBEdit, Emacs)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS, position, absolute</title>
<link rel="stylesheet" href="sample8465.css">
</head>
<body>
<div id="test_header">header</div>
<div id="test_main">
<p>
<img id="test_photo" alt="photo">
main
</p>
</div>
<div id="test_navigation">
navigation
</div>
<p><a href="http://sitekamimura.blogspot.com/2014/12/html-and-css-layout-and-positioning_20.html" title="HTML and CSS - Layout and Positioning: Arranging Elements(div,position, absolute)">Kamimura's blog</a></p>
</body>
</html>
CSS (BBEdit, Emacs)
sample8465.css
#test_main{
margin-top: 140px;
margin-left:20px;
width: 500px;
}
#test_navigation {
position: absolute;
top: 20px;
left:550px;
width: 200px;
}
#test_photo {
float:left;
}
#test_header {
position: absolute;
top: 20px;
left: 20px;
width: 500px;
height: 100px;
}
0 コメント:
コメントを投稿