Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

layout04.html 본문

TIS_2016/주말반_4기

layout04.html

moozi 2016. 9. 3. 16:29

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS - 레이아웃연습</title>
    <style>
        *{padding: 0;margin:0}
        body{background-color: #4C320D;}
        #wrap{
            width:800px;
            margin:5px auto;
        }
        #top{
            width:800px;
            height:10px;
            background-image: url(img/top.jpg);
        }
        #header{
            width:800px;
            height:100px;
            background-image: url(img/header.jpg);
        }
        #header h1{
            padding:15px;
        }
        #menu{
            width:800px;
            height:30px;
            background-image: url(img/menu.jpg);
        }
        #content{
            width:800px;
            height: 500px;
            background-image: url(img/content.jpg);
        }
        #bottom{
            width:800px;
            height:20px;
            background-image: url(img/bottom.jpg);
        }
        #menu ul li{
            float: left;
            list-style: none;
            padding:5px;
            padding-left: 15px;
        }
        #left{ width:650px;}
        #left h3{
            clear:both;
            padding-left: 30px;
        }
        #left p{
            padding-left: 30px;
        }
        #footer{
            text-align: center;
            color: white;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="top"></div>
        <div id="header">
            <h1>TIS정보기술 교육센터</h1>
        </div>
        <div id="menu">
            <ul>
                <li>센터소개</li>
                <li>센터연혁</li>
                <li>개설과정</li>
                <li>Contact</li>
            </ul>
        </div>
        <div id="content">
           <div id="left" style="float:left;">
               <h3>교육센터소개</h3>
                <p>
                    <img src="img/title.png" alt="타이틀이미지">
                </p>              
           </div>
           <div id="right">
               <h5>개설과정</h5>
               <ul>
                   <li>웹퍼블리셔</li>
                   <li>프론트엔드 개발자</li>
                   <li>네트워크 관리자</li>
               </ul>
           </div>
          
          
           
        </div>
        <div id="bottom"></div>
        <div id="footer">
            &copy;Copyright All rights reserved by TIS.Edu.
        </div>
    </div>
</body>
</html>

'TIS_2016 > 주말반_4기' 카테고리의 다른 글

반응형 웹페이지 샘플 - photo  (0) 2016.09.10
반응형 웹 샘플  (0) 2016.09.10
9/3 수업파일  (0) 2016.09.03
layout05.html  (0) 2016.09.03
8/27 수업파일  (0) 2016.09.03
'TIS_2016/주말반_4기' Related Articles more
Comments