사용자: 전체 디자인 작업 중5
This commit is contained in:
whitedot
@ -32,25 +32,25 @@ pre {overflow-x:scroll;font-size:1.1em}
|
||||
#hd h1 {width:0;height:0;overflow:hidden}
|
||||
#hd_wrapper {position:relative;margin:0 auto;width:980px}
|
||||
|
||||
#snb {position:absolute;top:20px;right:190px;zoom:1}
|
||||
#snb {position:absolute;top:10px;right:190px;zoom:1}
|
||||
#snb:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
#snb li {float:left}
|
||||
#snb a {display:inline-block;margin-right:1px;padding:7px 7px 6px;color:#000;text-decoration:none}
|
||||
#snb a:focus,
|
||||
#snb a:hover {background:#109ff1;color:#fff}
|
||||
|
||||
#schall {position:absolute;top:20px;right:0;margin:0;padding:0;width:180px;border:0;letter-spacing:-5px}
|
||||
#schall {position:absolute;top:10px;right:0;margin:0;padding:0;width:180px;border:0;letter-spacing:-5px}
|
||||
#schall legend {width:0;height:0;overflow:hidden}
|
||||
#schall_stx {width:150px;height:21px;border:3px solid #484848;border-right:0;background:#fff;line-height:1.5em}
|
||||
|
||||
#logo {clear:both;padding:40px 0 70px}
|
||||
#logo {clear:both;padding:40px 0 50px}
|
||||
|
||||
/* 중간 레이아웃 */
|
||||
#wrapper {margin:0 auto;padding-bottom:30px;width:980px;zoom:1}
|
||||
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
#wrapper_title {margin-bottom:20px;font-size:1.2em}
|
||||
#lnb {float:right;width:220px;background:#f7f7f5}
|
||||
#container {float:left;width:730px;zoom:1}
|
||||
#lnb {float:right;width:219px;border-right:1px solid #eee;border-bottom:1px solid #eee;background:#f7f7f5}
|
||||
#container {float:left;padding-top:20px;width:730px;zoom:1}
|
||||
#container:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
|
||||
/* 하단 레이아웃 */
|
||||
@ -99,7 +99,7 @@ pre {overflow-x:scroll;font-size:1.1em}
|
||||
.btn_confirm {text-align:center} /* 서식단계 진행 */
|
||||
.btn_submit {padding:0 10px;height:24px;border:0;background:#109ff1;color:#fff;letter-spacing:-0.1em;vertical-align:top}
|
||||
.btn_cancel {display:inline-block;padding:0 10px;height:22px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:2em}
|
||||
.btn_frmline {display:inline-block;padding:0 7px 0 5px;height:22px;border:0;background:#109ff1;color:#fff;letter-spacing:-0.1em;vertical-align:top;line-height:2em} /* 우편번호검색버튼 등 */
|
||||
.btn_frmline {display:inline-block;padding:0 7px 0 5px;height:22px;border:0;background:#109ff1;color:#fff;letter-spacing:-0.1em;text-decoration:none;vertical-align:top;line-height:2em} /* 우편번호검색버튼 등 */
|
||||
.btn_win {clear:both;margin-bottom:20px;text-align:center} /* 새창용 */
|
||||
.btn_win a {display:inline-block;padding:0 10px;height:22px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:2em;cursor:pointer}
|
||||
|
||||
@ -116,12 +116,12 @@ pre {overflow-x:scroll;font-size:1.1em}
|
||||
td.empty_table {padding:85px 0;text-align:center}
|
||||
|
||||
/* 폼 테이블 */
|
||||
.frm_tbl {margin-bottom:10px;width:100%;border-collapse:collapse;border-spacing:0}
|
||||
.frm_tbl caption {padding-top:10px;font-size:1.2em;font-weight:bold}
|
||||
.frm_tbl th {padding-left:10px;width:100px;border-top:1px solid #eee;border-bottom:1px solid #eee;text-align:left}
|
||||
.frm_tbl {margin-bottom:20px;width:100%;border-collapse:collapse;border-spacing:0}
|
||||
.frm_tbl caption {padding:10px 0;font-weight:bold;text-align:left}
|
||||
.frm_tbl th {padding-left:10px;width:100px;border-top:1px solid #eee;border-bottom:1px solid #eee;font-weight:normal;text-align:left}
|
||||
.frm_tbl td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
|
||||
.frm_tbl textarea,
|
||||
.frm_input {padding:2px 2px 3px;border:1px solid #d7d7d7;background:#fff;vertical-align:middle}
|
||||
.frm_input {padding:2px 2px 3px;border:1px solid #d7d7d7;background:#f7f7f7;vertical-align:middle}
|
||||
.frm_tbl textarea:focus,
|
||||
.frm_input:focus {padding:3px 3px 4px;border:0;background:#494949;color:#fff}
|
||||
.frm_tbl textarea {width:90%;height:150px}
|
||||
@ -129,8 +129,9 @@ td.empty_table {padding:85px 0;text-align:center}
|
||||
.frm_file {display:block;margin-bottom:5px}
|
||||
.frm_tbl #captcha {margin:0;padding:0;border:0;background:transparent}
|
||||
.frm_tbl #captcha input {margin-left:5px;text-align:center}
|
||||
.frm_tbl a {text-decoration:none}
|
||||
|
||||
.frm_info {display:block;padding:5px 0 0;color:#777;line-height:1.3em}
|
||||
.frm_info {display:block;padding:5px 0 0;color:#666;line-height:1.3em}
|
||||
|
||||
/* 테이블 항목별 정의 */
|
||||
.td_chk {width:30px;text-align:center}
|
||||
@ -146,7 +147,7 @@ td.empty_table {padding:85px 0;text-align:center}
|
||||
.td_mng {width:80px;text-align:center}
|
||||
|
||||
/* 새창 기본 스타일 */
|
||||
.new_win {}
|
||||
.new_win {border-top:3px solid #484848}
|
||||
.new_win h1 {margin-bottom:20px;padding:20px 20px 10px;border-bottom:1px solid #eee;background:#fff;font-size:1.2em}
|
||||
.new_win table {margin:0 auto 20px;width:93%}
|
||||
.new_win_ul {margin:-20px 0 20px 0;padding:0 0 0 20px;border-bottom:1px solid #515151;background:#484848;list-style:none;zoom:1}
|
||||
@ -196,7 +197,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
#find_info #captcha input {margin-left:5px}
|
||||
|
||||
/* 아웃로그인 스킨 */
|
||||
.ol {position:relative;margin-bottom:10px;padding:14px}
|
||||
.ol {position:relative;margin-bottom:10px;padding:14px;border-bottom:1px solid #fff}
|
||||
.ol h2 {width:0;height:0;overflow:hidden}
|
||||
.ol ul {margin:0;padding:0;list-style:none}
|
||||
.ol a {color:#000;text-decoration:none}
|
||||
@ -237,7 +238,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
#mb_login {margin:100px auto;width:500px}
|
||||
#mb_login h1 {margin:0 0 20px;font-size:1.3em}
|
||||
#mb_login h2 {margin:0}
|
||||
#mb_login fieldset {position:relative;margin:0;padding:20px 20px 20px 95px;border-bottom:0;background:#fff}
|
||||
#mb_login fieldset {position:relative;margin:0;padding:20px 20px 20px 95px;border:1px solid #eee;border-bottom:0;background:#fff}
|
||||
#mb_login label {letter-spacing:-0.1em}
|
||||
#mb_login .login_id {position:absolute;top:26px;left:95px}
|
||||
#mb_login .login_pw {position:absolute;top:55px;left:95px}
|
||||
@ -266,7 +267,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
/* 회원 패스워드 확인 */
|
||||
#mb_confirm {margin:100px auto;width:500px}
|
||||
#mb_confirm h1 {margin:0 0 20px;font-size:1.3em}
|
||||
#mb_confirm p {padding:20px;border-bottom:0}
|
||||
#mb_confirm p {padding:20px;border:1px solid #eee;border-bottom:0}
|
||||
#mb_confirm p strong {display:block}
|
||||
#mb_confirm fieldset {margin:0 0 30px;padding:30px 0;background:#f7f7f7;text-align:center}
|
||||
#mb_confirm label {letter-spacing:-0.1em}
|
||||
@ -275,7 +276,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
/* 비밀글 패스워드 확인 */
|
||||
#pw_confirm {margin:100px auto;width:500px}
|
||||
#pw_confirm h1 {margin:0 0 20px;font-size:1.3em}
|
||||
#pw_confirm p {padding:20px;border-bottom:0}
|
||||
#pw_confirm p {padding:20px;border:1px solid #eee;border-bottom:0}
|
||||
#pw_confirm p strong {display:block}
|
||||
#pw_confirm fieldset {margin:0 0 30px;padding:30px 0;background:#f7f7f7;text-align:center}
|
||||
#pw_confirm label {letter-spacing:-0.1em}
|
||||
@ -283,15 +284,17 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
|
||||
/* 설문조사 스킨 */
|
||||
#poll {}
|
||||
#poll header {padding:14px 14px 0}
|
||||
#poll header {padding:10px 14px 0}
|
||||
#poll header a {color:#109ff1;text-decoration:none}
|
||||
#poll ul {margin:0 0 10px;padding:5px 14px;list-style:none}
|
||||
#poll li {padding:3px 0}
|
||||
#poll footer {padding:0 14px 14px;text-align:right}
|
||||
/* 설문조사 결과 (새창) */
|
||||
#poll_result section {padding:15px;width:87%}
|
||||
#poll_result section {padding:15px;width:87%;border-right:1px solid #eee;border-bottom:1px solid #eee;background:#fcfcfc}
|
||||
#poll_result h2 {margin:0;padding:20px 0}
|
||||
#poll_result a {color:#000;text-decoration:none}
|
||||
#poll_result .sv_member,
|
||||
#poll_result .sv_guest {font-weight:bold}
|
||||
#poll_result_list {margin:0 auto 20px}
|
||||
#poll_result_list h2 {text-align:center}
|
||||
#poll_result_list dl,
|
||||
@ -310,7 +313,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
#poll_result_cmt h2 {text-align:center}
|
||||
#poll_result_cmt h3 {margin:0 auto 10px;padding-top:15px;width:93%}
|
||||
#poll_result_cmt article {margin:0 18px 15px;border-bottom:1px solid #eee}
|
||||
#poll_result_cmt h1 {display:inline-block;margin:0 10px 0 0;padding:0;border:0;font-size:1em}
|
||||
#poll_result_cmt h1 {margin:0;padding:0;width:0;height:0;overflow:hidden}
|
||||
#poll_result_cmt p {padding:3px 0}
|
||||
#poll_result_cmt fieldset {margin-bottom:0;text-align:left}
|
||||
#poll_result_cmt fieldset p {margin:0 0 15px;padding:3px 0 0px;text-align:left}
|
||||
@ -331,13 +334,13 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
#profile h2 {margin:0}
|
||||
|
||||
/* 최근게시물 스킨 (latest) */
|
||||
.lt {float:left;margin-bottom:20px;padding:20px 15px;width:325px;height:149px;background:#f7f7f7}
|
||||
.lt {float:left;margin-bottom:20px;padding:20px 15px;width:324px;height:149px;border-right:1px solid #eee;border-bottom:1px solid #eee;background:#fcfcfc}
|
||||
.lt ul {margin:0;padding:0;list-style:none}
|
||||
.lt li {padding:3px 0}
|
||||
.lt a {color:#000;text-decoration:none}
|
||||
.lt_title {display:block;margin-bottom:20px}
|
||||
.lt_more {text-align:right}
|
||||
.lt_more a {display:block}
|
||||
.lt_more a {display:block;padding:5px 0}
|
||||
|
||||
/* 최근게시물 스킨 (new) */
|
||||
#new_sch {margin-bottom:10px;text-align:right}
|
||||
@ -418,7 +421,7 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
.cnt_cmt {display:inline-block;margin:0 4px;color:#109ff1}
|
||||
|
||||
/* 게시판 읽기 */
|
||||
#bo_v_title {margin-bottom:10px;padding:0;font-weight:bold;text-align:center}
|
||||
#bo_v_title {margin-bottom:10px;padding:0;font-weight:bold}
|
||||
|
||||
#bo_v {position:relative;margin-bottom:30px}
|
||||
#bo_v a {color:#000;text-decoration:none}
|
||||
@ -428,10 +431,11 @@ fieldset button {padding:0 15px;height:24px;border:0;background:#109ff1;color:#f
|
||||
#bo_v_info h2 {margin:0;padding:0;height:0;overflow:hidden}
|
||||
#bo_v_info strong {display:inline-block;margin:0 15px 0 5px;font-weight:normal}
|
||||
|
||||
#bo_v_top {padding-top:10px;zoom:1}
|
||||
#bo_v_top {zoom:1}
|
||||
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
#bo_v_top h2 {margin:0;padding:0;height:0;overflow:hidden}
|
||||
#bo_v_top ul {list-style:none}
|
||||
#bo_v_top ul {padding-top:5px;list-style:none}
|
||||
#bo_v_top a {margin:0;padding:0;border:0 !important;background:transparent !important;color:#000 !important}
|
||||
#bo_v_bot {padding:0 0 10px;zoom:1}
|
||||
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
|
||||
#bo_v_bot h2 {margin:0;padding:0;height:0;overflow:hidden}
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 210 B After Width: | Height: | Size: 190 B |
@ -37,5 +37,5 @@ if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
|
||||
<? if (count($list) == 0) { //게시물이 없을 때 ?>
|
||||
<p>게시물이 없습니다.</p>
|
||||
<? } ?>
|
||||
<div class="lt_more"><a href="<?=G4_BBS_URL?>/board.php?bo_table=<?=$bo_table?>"><img src="<?=$latest_skin_url?>/img/icon_more.gif" alt="더보기"></a></div>
|
||||
<div class="lt_more"><a href="<?=G4_BBS_URL?>/board.php?bo_table=<?=$bo_table?>"><img src="<?=$latest_skin_url?>/img/icon_more.gif" alt="더보기" width="14" height="12"></a></div>
|
||||
</div>
|
||||
|
||||
@ -5,7 +5,7 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
<div id="poll_result" class="new_win">
|
||||
<h1><?=$g4['title']?></h1>
|
||||
|
||||
<section id="poll_result_list" class="cbg">
|
||||
<section id="poll_result_list">
|
||||
<h2><?=$po_subject?> 결과</h2>
|
||||
|
||||
<dl>
|
||||
@ -30,13 +30,14 @@ if (!defined("_GNUBOARD_")) exit; // 개별 페이지 접근 불가
|
||||
</section>
|
||||
|
||||
<? if ($is_etc) { ?>
|
||||
<section id="poll_result_cmt" class="cbg">
|
||||
<section id="poll_result_cmt">
|
||||
<h2>이 설문에 대한 기타의견</h2>
|
||||
|
||||
<? for ($i=0; $i<count($list2); $i++) { ?>
|
||||
<article>
|
||||
<header>
|
||||
<h1><?=$list2[$i]['name']?>님<span class="sound_only">의 의견</span></h1>
|
||||
<h1><?=$list2[$i]['pc_name']?><span class="sound_only">님의 의견</span></h1>
|
||||
<?=$list2[$i]['name']?>
|
||||
<span class="poll_datetime"><?=$list2[$i]['datetime']?></span>
|
||||
</header>
|
||||
<p>
|
||||
|
||||
130
test.php
130
test.php
@ -1,123 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="ko">
|
||||
<head>
|
||||
<title>Create a Custom Select Box with jQuery - Onextrapixel</title>
|
||||
|
||||
<style>
|
||||
/*So how does this all work?
|
||||
|
||||
Firstly I put the search elements into a containing div. This div includes our grey background colour etc.*/
|
||||
|
||||
.search-container {
|
||||
width: 925px;
|
||||
height: 63px;
|
||||
background-color: #e1e1e1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Next I formatted the select box based on the design provided. This involved setting the width, height etc. Make sure you set the background colour to transparent so that our custom arrow will show later down the track.
|
||||
We also need to include -webkit-appearance : none; to get it to work properly in Chrome. */
|
||||
|
||||
.search-box select {
|
||||
width: 137px;
|
||||
height: 50px;
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
color: #4d4d4d;
|
||||
font-family: 'oswaldregular', Calibri;
|
||||
text-transform: uppercase;
|
||||
font-size: 22px;
|
||||
padding: 10px 0 5px 6px;
|
||||
cursor:pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/* The select boxes need to be positioned in line with each other, so to do this I added some CSS to our search-box class. */
|
||||
|
||||
.search-box {
|
||||
display: inline-block;
|
||||
height: 50px;
|
||||
padding-top: 7px;
|
||||
padding-left: 7px;
|
||||
position:relative;
|
||||
width:128px;
|
||||
}
|
||||
|
||||
/* Because I cannot format the drop down directly using CSS, I want to hide it instead. To do this I put the select box in another containing div and set the width to less than what the width of the actual select bow is set to. I then set the overflow on my containing div to hidden. This will hide the drop down arrow.
|
||||
Note: Each select box will have its own unique container as they are both different sizes. */
|
||||
|
||||
.size-container {
|
||||
overflow: hidden;
|
||||
width: 116px;
|
||||
display: inline-block;
|
||||
}
|
||||
.bedrooms-container {
|
||||
overflow: hidden;
|
||||
width: 86px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* Since we have hidden the drop down arrow we need to replace it with our own arrow. To do this we need an image of our new arrow. Then add the arrow as a background image to our overflow div, setting position as right and also applying the background colour of what we want the select box to look like. */
|
||||
|
||||
.size-container {
|
||||
overflow: hidden;
|
||||
width: 116px;
|
||||
display: inline-block;
|
||||
background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
|
||||
}
|
||||
.bedrooms-container {
|
||||
overflow: hidden;
|
||||
width: 86px;
|
||||
display: inline-block;
|
||||
background: url("../images/new_arrow.png") no-repeat right #c8c8c8;
|
||||
}
|
||||
|
||||
/* Finally we need to apply some formatting to our labels. To do this I applied the following CSS. */
|
||||
|
||||
.search-container span {
|
||||
line-height: 69px;
|
||||
padding-left: 12px;
|
||||
vertical-align: top;
|
||||
font-family: 'oswaldregular',Calibri;
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
font-size: 22px;
|
||||
}
|
||||
</style>
|
||||
<title>title</title>
|
||||
<meta charset="utf-8">
|
||||
<script src="js/jquery-1.8.3.min.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="search-container">
|
||||
<span>Size</span>
|
||||
<div class="search-box">
|
||||
<div class="size-container">
|
||||
<select name="size" id="size">
|
||||
<option value="0">ANY</option>
|
||||
<option value="100">100-200</option>
|
||||
<option value="200">200-300</option>
|
||||
<option value="300">300-400</option>
|
||||
<option value="400">400-500</option>
|
||||
<option value="500">500-600</option>
|
||||
<option value="600">600+</option>
|
||||
</select>
|
||||
</div>
|
||||
</div><span style="padding-left:20px;">Bedrooms</span>
|
||||
<div class="search-box" style="left:6px; width:98px;">
|
||||
<div class="bedrooms-container">
|
||||
<select name="bedrooms" style="width:103px;">
|
||||
<option value="0">ANY</option>
|
||||
<option value="1">ONE</option>
|
||||
<option value="2">TWO</option>
|
||||
<option value="3">THREE</option>
|
||||
<option value="4">FOUR</option>
|
||||
<option value="5">FIVE</option>
|
||||
<option value="6">SIX</option>
|
||||
<option value="7">SEVEN+</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>이 문자열에서 부분을 치환합니다.</p>
|
||||
|
||||
<a href="#" title="치환">치환하기</a>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
$('a').click(function(){
|
||||
$('p').text("치환");
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user