반응형 레이아웃 만들기
페이지 정보
작성자 서방님 댓글 0건 조회 125회 작성일 17-01-03 11:25본문
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Tutorial | Layout - Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#jb-container {width:940px; margin:0px auto; padding:20px; border:1px solid #bcbcbc;}
#jb-header {padding:20px; margin-bottom:20px; border:1px solid #bcbcbc;}
#jb-content {width:580px; padding:20px; margin-bottom:20px; float:left; border:1px solid #bcbcbc;}
#jb-sidebar {width:260px; padding:20px; margin-bottom:20px; float:right; border:1px solid #bcbcbc;}
#jb-footer {clear:both; padding:20px; border:1px solid #bcbcbc;}
@media screen and (max-width:480px) {
#jb-container {width:auto;}
#jb-content {float:none; width:auto;}
#jb-sidebar {float:none; width:auto;}
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>Responsive Layout</h1>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>
<div id="jb-sidebar">
<h2>Sidebar</h2>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
