指定されたデザインを形にできるか？
html&cssを学び始めた初級者のための課題です。
作るお題
注意
左上隅はブラウザの画面にベタづきです。（隙間を開けてはいけません)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
<link rel="stylesheet" href="css/main.css"/>
</head>
<body>
<div class="blue">blue</div>
<div class="red">red</div>
<div id="box">
<div class="blue">blue</div>
<div class="red">red</div>
<div class="red">red</div>
<div class="blue">blue</div>
</div>
</body>
</html>body{
text-align: center;
color:white;
}
body>div{
width:200px;
height:200px;
}
.blue{
background: blue;
}
.red{
background: red;
}
body>div:nth-child(-n+2){
line-height: 200px;
}
body>div:nth-child(2){
border-radius: 50%;
}
#box>div{
float:left;
width:50%;
height:50%;
line-height: 100px;
}
/*
use flex-box
#box{
display:flex;
flex-wrap: wrap;
line-height: 100px;
}
#box>div{
flex-basis:50%;
}
*/
コメント