午後のひとときにhtml,cssの腕試しをしてみよう！
細かい指定がない部分はだいたい見た感じが同じならOK。
ただし、最初にヤフーのcssリセットをしてから行うこと。
お題1
注)960ｐｘは画面に対してセンタリングされていること。上部はベタづきでよい
イラストは下からダウンロード
[解答例]
◎index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title</title> <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> <link rel="stylesheet" href="main.css"> </head> <body> <div> <img src="images/baby.jpg"> <img src="images/man1.jpg"> <img src="images/man2.jpg"> <img src="images/man3.jpg"> </ul> </body> </html>
◎main.css
div{
width:960px;
height:500px;
margin:0 auto;
background:#eee;
display:flex;
justify-content:space-around;
align-items:center;
}
img{
width:200px;
height:200px;
border-radius:50%;
}
お題2
注)Point!の小さい文字は16px
コメント