<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <style> @import url('https://fonts.googleapis.com/css?family=Abel&effect=emboss'); div { box-sizing: border-box;} .image { width: 100%; height: 100%; position: absolute; top:0; left:0; background: url('https://lonelyplanetimages.imgix.net/mastheads/67189269.jpg'); background-size: cover; z-index:-100; } .image:after { content: ''; display: block; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); background-image: url(http://s14.directupload.net/images/111129/44ga9qid.png); /*background: rgba(0, 0, 0, 0.5); background-image: radial-gradient(black 33%, transparent 33%); background-size: 5px 5px; */ } </style> </HEAD> <BODY style="margin:0"> <div style="width:100%; height:100%; position:absolute; overflow:hidden; top:0;left:0; z-index:100"> <div style="top:15%; left:20%; overflow:hidden; position:relative;"> <font style="font-family: 'Abel', sans-serif; font-size:120px; line-height:120px; font-weight:bold; color:white" class="font-effect-emboss">INTERDIGM</font><br> <font style="font-family: 'Abel', sans-serif; font-size:30px; line-height:30px; font-weight:bold; color:white" class="font-effect-emboss">WE MAKE WEB SOLUTION FOR TRAVEL AGENCY AND TRAVEL LAND</font> </div> <div class="image"></div> </BODY> </HTML>
환율2
<!DOCTYPE html> <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $(document).ready(function(){ $.ajax({ url:"https://www.koreaexim.go.kr/site/program/financial/exchangeJSON?authkey=22VMJ1JCcIFy1mvgvUSn1JCWmRkq3k2A&searchdate=20171215&data=AP01", header:'Content-Type:text/plain; charset=utf-8', dataType: "json", success: function (data) { //받아온 JSON을 테이블에 출력 $.each(data, function (index,entry) { $('#tablList').append("<tr><td>" + this.cur_nm + "</td><td>" + this.cur_unit + "</td><td>" + this["kftc_deal_bas_r"] + "</td></tr>"); }); }, error: function () { alert("에러발생"); } }); }); </script> </head> <body> <table id="tablList" border="1"></table> </body> </html>
jquery 달력 특정날자만 선택하고 css 적용
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <HEAD> <TITLE> New Document </TITLE> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> <style> div,ul,li {box-sizing:border-box} body { background: #f7f6f3; font-family: sans-serif; } .vio-highlight { background-color: #746495 !important; color: #fff !important; border-radius:50%; } .vio-highlight:hover { background-color: #503b7c !important; font-weight:bold; } .orange-highlight { background-color: #ff894c !important; color: white !important; border-radius:50%; } .orange-highlight:hover { background-color: #f1590a !important; font-weight:bold; } .blue-highlight { background-color: #1b93b6 !important; color: white !important; border-radius:50%; } .blue-highlight:hover { background-color: #0b7695 !important; font-weight:bold; } /* 카렌다 모양 */ .calendar { margin:0 auto; width: 280px; background: #fff; border-radius: 4px; overflow: hidden; color:#ccc; border:1px solid #ccc; } .ui-datepicker-header { height: 50px; line-height: 50px; color: #000; background: #e9e5e3; margin-bottom: 10px; } .ui-datepicker-prev, .ui-datepicker-next { width: 20px; height: 20px; text-indent: 9999px; border: 2px solid #b0aead; border-radius: 100%; cursor: pointer; overflow: hidden; margin-top: 12px; } .ui-datepicker-prev { float: left; margin-left: 12px; } .ui-datepicker-prev:after { transform: rotate(45deg); margin: -43px 0px 0px 8px; } .ui-datepicker-next { float: right; margin-right: 12px; } .ui-datepicker-next:after { transform: rotate(-135deg); margin: -43px 0px 0px 6px; } .ui-datepicker-prev:after, .ui-datepicker-next:after { content: ''; position: absolute; display: block; width: 4px; height: 4px; border-left: 2px solid #b0aead; border-bottom: 2px solid #b0aead; } .ui-datepicker-prev:hover, .ui-datepicker-next:hover, .ui-datepicker-prev:hover:after, .ui-datepicker-next:hover:after { border-color: #5ed1cc; } .ui-datepicker-title { text-align: center; } .ui-datepicker-calendar { width: 100%; text-align: center; } .ui-datepicker-calendar thead tr th span { display: block; width: 40px; color: #00a8b2; margin-bottom: 5px; font-size: 13px; } .ui-state-default { display: block; text-decoration: none; color: #fff; line-height: 35px; font-size: 12px; } .ui-state-default:hover { background: rgba(0,0,0,0.02); } .ui-state-highlight { color: #8dd391; } .ui-state-active { color: #5ed1cc; } .ui-datepicker-unselectable .ui-state-default { color: #ccc; border: 2px solid transparent; } </style> </HEAD> <BODY> <p style="line-height:50px">1. 특정날짜만 선택가능하게하기</p> <script> $(document).ready(function(){ var availableDates1 = ["13-11-2017","14-11-2017","15-11-2017"]; var availableDates2 = ["3-11-2017","2-11-2017","1-11-2017"]; var availableDates3 = ["30-11-2017","29-11-2017","28-11-2017"]; function available(date, current) { dmy = date.getDate() + "-" + (date.getMonth()+1) + "-" + date.getFullYear(); if ($.inArray(dmy, availableDates1) > -1) { return [true, "vio-highlight","예약가능"]; } else if ($.inArray(dmy, availableDates2) > -1) { return [true, "orange-highlight","대기예약"]; } else if ($.inArray(dmy, availableDates3) > -1) { return [true, "blue-highlight","출발확정"]; } else { return [false,"","unAvailable"]; } } $('#demo').datepicker({ beforeShowDay: available, onSelect: function(dateText, inst) { window.location = 'http://www.amerigotour.com/goods_airtel.calendar.asp?g_cd=' + dateText; } }); $('#123,#datepicker').datepicker({ constrainInput: true, // prevent letters in the input field //minDate: new Date(), // prevent selection of date older than today showOn: 'button', // Show a button next to the text-field autoSize: true, // automatically resize the input field altFormat: 'yy-mm-dd', // Date Format used beforeShowDay: $.datepicker.noWeekends, // Disable selection of weekends firstDay: 1 // Start with Monday }) }); </script> <div id="demo" class="calendar"></div> <p style="height:50px"> 2. Datepicker(데이트피커) 바로보여주기 <div id="123" style="width:220px; overflow:hidden; background:#666"></div> <p style="height:50px"> 3. Datepicker(데이트피커) 사용하기 <input type="text" name="datepicker" id="datepicker" placeholder="클릭해보세요"> </BODY> </HTML>
