HTML & CSS & Javascript 語法速查

1. div 置中：
style="margin: 0px auto;"

2. 邊框字：
style="-webkit-text-stroke-width: 2px; -webkit-text-stroke-color: #fff;"

3. 陰影字：
style="text-shadow: 3px 3px 3px silver;"

4. 旋轉字：
style="-webkit-transform: rotate(-3deg);"

5. 陰影框：
style="-webkit-box-shadow: 2px 4px 2px 3px silver;"
x, y, blur, spread

6. 圓角框：
style="border-radius: 25px;"

7. 行首凸排：
style="text-indent: -1.5em; margin-left: 1.5em;" or ★ style="text-indent: -1.5em; padding-left: 1.5em; width: 80%;" 【*只針對整個 div 的第一個br有效*】

8. 內陰影字：
style="text-shadow: 1px 1px white, -1px -1px #444; color: silver;"

9. 外凸體字：
style="text-shadow: -1px -1px white, 1px 1px #333; color: silver;"

10. 圖片置中：
<img style="display: block; margin: auto;" src="xxx">

11. 無效的超連結：
href="javascript: void(0)"

12. 立體線的邊框：
style="border: 2px ridge lightgray;"

13. jQuery 改變 CSS：
href="javascript: $('#a2013072001' ).css({'width': '+=20', 'height': '+=20'});"

14. 中文字距：
style="letter-spacing: 0.1em;"

15. 按一下讓 [div id="001" style="display: none; height: 50px; width: 200px;" ]出現在按一下的位置附近：
<a href="javascript:$('#001').css({top: ($('#002').position().top - 50), left: ($('#002').position().left + 30), position:'absolute', display: 'block'});"><span id="002">這個位置</span></a>

16. 中文字體、行距的安排：
style="font-family: Verdana, '微軟正黑體'; font-size: 1.2em; font-weight: bold; line-height: 1.8em; text-align: justify;  text-justify: distribute;"

17. 英、中字型並置：
style="font-family: Georgia, '微軟正黑體';"

18. jQuery把div A（A： style="position: absolute;"）搬到B附近，top 及 left 各加10px。在div A之後加入 jQuery：
<script>
$(function () {
$('#A').css({'left': ($('#B').position().left + 10) + 'px', 'top': ($('#B').position().top + 10) + 'px'})
});
</script>

19. 滑鼠指向跑出menu資訊：
<a onmouseout="UnTip()"
onmouseover="TagToTip('d2013082701', BALLOON, true, ABOVE, true, DURATION, -2500, FONTFACE, '微軟正黑體', FONTSIZE, '1.1em', FOLLOWMOUSE, false)" href="javascript: void(0)">新聞網</a>
<div id="d2013082301">xx</div>

20 .show() 的效果：
<a href="javascript: $('#box0827003').show({effect: 'slide', duration: 2000, direction: 'left'});">xxx</a>

21. 大內凹字：
text-shadow: 1px 1px white, -1px -1px #444;

22. jQuery UI位置：
<script>
$(function () {
$( "#e002" ).position({
  my: "left+100% top+10",
  at: "left top",
  of: "#e001"
});
});
</script>

23. jQuery & UI, hover:
this is a <a href="#" id="h001">test!</a><br>
<br>
<script>
$(function() {
   $('#h001').hover( function(){
      $(this).css('color', '#F00'); $('#e002').effect({effect: 'bounce', duration: 500});
   },
   function(){
      $(this).css('color', '#000');
   });
});
</script>

24. Div 內文字的垂直位置（加底線）：
display:table-cell; vertical-align: bottom; text-decoration: underline;

25. Div置中、靠右：
style="margin-left:auto;margin-right:auto;（置中）。style="margin-left:auto;margin-right:2px;（靠右）

26. iframe語法：
<iframe src="abc.htm" width="200px" height="200px" scrolling="no" frameborder="0" allowtransparency="true"></iframe>。
if don't work then iframe 的Body裡面加：allowtransparency="true"

27. class 的　hover　：
.back-to-top:hover {
background-color: rgba(135, 135, 135, 0.50); text-decoration: none; color: black;
}

28. 半形空白字元：
&nbsp;

29. CSS 快速套用嵌入法：
<style type="text/css">
.word01 {
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: normal;
line-height: 1.6em;
text-align: justify;
text-justify: distribute;
letter-spacing: 0.1em;
}
</style>

30. 圖像的 CSS 效果：
style="margin: 0px auto; width: 320px; height: 214px; display: block; -webkit-transform: rotate(3deg); border-radius: 25px; border: 2px solid white; padding: 5px; background-color: smokewhite; -webkit-box-shadow: 2px 3px 2px 1px silver;"

31. jQuery：Toggle
<a href="javascript: $('#b002').toggle(400);">xxx</a>

32. 裁切div長寬的溢出： style="overflow: hidden;"

33. jQuery UI 的　toggleClass：
<script>
  $(function() {
    $( "#button01" ).click(function() {
      $( "#effect01" ).toggleClass( "moveClass", 1000 );     
    });
  });
  </script>

3４. jQuery 的　hover & animate：
<script>
$(function() {
   $('#h001').hover( function(){
      $('#h002').css('color', 'red').animate( { 'top': '-=1em'}, {duration: 400});
   },
   function(){
      $('#h002').css('color', 'black').animate( { 'top': '+=1em'}, {duration: 400});
   });
});
</script>
<script>
$(function() {
   $('#h003').hover( function(){
      $(this).animate( { 'padding-left': '+=2em', 'fontSize': '+=1em'}, {duration: 800});
   },
   function(){
      $(this).animate( { 'padding-left': '-=2em', 'fontSize': '-=1em'}, {duration: 800});
   });
});
</script>

35. 背景圖文字
background-image: url(xxx);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

36. 發光文字
text-shadow:0 0 0.3em lightpink, 0 0 0.5em lightpink;

37.　background-image
style="
background-image: url(xxx), url(xxx), url(xxx); (前面的疊在上面)
background-repeat: no-repeat, repeat-x, repeat-y;
background-position: 18px 15px, 50% 25%, right bottom;  (right 60px bottom 30px;)
background-attachment: fixed; (固定在螢幕畫面)
background-clip: border box, padding box, content box; (顯示區域）
background-origin: border box, padding box, content box; (基準點)
background-size:  60px 60px;
"

38. 滑鼠手指標
style="cursor: pointer;"

39. jQuey UI switch class
<script>
$(function() {
$( "#2013120901" ).click(function() {
  $("#20131209").switchClass( "word02", "word01", 2500, "linear" );
  $("#pic03").switchClass( "pic01", "pic02", 2500, "easeInOutBack" );
});
});
</script>

40. jQuey UI mouseover & mouseout
<script>
$(function() {
   $('#vp01').mouseover( function(){
      $('span.vspan01').addClass('vspan02', 500, 'easeInOutBack');
   })
   .mouseout( function(){
      $('span.vspan01').removeClass('vspan02', 500, 'easeInOutBack');
   });
});
</script>

41. CSS: Animate
#c01 {
-webkit-animation: myanima 60s 2s 3;
}

@-webkit-keyframes myanima {
0% {padding-left:1px;}
50% {padding-left: 85px;}
100% {padding-left: 170px;}
}

42. 背影色的顯示區域
background-clip: border-box; padding-box; content-box;

43. jQuery array .length if else
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function() {
var arr = [
"a",
"b",
"c",
"d",
"e"
];
var flag = 1;
$("#i001").click(function() {
if(flag < arr.length){
$(this).attr("src",
arr[flag]);
flag = flag+1;
}
else {
flag= 0;
$(this).attr("src",
arr[flag]);
flag = flag+1;
}
});
});
</script>

44. table css
table-layout: fixed;
border-spacing: 2px 2.2em;
word-break: break-all;

45. javascript onclick jQuery attr
<li onclick="javascript:$('#ifr0809' ).attr('src' , 'http://www.youtube.com/embed/PIKxQ9dPs-4?rel=0');">30
秒學會HTM！<br>

46. javascript onclick hyperlink
<li
onclick="javascript:window.open('http://lmcmultimedia.blogspot.tw/2013/11/css.html', '_blank')">圖
像的置左、置中、置右：CSS 搞定照片</li>

47. 教學布落格寫作參數
style="margin: auto; width: 578px; font-size: 13px; line-height: 1.4;"

48. queue, dequeue, explode, onclick
onclick="javascript:$('#a001').hide('explode', 400).queue( function() {$('#a001').attr('src',
'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhobyQe2ZqAX5iSTlAUQBKzaeRPdONiwINVrzgvgw1sMuACRDslQ5SwhL3zadciEWa7hrFp-WKxWLwEmYeHYzAcEPUtqrWyo7BjGXuWwhHa8oESU_aaGQjxuK240wDPPgLAfu7bqOB_cZw/w1033-h689-no/IMG_0934.JPG').dequeue();}).show('explode', 400);"

49. table list CSS
.taba01 { border-spacing: 2px 0.8em; word-break: break-all; } .taba01 >tbody >tr:nth-child(odd) >td { font-family: Verdana, '微軟正黑體'; font-size: 1.3em; font-weight: bold; line-height: 1.8em; text-align: left; letter-spacing: 0.1em; border-right: 1px solid black; border-bottom: 1px solid black; cursor: pointer; } .taba01 >tbody >tr:nth-child(even) >td { background-color: #FFFFCE; display: none; font-family: Verdana, '新細明體'; font-size: 15px; font-weight: normal; line-height: 1.6em; text-align: left; letter-spacing: 0.1em; }

50. table css interactive
<script>
$(function() {
$('.a01').find('>tbody >tr >td').eq(1).css({'display': 'block'}).end().filter(':even').click(function() {
$(this).parent().next().children().fadeToggle(600);
});

});
</script>

51. column
-webkit-column-count: 3;
-webkit-column-rule: 1px solid lightblue;
-webkit-column-gap: 40px;

52. javascript 內部超連結
onclick="document.location='#a01';"

53. 教學影音
<style>
/* 大標 */
.divbigtitle010330 {
font-family: Verdana, '微軟正黑體';
font-size: 2.8em;
font-weight: bold;
line-height: 1;
text-align: right;
letter-spacing: 0.03em;
margin-bottom: 0.5em;
margin-top: 2.5em;
padding-right: 3em;
border-bottom: 1px solid darkorange;
}
.divimgbac {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiyAipscl-urBK-x8VWL4VnFRWqJgoMU1ZX9Ch7yhNRKl5lVwHinmL8eVnFy2a6gLDFf9NeOdCiVgdWPle49Uxks2zKjfsvrLWJLZmUZowIhn2b0_h0kEgG7LLLi2mzTqtZUq5IymJ-IbY/w546-h530-no/525036_3799795124893_1252079768_n.png);
background-repeat: no-repeat;
background-size: 124px;
background-position: right 5px center;
}
.divhover >div >img {
opacity: 0;
}
.divhover:hover {
cursor: pointer;
}
.divhover:hover >div >img {
opacity: 1;
}
</style><br>
<div onclick="$(this).next().slideToggle(800);"
style="border: 1px solid transparent;" class="divimgbac divhover">
<div class="divbigtitle010330">教學影音<img
style="width: 38px; height: 38px; vertical-align: -5px; margin-left: 0.3em;"
alt="" src="https://goo.gl/ZHa9Ss"></div>
</div>
<div><iframe src="https://www.youtube.com/embed/Hp-puYXCNqA?rel=0"
allowfullscreen="" frameborder="0" height="315" width="560">
</iframe></div>

54. ol/li 在blog的調整
ol style="mrgin-left: -23px;"

55. 語言之途的blog參考
style="margin: auto; width: 425px; font-family: Verdana,'微軟正黑體'; font-size: 1.07em; line-height: 1.8em; letter-spacing: 0.5px;"

56. div之垂直居中
.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

or

.center {
    height: 200px;
    position: relative;
    border: 3px solid green;
}

.center p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

57. text-decoration:

underline
overline
line-through
underline overline
underline overline line-through

58. text-decoration-style:

solid
double
dotted
dashed
wavy

59. image filters

.blur {
    -webkit-filter: blur(4px);
    filter: blur(4px);
}

.brightness {
    -webkit-filter: brightness(0.30);
    filter: brightness(0.30);
}

.contrast {
    -webkit-filter: contrast(180%);
    filter: contrast(180%);
}

.grayscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.huerotate {
    -webkit-filter: hue-rotate(180deg);
    filter: hue-rotate(180deg);
}

.invert {
    -webkit-filter: invert(100%);
    filter: invert(100%);
}

.opacity {
    -webkit-filter: opacity(50%);
    filter: opacity(50%);
}

.saturate {
    -webkit-filter: saturate(7);
    filter: saturate(7);
}

.sepia {
    -webkit-filter: sepia(100%);
    filter: sepia(100%);
}

.shadow {
    -webkit-filter: drop-shadow(8px 8px 10px green);
    filter: drop-shadow(8px 8px 10px green);
}

60. jquery, queue, addClass, removeClass:


onclick="$('#movtran20170619').queue(function() {
$( this ).addClass('divmove20170619').dequeue();}).delay(3000).animate({ 'opacity': '1' }, 1000 ).queue(function() {
$( this ).removeClass('divmove20170619').dequeue();});"

61. 垂直居中

.a01 {
width: 300px;
height: 400px;
border: 1px solid green;
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

62. i do image gallery

<script>
var numpic = 1;

function idoimgslider(picnums, dividnameis) {

if( numpic < picnums) {

$(dividnameis).find('img').css('display', 'none').eq(numpic).toggle('slide', {direction: 'left'}, 600);
numpic = numpic+1;
}

else {

numpic = 0;

$(dividnameis).find('img').css('display', 'none').eq(numpic).toggle('slide', {direction: 'left'}, 600);
numpic = numpic+1;
}

};
</script>


onclick="idoimgslider(5, '#a01');"

63. filter 多選擇項目


$('div').filter(':eq(0), :eq(1), :eq(5)')

64. jquery 寫自己程式


<script>

(function( $ ){

$.fn.myPlugin = function() {

// 你的Plugin內容寫在這裡面。
$(this).find('>img').eq(2).hide('slide', {direction: 'left'}, 600);

}

})(jQuery);

</script>

onclick = ' $(this).myPlugin(); '

65. 互動的olli跳躍連結


/* ol的設定 */
.olliconsli20170718 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: bold;
line-height: 1.8;
padding: 0px;
}

/* li的設定 */
.olliconsli20170718 >li {
display: inline-block;
margin-right: 0.5em;
padding: 0px 0.5em;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
transition: 0.4s;
}

/* ol互動的設定 */
.olliconsli20170718 >li:hover {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
cursor: pointer;
}

/* 按下li之後的互動變化 */
.chandiv {
background-color: rgba(152, 152, 152, 0.3);
border-radius: 25px;
border: 1px solid red;
transform: rotate(-3deg);
}



<script>
$(function() {
$( '#olli20170721' ).find('li').click(function() {

$(this).siblings().removeClass('chandiv').end().addClass('chandiv');
});
});
</script>

65. scroll to 位置

$('html, body').animate({
scrollTop: $('#target-element').offset().top
}, 1000);
**note: scrollbackto 610

66. 參數合併寫法

參數合併式寫法：

背景圖

background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center / cover;

依次是：

background-color

background-image

background-repeat

background-attachment

background-position / background-size

-------
字元

font: italic small-caps lighter 14px/1.4 Georgia, serif;

font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family];

67. float 撐滿

.test100801::after {
content: "";
clear: both;
display: table;
}

68. scroll to change

<script>
$(function () {
$(window).scroll(function () {
var scrollVal = $(this).scrollTop();
var scroltarget = $('#kk01').offset().top;
if(scrollVal > 500){
$('body').css('background-color', 'red');
/* 如果滾動的物件捲動 > 500 則觸發指定的動作。*/
}
if(scrollVal > scroltarget){
$('body').css('background-color', 'yellow');
/* 如果滾動的物件捲動 > 500 則觸發指定的動作。*/
}

});
});

69.使用CSS來摸擬 onclick的動作

<style>

input#test0401:checked +label+br+br+div {
color: red;
}
</style>
<input id="test0401" type="checkbox"><label for="test0401">請按我產生互動：div字變顏色...</label><br>
123
<br>
<div style="border: 1px dotted gray;">456
</div>

70.使用javascript來形成 toggleclass 的動作
<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is a DIV element.
</div>

<script>
function myFunction() {
   document.getElementById("myDIV").classList.toggle("mystyle");
}
</script>

71.填空剩下的空間
  <style>
    .left {
  float: left;
 
}
.right {
  overflow: hidden;
}
    </style>
    <div class="left"> 123 </div>
    <div class="left"> 456 </div>
    <div class="right"> 789 </div>

jQuery source:


http://lmcdwriting.org/userfiles/ lmcsilver20121007/jqueryui/jquery.youtubepopup.min.js


 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.2.4.js"></script>




<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


BlueGriffon 預設的CSS語法：

 <style>
div {
border: 1px dotted red;
}
p {
border: 1px dotted blue;
}
span {
border: 1px dotted green;
}
/*寫作完成後請刪除此部分*/
</style>

 <style>
body {
width: 800px;
margin: auto;
border: 1px dotted darkred;
}
img {
width: 100%;
margin: 0;
padding:0;
border: none;
}
</style>