반응형 레이아웃 만들기
작성일 17-01-03 11:25
페이지 정보
작성자서방님 조회 304회 댓글 0건본문
<!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>
댓글목록
등록된 댓글이 없습니다.