div table

카테고리 없음 2017. 11. 2. 16:20 |

 

 

 div table

previewcopy to clipboardprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
  2. "http://www.w3.org/TR/html4/loose.dtd">  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=euc-kr">  
  6.   
  7. <title>Untitled Document</title>  
  8. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>  
  9. <script type="text/javascript">  
  10.   $(document).ready(function(){  
  11. $.extend($.fn,{  
  12.         equalizeHeights : function() {  
  13.   
  14.             var heights = this.map(function(idx, elm){  
  15.                 return $(elm).height();  
  16.             }).get();  
  17.   
  18.             return this.height(Math.max.apply(this,heights));  
  19.         }  
  20.     });  
  21.   
  22.     var i = 0,  
  23.         arr = [],  
  24.         lis = $('li'),  
  25.         rowsLen = lis.length / 1;  
  26.   
  27.     for(; i < rowsLen; i++) {  
  28.         var rows = i * 1;  
  29.         arr[i] = lis.eq(rows).next().andSelf();  
  30.         arr[i].equalizeHeights();  
  31.     }  
  32.   });  
  33. </script>  
  34.   
  35. <style>  
  36. div, ul, li {  
  37.     list-style:none;  
  38.     box-sizing: border-box;  
  39.     list-style-position: inside;  
  40.     margin:0;  
  41.     font-size:12px;  
  42.     color:#000;  
  43.     overflow:hidden;  
  44. }  
  45. #rprice {  
  46.     width:700px;  
  47.     border-top:2px solid #333;  
  48.     margin:0 auto;  
  49. }  
  50. #rprice ul {  
  51.     border-bottom:1px solid #666;  
  52.     float:left;  
  53.     width:100%;  
  54.     padding:0px;  
  55.     /*display:flex; */  
  56. }  
  57.   
  58. #rprice .title li {  
  59.     background:#ebebeb !important;  
  60.     color:#000 !important;  
  61.     font-weight:bold;  
  62.     font-size:12px;  
  63. }  
  64. #rprice ul li {  
  65.     float:left;  
  66.     border-right:1px solid #ccc;  
  67.     width: calc(550px/3);  
  68.     padding:5px;  
  69.     text-align:center;  
  70.       
  71. }  
  72. #rprice ul li:nth-child(1) {  
  73.     background:#FFFFCC;  
  74.     width:150px;  
  75.     color:#FF6633;  
  76. }  
  77. #rprice ul li:last-child {  
  78.     border-right:0  
  79. }  
  80. </style>  
  81. </head>  
  82. <body>  
  83.   
  84.   
  85. <div id="rprice">  
  86.   <ul class="title">  
  87.     <li>비고</li>  
  88.     <li>1기간요금을 구해봅시다 다음줄로 넘겨요</li>  
  89.     <li>2기간요금</li>  
  90.     <li>3기간요금</li>  
  91.   </ul>  
  92.   <ul>  
  93.     <li>디럭스</li>  
  94.     <li>1,500,000원 [네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파 </li>  
  95.     <li>2,000,000원</li>  
  96.     <li>3,000,000원</li>  
  97.   </ul>  
  98.   <ul>  
  99.     <li>스위트</li>  
  100.     <li>1,500,000원[네파] 플리스 풀 집업 자켓 7B75406 남 7B85406 여/ 네파</li>  
  101.     <li>2,000,000원</li>  
  102.     <li>3,000,000원</li>  
  103.   </ul>  
  104.   <ul>  
  105.     <li>풀빌라</li>  
  106.     <li>1,500,000원</li>  
  107.     <li>2,000,000원</li>  
  108.     <li>3,000,000원</li>  
  109.   </ul>  
  110. </div>  
  111. </body>  
  112. </html>  

:

유튜브 youtube PC모바일 자동 리사이즈

카테고리 없음 2017. 7. 5. 17:58 |

유튜브 youtube PC모바일 자동 리사이즈

 

$('#you iframe').each(function() {
  var newDiv = $('<div/>').addClass('youtube');
  $(this).before(newDiv);
  var next = $(this).next();
  newDiv.append(this).append(next);
  $(this).css({'width':'100%','height':'100%','position':'absolute','left':'0px'});

});

 

previewcopy to clipboardprint?
  1. <script  src="http://code.jquery.com/jquery-latest.min.js"></script>  
  2.   
  3.   
  4. <style>  
  5. .youtube {  
  6. height: 0px; position: relative; padding-bottom: 56.25%  
  7. }  
  8. </style>  
  9. <script>  
  10.  $(document).ready(function(){  
  11. $('#you iframe').each(function() {  
  12.   var newDiv = $('<div/>').addClass('youtube');  
  13.   $(this).before(newDiv);  
  14.   var next = $(this).next();  
  15.   newDiv.append(this).append(next);  
  16.   $(this).css("width","100%");  
  17.   $(this).css("height","100%");  
  18.   $(this).css("position","absolute");    
  19.   $(this).css("left","0px");    
  20. });  
  21.   
  22. });  
  23. </script>  
  24.   
  25.   
  26. <div id="you"><iframe width="854" height="480" src="https://www.youtube.com/embed/qubuRWuvBcA" frameborder="0" allowfullscreen></iframe></div>  
  27.   
  28. <p><p>  
  29. <table width="400" border="0" cellspacing="0" cellpadding="0">  
  30.   <tr>  
  31.     <td><div style="height: 0px; position: relative; padding-bottom: 56.25%"><iframe width="800" height="480" src="https://www.youtube.com/embed/qubuRWuvBcA" frameborder="0" allowfullscreen style="width:100%; height:100%; position:absolute; left:0"></iframe></div></td>  
  32.   </tr>  
  33. </table>  

:

이미지생성

카테고리 없음 2017. 6. 16. 18:16 |

이미지 생성

 

previewcopy to clipboardprint?
  1.       
  2. <script  src="http://code.jquery.com/jquery-latest.min.js"></script>  
  3. <script  src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.js"></script>   
  4. <script>  
  5. $(document).ready(function () {  
  6. $("img").each(function() {  
  7.     $(this).attr("data-original",$(this).attr("src"));  
  8.     $(this).removeAttr("src");  
  9.     $(this).addClass("lazy");     
  10. });  
  11.     
  12. });  
  13. </script>  
  14.   
  15.   
  16.   
  17.   
  18.         <script>  
  19.         var category = 'city', count = 10;  
  20.         for(var i=1; i<=count; i++) {  
  21.             document.write('<p><img src="http://lorempixel.com/300/200/'+category+'/'+i+'" width="300" height="200"></p>');  
  22.         }  
  23.         </script>   
  24.   
  25.   
  26. <script>  
  27. $(document).ready(function () {  
  28. $(function() {  
  29.     $("img.lazy").lazyload();  
  30. });  
  31. });  
  32. </script>   

:

티스토리툴바