관리 메뉴

moozi

jquerymobile02.html 본문

TIS_2017/응용sw_1기

jquerymobile02.html

moozi 2017. 1. 6. 11:13

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>jQuery Mobile</title>

    <!-- jQuery Mobile CDN ---------------------------------->

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

    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

    <!-- viewport 사용 --------------------------------->

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


</head>

<body>

   <div data-role="page" id="page1" data-theme="c">

       <div data-role="header">

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

       </div>

       <div data-role="content">

           <h1>교육센터소개</h1>

           <a href="#" class="ui-btn">Anchor</a>

            <button class="ui-btn">Button</button>

            

            <form>

                <label>

                    <input type="checkbox" name="checkbox-0 ">Check me

                </label>

            </form>

            

            <div data-role="collapsible">

                <h4>Heading</h4>

                <p>I'm the collapsible content. By default I'm closed, but you can click the header to open me.</p>

            </div>

            

            <div data-role="collapsible" data-theme="b" data-content-theme="b">

                <h4>Heading</h4>

                <p>I'm the collapsible content with a themed content block set to "b".</p>

            </div>

            

            <!-- 화면 2칸으로 분할 --------------------------->

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

                <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:60px">Block A</div></div>

                <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:60px">Block B</div></div>

            </div><!-- /grid-a -->

            

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

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

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

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

            </div>

       </div>

       <div data-role="footer">

           &copy;TIS.Edu. All rights reserved.

       </div>

   </div>

   

    

</body>

</html>

'TIS_2017 > 응용sw_1기' 카테고리의 다른 글

movie.zip  (0) 2017.01.09
db.txt  (0) 2017.01.06
html연습문제03  (0) 2017.01.05
web.zip 0104  (0) 2017.01.05
html연습문제02  (0) 2017.01.04
Comments