브라우저 제목

ui구성2보기

 

html

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <!-- jquery mobile -->
        <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>
        <!-- /jquery mobile 끝 -->
        
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        
        <!-- 사용자 css 및 jquery -->
        <link rel="stylesheet" href="css/index.css">
        <script src="js/index.js"></script>
        <!-- /사용자 css 및 jquery -->

    </head>
    <body>
    <div id="main" data-role="page">  
        <div data-role="header" data-theme="a"> 
            <h2 id="logo">Learning comja</h2>
        </div>
        <div data-role="content" data-theme="a" id="content">
            <form class="form">
            <input type="text" name="search" id="search" placeholder="search" ><i class="fa fa-search"></i>
            </form>
            <ul data-role="listview" data-inset="true">
                <li class="list"><a href="#gallery_img">
                    <img src="img/camera.png" alt="gallery" class="ui-li-thumb">
                    <h3 class="title">갤러리</h3>
                    </a>
                </li>
                <li class="list"><a href="#">
                    <img src="img/mobile.png" alt="gallery" class="ui-li-thumb" style="width:10%; left:10px;">
                    <h3 class="title">사이트소개</h3>
                    </a>
                </li>
                <li class="list"><a href="#">
                    <img src="img/movie.png" alt="gallery" class="ui-li-thumb" >
                    <h3 class="title">동영상강의</h3>
                    </a>
                </li>
                <li class="list"><a href="#">
                    <img src="img/board.png" alt="gallery" class="ui-li-thumb">
                    <h3 class="title">게시판</h3>
                    </a>
                </li>
            
            </ul>
        </div>
        <div data-role="footer" data-theme="a" id="footer" data-position="fixed">
            <address>경기도 의정부시 의정부도 센트럴빌딩</address>
            
        </div>
    </div>
    
    </body>
    </html>

 

css

#logo{
     height:70px; 
    background:url(../img/logo1.png);
    background-size:20%;
    background-repeat:no-repeat;
    background-position:50% 0;
    margin:0 auto 10px;
    padding-top:50px; box-sizing:border-box;
    
}
.form{position:relative;}
.fa-search{position:absolute; right:10px; top:10px;}
.title{
 color:black;
 padding-top:10px;
}
.ui-li-thumb{width:20%; padding-left:20px; padding-top:10px;}
#footer{ display:table; height:60px;}
address{display:table-cell; vertical-align:middle; text-align:center;}

제목 날짜
탭-collapsible 및 구글맵을 이용한 현재 위치 찾기 file 2018.02.04
패널을 이용한 메뉴와 그리드 file 2018.02.01
갤러리화면을 만들기 위한 fotorama 플러그인 file 2018.01.31
index ui구성2 file 2018.01.30
index의 ui구성 file 2018.01.29
여러 페이지를 이용하여 화면 구성 file 2018.01.28
한 페이지에 여러화면을 구성 file 2018.01.28
jquey mobile 테마정하기 file 2018.01.28
기본 페이지 작성 file 2018.01.28
phonegap을 사용하기 위한 준비 작업 file 2018.01.24
태그 목록