2017년 11월 13일 월요일

CSS 연습용

            댓글 없음    
<!DOCTYPE html>
<html>
<head>
<style>
.redbox {
width: 300px;
height: 150px;
background-color: rgba(255, 0 , 0, 1);
border : 15px solid rgba(0,0,0,0.6);
margin: 10px; padding : 30px;
float: left;
}
.redbox h1 {
font size: 36px;
position: absolute;
margin-top: 50px;
text-align: center;
left: 100px;
top: 50px;
}
.redbox p {
font-size : 25px;
position: absolute;
left: 50px;
top: 100px;
}
.bluebox {
width: 300px;
height: 150px;
background-color: rgba(0, 255 , 255, 0.5);
border : 10px solid rgba(0,128,255,0.3);
margin: 10px; padding : 30px;
float: right;
}
</style>
</head>
<body>
<div class="redbox">
<H1>HTML5/CSS3</H1>
<p>lallalalalalalalalal~~~</p>
</div>
<div class="redbox">
<H1>두번째 박스</H1>
<p>second word</p>
</div>
<div class="bluebox">
<H1>세번째 박스</H1>
<p>second word</p>
</div>
</body>
</html>
Share:

0 개의 댓글:

댓글 쓰기

Scroll To Top