午後のhtml_1

website

午後のひとときにhtml,cssの腕試しをしてみよう!
細かい指定がない部分はだいたい見た感じが同じならOK。
ただし、最初にヤフーのcssリセットをしてから行うこと。

お題1

注)960pxは画面に対してセンタリングされていること。上部はベタづきでよい

イラストは下からダウンロード

[解答例]
◎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

コメント

タイトルとURLをコピーしました