開発環境
- OS X Yosemite - Apple (OS)
- Safari, Firefox, Google Chrome(Webプラウザ)
- Emacs (CUI)、BBEdit - Bare Bones Software, Inc.(GUI) (Text Editor)
- JavaScript (プログラミング言語)
Head First jQuery(Ryan Benedetti(著)、Ronan Cranley(著)、O'Reilly Media)のChapter 5(jQuery Effects and Animation: A Little Glide in Your Stride)、EXERCISE(No. 2609)を解いてみる。
その他参考書籍
EXERCISE(No. 2609)
HTML5(BBEdit, Emacs)
<!doctype html>
<html>
<meta charset="utf-8">
<head>
</head>
<body>
<header>
</header>
<section id="frame">
<div id="pic_box">
<div id="head" class="face">
<img src="images/headsstrip.jpg">
</div>
<div id="eyes" class="face">
<img src="images/eyesstrip.jpg">
</div>
<div id="nose" class="face">
<img src="nosesstrip.jpg">
</div>
<div id="mouth" class="face">
<img src="mouthsstrip.jpg">
</div>
</div>
</section>
</body>
</html>
CSS(BBEdit, Emacs)
#frame {
position:absolute;
left:100px;
top:100px;
width:545px;
height:629px;
background-image:url(images/frame.png);
z-index:2;
orverflow:hidden;
}
#pic_box{
position:relative;
left:91px;
top:84px;
width: 367px;
height:460px;
z-index:1;
oeverflow:hidden;
}
.face{
position: relative;
left:0px;
top:0px;
z-index:0;
}
#head{
height:172px;
}
#eyes{
height:79px;
}
#nose {
height:86px;
}
#mouse {
height:117px;
}
0 コメント:
コメントを投稿