2017年6月16日金曜日

開発環境

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 Photo

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 コメント:

コメントを投稿

Comments on Google+: