Last active
January 14, 2019 06:11
-
-
Save crongro/a6d4533ac3c3a1d8e8575d5106533dc6 to your computer and use it in GitHub Desktop.
tabui
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| header,nav,section,div,footer,ul,dd {margin:0;padding:0;} | |
| li{list-style: none;} | |
| dt { | |
| font-weight: bold; | |
| font-size: 1.2em; | |
| margin-bottom: 5px; | |
| } | |
| dl { | |
| float: left; | |
| width : 75%; | |
| } | |
| dd { | |
| font-size: 0.9em; | |
| } | |
| .mainHeader{ | |
| height:200px; | |
| text-align: center; | |
| padding-top: 20px; | |
| line-height: 1.4em | |
| } | |
| .userId { | |
| font-size: 1.2em; | |
| font-weight: bold; | |
| } | |
| .userMessage, .userSNSInfo { | |
| font-size: 0.8em; | |
| color : gray; | |
| } | |
| .userSNSInfo { | |
| overflow: auto; | |
| width: 255px; | |
| margin: 0px auto; | |
| } | |
| .userSNSInfo > li { | |
| float: left; | |
| margin-right: 5px; | |
| width : 80px; | |
| } | |
| .userSNSInfo span.count { | |
| color : #1FB820; | |
| } | |
| .mainView > nav { | |
| height:40px; | |
| margin-top: 10px; | |
| overflow: auto; | |
| border-bottom: 1px solid rgb(228, 228, 228); | |
| border-top: 1px solid rgb(228, 228, 228); | |
| } | |
| .tab { | |
| border-right: 1px solid rgb(228, 228, 228); | |
| float:left; | |
| height:100%; | |
| line-height: 40px; | |
| text-align: center; | |
| width:24.5%; | |
| cursor: pointer; | |
| } | |
| .tab:last-child { | |
| border-right: 0px; | |
| } | |
| .mainView > section { | |
| display:none; | |
| padding:1em; | |
| line-height: 1.5em; | |
| } | |
| .mainView > section.eleDisplayShow { | |
| display:block; | |
| padding:5em; | |
| line-height: 1.5em; | |
| } | |
| .myName { | |
| font-size: 1.2em; | |
| font-weight: bold; | |
| } | |
| .myDesc { | |
| font-size: 0.8em; | |
| } | |
| .eleDisplayShow li { | |
| margin-bottom: 1em; | |
| } | |
| .selectedTab { | |
| background-color: #DF9274; | |
| color: #fff; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <title>tabUI</title> | |
| <link rel="stylesheet" href="tabui.css"> | |
| </head> | |
| <body> | |
| <div id="wrapper"> | |
| <div class="mainView" > | |
| <header class="mainHeader" ><img src="https://avatars1.githubusercontent.com/u/1456761?v=3&s=140" alt="logo" width="80" > | |
| <div class="userId" ><span > </span><span >nigayo</span><span > </span> | |
| </div> | |
| <div class="userMessage" ><span > </span><span >안녕하세요 nigayo입니다.</span><span > </span> | |
| </div> | |
| <ul class="userSNSInfo" > | |
| <li ><span >review : </span><span class="count" >10</span><span > | </span> | |
| </li> | |
| <li ><span >follower : </span><span class="count" ><span >12</span><span > </span></span><span > | </span> | |
| </li> | |
| <li ><span >following : </span><span class="count" ><span >30</span><span > </span></span><span > </span> | |
| </li> | |
| </ul> | |
| </header> | |
| <nav > | |
| <div class="tab selectedTab" data-id="position" ><span > </span><span >내 장소</span><span > </span> | |
| </div> | |
| <div class="tab" data-id="friend" ><span > </span><span >친구</span><span > </span> | |
| </div> | |
| <div class="tab" data-id="theme" ><span > </span><span >나의 테마</span><span > </span> | |
| </div> | |
| <div class="tab" data-id="news" ><span > </span><span >나의 소식</span><span > </span> | |
| </div> | |
| </nav> | |
| <section id="my_position" class="eleDisplayShow" > | |
| <h2>내가 즐겨가는 장소~</h2> | |
| <ul> | |
| <li> 판교 유스페이스</li> | |
| <li>IT인들이 주로 먹는 밥집</li> | |
| </ul> | |
| </section> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment