[CSS] CSS bar, 막대그래프
페이지 정보
작성자 관리자 작성일16-11-28 15:29 조회6,339회 댓글0건본문
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OUIF : Horizontal Bar Graph</title>
<link rel="stylesheet" type="text/css" href="hGraph.css"/>
</head>
<body>
<h1>Horizontal Bar Graph</h1>
<div class="hGraph">
<ul>
<li><span class="gTerm">SUN</span><span class="gBar" style="width:0%"><span>0%</span></span></li>
<li><span class="gTerm">MON</span><span class="gBar" style="width:20%"><span>20%</span></span></li>
<li><span class="gTerm">TUE</span><span class="gBar" style="width:30%"><span>30%</span></span></li>
<li><span class="gTerm">WED</span><span class="gBar" style="width:40%"><span>40%</span></span></li>
<li><span class="gTerm">THU</span><span class="gBar" style="width:50%"><span>50%</span></span></li>
<li><span class="gTerm">FRI</span><span class="gBar" style="width:60%"><span>60%</span></span></li>
<li><span class="gTerm">SAT</span><span class="gBar" style="width:100%"><span>100%</span></span></li>
</ul>
</div>
<br />
<button type="button" onclick="$('link').attr('href', '')">CSS(X)</button>
<button type="button" onclick="$('link').attr('href', 'hGraph.css')">CSS(O)</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
[CSS]
@charset "utf-8";
/* Horizontal Bar Graph */
.hGraph ul{ margin:0 50px 0 50px; padding:1px 0 0 0; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.hGraph li{ position:relative; margin:10px 0; white-space:nowrap; vertical-align:top;}
.hGraph .gTerm{ position:absolute; width:40px; top:0; left:-50px; line-height:20px; text-align:right; color:#767676; font-weight:bold;}
.hGraph .gBar{ position:relative; display:inline-block; height:20px; border:1px solid #ccc; border-left:0; background:#e9e9e9;}
.hGraph .gBar span{ position:absolute; width:40px; line-height:20px; top:0; right:-50px; color:#767676;}
출처 : http://naradesign.net/wp/2010/03/17/1233/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>OUIF : Horizontal Bar Graph</title>
<link rel="stylesheet" type="text/css" href="hGraph.css"/>
</head>
<body>
<h1>Horizontal Bar Graph</h1>
<div class="hGraph">
<ul>
<li><span class="gTerm">SUN</span><span class="gBar" style="width:0%"><span>0%</span></span></li>
<li><span class="gTerm">MON</span><span class="gBar" style="width:20%"><span>20%</span></span></li>
<li><span class="gTerm">TUE</span><span class="gBar" style="width:30%"><span>30%</span></span></li>
<li><span class="gTerm">WED</span><span class="gBar" style="width:40%"><span>40%</span></span></li>
<li><span class="gTerm">THU</span><span class="gBar" style="width:50%"><span>50%</span></span></li>
<li><span class="gTerm">FRI</span><span class="gBar" style="width:60%"><span>60%</span></span></li>
<li><span class="gTerm">SAT</span><span class="gBar" style="width:100%"><span>100%</span></span></li>
</ul>
</div>
<br />
<button type="button" onclick="$('link').attr('href', '')">CSS(X)</button>
<button type="button" onclick="$('link').attr('href', 'hGraph.css')">CSS(O)</button>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</body>
</html>
[CSS]
@charset "utf-8";
/* Horizontal Bar Graph */
.hGraph ul{ margin:0 50px 0 50px; padding:1px 0 0 0; border:1px solid #ddd; border-top:0; border-right:0; font-size:11px; font-family:Tahoma, Geneva, sans-serif; list-style:none;}
.hGraph li{ position:relative; margin:10px 0; white-space:nowrap; vertical-align:top;}
.hGraph .gTerm{ position:absolute; width:40px; top:0; left:-50px; line-height:20px; text-align:right; color:#767676; font-weight:bold;}
.hGraph .gBar{ position:relative; display:inline-block; height:20px; border:1px solid #ccc; border-left:0; background:#e9e9e9;}
.hGraph .gBar span{ position:absolute; width:40px; line-height:20px; top:0; right:-50px; color:#767676;}
출처 : http://naradesign.net/wp/2010/03/17/1233/
댓글목록
등록된 댓글이 없습니다.
