Last active
July 1, 2016 06:34
-
-
Save crongro/77a3725d35b516c8c880956caed14865 to your computer and use it in GitHub Desktop.
tabUI
This file contains 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:8%; | |
line-height: 1.5em; | |
} | |
.mainView > section.eleDisplayShow { | |
display:block; | |
padding:8%; | |
line-height: 1.5em; | |
} | |
.myName { | |
font-size: 1.2em; | |
font-weight: bold; | |
} | |
.myDesc { | |
font-size: 0.8em; | |
} | |
.eleDisplayShow li { | |
margin-bottom: 8%; | |
} | |
.selectedTab { | |
background-color: #DF9274; | |
color: #fff; | |
} |
This file contains 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> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, user-scalable=no"> | |
<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" 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" id="position" ><span > </span><span >aboutMe</span><span > </span> | |
</div> | |
<div class="tab" id="friend" ><span > </span><span >friend</span><span > </span> | |
</div> | |
<div class="tab" id="theme" ><span > </span><span >lorem</span><span > </span> | |
</div> | |
<div class="tab" id="news" ><span > </span><span >repository</span><span > </span> | |
</div> | |
</nav> | |
<section id="my_position" class="eleDisplayShow" > | |
<ul > | |
<li > | |
<div class="myName" >blah blah !</div> | |
<div class="myDesc" >Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque recusandae hic obcaecati maxime officiis commodi! Cumque maiores maxime quam quidem deleniti, aspernatur iste, minima sit laboriosam laudantium saepe dignissimos provident.</div> | |
</li> | |
</ul> | |
</section> | |
<section id="my_friend"> </section> | |
<section id="my_theme" > </section> | |
<section id="my_news"> </section> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment