관리 메뉴

moozi

6/14 jquerymobile02.html 본문

TIS_2016/HTML5_2기

6/14 jquerymobile02.html

moozi 2016. 6. 14. 16:22

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Jquery연습</title>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

    <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">

    <script src="js/jquery-1.12.4.min.js"></script>

    <script src="js/jquery.mobile-1.4.5.min.js"></script>

</head>

<body>

    <div data-role="page">

       <div data-role="panel" data-display="overlay" id="panel">

            <a href="#panel" data-role="close">&times;</a>

           <p><a href="#">HTML5</a></p>

           <p><a href="#">CSS3</a></p>

       </div>

        <div data-role="header" data-position="fixed">

           <a href="#" data-icon="home">home</a>

           <a href="#" data-icon="gear">설정</a>

            <h1>TIS정보기술교육센터</h1>

            <div data-role="navbar">

                <ul>

                   <li><a href="#" data-icon="grid" class="ui-btn-active">구직자과정</a></li>

                    <li><a href="#" data-icon="gear">재직자과정</a></li>

                     <li><a href="#" data-icon="home">주말과정</a></li>

                </ul>

            </div>

        </div>

        <div data-role="content">

            <div class="ui-grid-a">

                <div class="ui-block-a">

                   <a href="#panel" class="ui-btn ui-corner-all ui-icon-bars ui-btn-icon-notext">Bars Icon</a>

                    <img src="img/class01.png">

                </div>

                <div class="ui-block-b">

                    <img src="img/class02.png">

                </div>

            </div>

            <div class="ui-grid-b">

                <div class="ui-block-a">

                    <img src="img/class01.png">

                </div>

                <div class="ui-block-b">

                    <img src="img/class02.png">

                </div>

                <div class="ui-block-c">

                    <img src="img/class03.png">

                </div>

            </div>

            <div class="ui-grid-a">

                <div class="ui-block-a">

                    <button>submit</button>

                </div>

                <div class="ui-block-b">

                    <button>reset</button>

                </div>

            </div>

        </div>

        <div data-role="footer" data-position="fixed">

            <h1>TIS정보기술교육센터</h1>

        </div>

    </div>

</body>

</html>

'TIS_2016 > HTML5_2기' 카테고리의 다른 글

jquery연습문제03풀이  (0) 2016.06.14
jquerymobile 연습문제01  (0) 2016.06.14
6/14 jquery mobile  (0) 2016.06.14
6/13 수업예제  (0) 2016.06.13
jquery연습문제03  (0) 2016.06.13
Comments