用CSS讓頁面的footer即使內容高度不夠的情況下也可以永遠保持在下方

用CSS在Body上加上下面的屬性

	
    body{
	  display: grid;
	  grid-template-rows: auto 1fr auto; /* 自動大小的header、撐滿內容的主體、自動大小的footer */
	  min-height: 100vh; /* 當內容高度不足時，也可以撐開整個頁面的高度 */
	  margin: 0;
	}
    

搞懂css flex-grow, flex-shrink, flex-basis

要控制flexbox內的子物件的寬度最好的方法就是善用下面這三個屬性：

flex-grow: 0;     /* 不增長 - 初始值：0 */
flex-shrink: 0;   /* 不收縮 - 初始值：1 */
flex-basis: 25em; /* 寬度/高度 - 初始值：自動 */

//上面三個屬性可簡寫為
flex:0 0 25em;

如下範例

.flexbox .child{
flex:0 0 25em;
}

youtube 以iframe嵌入網頁符合自適應RWD

 網頁版面為

<div class="videoWrapper">
<iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="" frameborder="0" height="315" src="https://www.youtube.com/embed/影片ID" title="YouTube video player" width="560"></iframe>
</div>

CSS樣式

.videoWrapper{
	position: relative; 
	padding-bottom: 56.25%; 
	height: 0; 
	overflow: hidden; 
	max-width: 100%; 
}

.videoWrapper iframe{
	position: absolute; 
	top: 0; 
	left: 0; 
	width: 100%; 
	height: 100%;
}

參考：
16:9的比例為 56.25%
4:3的比例為 75%

相關：
RWD:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖

【css】使用display flex時圖片高度會拉高的問題

當某容器(.container)使用display:flex屬性且容器高度為100%時，發現內部的<img>標籤圖檔高度也會自動延伸拉高為100%，只要在.container上加上下面標註的兩個屬性就可修正

.container{ 
width: 970px;
height: 100%;
display: flex;
align-items:flex-start;
align-content:flex-start;
}

css使用flexbox處理垂直居中的版面

使用flexbox處理垂直居中，最快速簡便的模式只要在上層使用display:flex，要置中的子項目加上margin:auto即可

css部分

html,body{
	margin: 0;
	padding: 0;
	width:100%;
	height:100%;
}
.wrapper{
	width:100%;
	height:100%;
	display: flex; // 在上層使用flex
	background: pink;
}

.child{
	width: 300px;
	height: 300px;
	background: blue;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
	display: flex; // 在上層使用flex
}

.child p{
	color: #fff;
	margin: auto; // 要置中的子項目樣式加上margin:auto即可
}

html部分

<div class="wrapper">
	<div class="child">
		<p>上下左右置中的內容</p>
	</div>
</div>

呈現的結果

CSS 上下左右全置中

CSS 上下左右全置中

2021 ==== 更新

使用flex 可以更快處理上下左右全置中

ex:

html,body{

 padding:0;

 margin: 0;

 width: 100%;

 height: 100%;

}

//粉紅色大底

.parents{  

width: 100%;

height: 100%;

background:pink;

display: flex;

}

//要置中的藍色區塊

.child{

margin: auto;

width: 500px;

height: 500px;

background: blue;

}

結果如下

 ==CSS2通用版=============

.box{
width:220px;
height:200px;
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}

==CSS3加強版=============

.box{
width:220px;
height:200px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}

若要製作lighBox效果的填入畫面

參考：http://yuci119.blogspot.tw/2017/11/css-100.html

若要淡黑背景中間的區塊一直保持在畫面中，如下方html

<div id='wrapper'> <-- 淡黑背景
   <div id='content'> <-- 要置中的內容

        <form> .... </form>

   </div>

</div>

若內容高於視窗高度時，在滾動滑鼠捲軸時會產生

置中的內容跟著往上跑或不會出現在畫面中央的問題

這時候可把 content 的position設為fixed即可，

不管滑鼠如何滾動 該區塊都會保持在畫面中央

使用css讓input欄位內的placeholder值在碰觸或是focus到時就清空

現在做表單時通常都會在input或textare欄位上加上placeholder，提示使用者目前要輸入的欄位項目，但是placeholder有個缺點是，通常點了該欄位後，要開始輸入文字才會消失，而不是focus到該欄位時就消失，這在使用上其實有點干擾。

在jquery上可以在點擊到該欄位時以
$("input").removeAttr('placeholder');
來處理，不過也有人不建議用removeAttr來移除，

那麼可以試試用下列css的方法來處理：

input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }

這個方式可以支援大部分瀏覽器甚至到ie9，ie8及更早的版本則未測試過

RWD:以區塊對角線的比例來設定隨螢幕大小自動伸縮的背景圖

例如要在<div class="autoSize"></div>設定隨不同螢幕尺寸自動伸縮的背景圖時
Css寫法如下

假設背景圖實際尺寸為 寬220 x 高125 像素

.autoSize{
width:100%;
height:0;
padding-bottom:56.82%; //圖片比例為以圖片高除以寬 x 100，即 125/220 x 100 =56.82 (四捨五入)
background-image:url( 圖片路徑 );
background-size:cover;
}

例如：
16:9的比例為 56.25%
4:3的比例為 75%


如果div物件寬度不是100%，則換算出的圖片比例須在乘以物件寬度的比例，如下
.autoSize{
width:45%;
height:0;
padding-bottom:25.57%; //圖片比例再乘以div區塊寬度 即：56.26 x 0.45 = 25.57(四捨五入)
background-image:url( 圖片路徑 );
background-size:cover;
}

相關：youtube 以iframe嵌入網頁符合自適應RWD

RWD自適應網頁CSS制定裝置尺寸的切換點及media-queries

上圖為各不同裝置螢幕尺寸RWD設定css時的切換點：
media-queries寫法如下

一.以link方式寫

//for 手機裝置(螢幕尺寸<768px)
<link href="style_mobile.css" rel="stylesheet" type="text/css" media="screen and (max-width:767px)">

//for 平板裝置(768px<螢幕尺寸<1024px)
<link href="style_pad.css" rel="stylesheet" type="text/css" media="screen and (min-width:768px) and (max-width:1024px)">

//for 一般電腦裝置(螢幕尺寸>1025px)
<link href="style_desktop.css" rel="stylesheet" type="text/css" media="screen and (min-width:1025px)">

二.以@media 全部寫在一個css檔案內(載入速度最快，適合流量大的網站)

//共用區 此區會最快載入

body{...}
html{...}

//for 手機裝置(螢幕尺寸<768px)

@media screen and (max-width:767px){

   css for mobile .......

}

//for 平板裝置(768px<螢幕尺寸<1024px)
@media screen and (min-width:768px) and (max-width:1024px){   
   css for pad .......
}

//for 一般電腦裝置(螢幕尺寸>1025px)
@media screen and (min-width:1025px){   
   css for desktop .......
}

//for 手機裝置或平板裝置(裝置直擺的時候)
 @media screen and (orientation:portrait) { 
   …
 }

//for 手機裝置或平板裝置(裝置橫擺的時候)
 @media screen and (orientation:landscape){ 

   …

 }

用css及Jquery製作動態的手機版menu開關

Menu "Hamburger" Icon Animations

css按鈕或物件快速製作動態效果

製作按鈕時，在正常狀態加上下面兩個樣式

transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;

然後設定初始值，接著在滑鼠移入:hover的樣式再
設定滑鼠移入後的改變值即可

範例：

.mouseOver{
   transition: all .2s ease-in-out;
   -webkit-transition: all .2s ease-in-out;
   opacity: .6;
}

.mouseOver:hover{
   opacity:1;
}

上面的範例結果就會呈現動態變化

取得youtube縮圖

youtube縮圖可由下列幾個路徑規則取得不同尺寸的圖

//480*360 影片大圖
http://img.youtube.com/vi/影片的youtube ID/0.jpg 

//120*90 影片開始 
http://img.youtube.com/vi/影片的youtube ID/1.jpg 

//120*90 影片中間
http://img.youtube.com/vi/影片的youtube ID/2.jpg 

//120*90 影片結尾
http://img.youtube.com/vi/影片的youtube ID/3.jpg 

//120*90 影片預設縮圖
http://img.youtube.com/vi/影片的youtube ID/default.jpg 

//320*180 小的自訂縮圖 去黑邊
http://img.youtube.com/vi/影片的youtube ID/mqdefault.jpg 

//480*360 中的自訂縮圖 (等同於0.jpg)
http://img.youtube.com/vi/影片的youtube ID/hqdefault.jpg 

//640*480 影片大圖
http://img.youtube.com/vi/影片的youtube ID/sddefault.jpg 

//1280*720 影片大圖(只有當影片有 720p 或 1080p 的選項才有)
http://img.youtube.com/vi/影片的youtube ID/maxresdefault.jpg

Css 設定整個頁面高度100%，跳出透明黑警告畫面高度無法覆蓋整個頁面

1.在製作跳出透明黑警告畫面時，有時會遇到黑畫面高度無法覆蓋整個頁面的問題
2.有時網頁內容不足頁面高度，但是希望頁面背景色可以覆蓋整個頁面高度時
==== 2021 更新 ====
html跟body一樣都設定成
width:100%
height:100%

然後依照原本的設定，只需在透明黑出現時，將透明黑的區塊position設定為fixed即可
==== 2021 更新 ====

原本的html跟body都是設定成
width:100%
height:100%

要解決這個問題，只要如下方設定即可

html{
width:100%;
height:100%
}

body{
width:100%;
min-height:100%;
position: relative;
}

參考網頁：
css - height: 100% or min-height: 100% for html and body elements?


2018.05.07更新

製作手機版選單 選單底透明黑選單置中：

html部分：

<div id="NAV" style="display: none;">
  <ul>
  <h5 id="XX">X</h5>
    <li> <a href="#">Home</a></li>
 
    <li id="AA"> <a href="#">選項一</a>
      <ul style="display: none;">
        <li><a href="#">次選項 A</a></li>
        <li><a href="#">次選項 B</a></li>
        <li><a href="#">次選項 C</a></li>
      </ul>
    </li>
   
     <li id="BB"> <a href="#">選項二</a>
      <ul style="display: none;">
        <li><a href="#">次選項 A</a></li>
        <li><a href="#">次選項 B</a></li>
        <li><a href="#">次選項 C</a></li>
        <li><a href="#">次選項 D</a></li>
      </ul>
    </li>
 
<li id="CC"> <a href="#">選項三</a>
    <ul style="display: none;">
        <li><a href="#">次選項A</a></li>
        <li><a href="#">次選項B</a></li>
      </ul>
    </li>
    <li> <a href="#">選項四</a></li>
   </ul>
</div>

CSS部分：

//桌機版
#NAV{
width:1000px;
height:60px;
font-size:24px;
}

#NAV #XX{
display:none;
}
#NAV > ul{
width:1000px;
height:60px;
list-style:none;
background-image:url(nav-bg.png);
}

#NAV > ul > li{
float:left;
position:relative;
}

#NAV > ul > li > a{
display:block;
width:200px;
height:60px;
text-align:center;
line-height:60px;
text-decoration:none;
color:#444;
}

#NAV > ul > li > a:hover{
color:#999;
}


/*次選單ul背景色彩與邊框  */
#NAV > ul > li > ul {
width:204px;
        background:#FFF;
display:none;
position:absolute;
top:60px;
}
#NAV > ul > li > ul > li{
width:204px;
    background:#E9E9E9;


}

/* 次選單連結字型 */

#NAV > ul > li > ul > li > a {
display:block;
width:100%;
height:60px;
line-height:60px;
    font-size:20px;
    color:#333333;
    text-decoration:none;
font-weight:bold;
text-align:center;

}
#NAV > ul > li > ul > li > a:hover {
background-color:#ccc;
color:#666;

}

//手機版

#NAV{
position:fixed; /* position 可以讓 div 跳脫原本在 HTML 內的位置 */
top:0;
z-index:888;
width:100%; /* 寬高 100% 整個蓋住 */
height:100%;
background-color:rgba(0,0,0,0.7);
background-image:none;
display:none; /* 把主選單先關掉 */
}

#NAV #XX{
display:block;
width:30px;
height:30px;
background-color:#FFF;
border-radius:50%;
text-align:center;
line-height:30px;
font-family:"微軟正黑體";
position:absolute;
right:-10px;
top:-10px;
z-index:100;
}

#NAV > ul{
width:260px;
height:260px;
position:absolute; /* 把 ul 選單 上下左右都置中 */
top: 0px;
bottom:0;
left:0;
right:0;
margin:auto;
background-image:none;
background-color:#000;
}

#NAV > ul > li{
float:none;
width:100%;
background-color:#000;
position:static;
}
/* 第一層a連結字型 */
#NAV > ul > li > a {
display:block;
width:100%;
    color:#fff;
    text-decoration:none;
    line-height: 60px;
}

/*次選單ul背景色彩與邊框  */
#NAV > ul > li > ul {
width:100%;
    background:#FFF;
position:relative;
display:none;
top:0px;
}
#NAV > ul > li > ul >li{
width:100%;
    background:#E9E9E9;

}
/* 次選單a連結字型 */

#NAV > ul > li > ul > li > a {
display:block;
    font-size:20px;
    color:#333333;
    text-decoration:none;
font-weight:bold;
}
#NAV > ul > li > ul > li >a:hover {
background-color:#ccc;
color:#666;

}

ckeditor 固定編輯視窗的大小，讓使用者無法拉動區塊改變尺寸

修改config.js檔案：
在CKEDITOR.editorConfig = function( config ){  }
內加上

//設定視窗高度及寬度

config.height = '111px'; //可以這樣寫
config.width = 111; //也可以這樣寫

//關閉尺寸縮放，固定尺寸，讓使用者無法拉動區塊改變尺寸

config.resize_enabled = false;

//也可以不關閉尺寸縮放的功能，但是控制縮放的方向(垂直或水平)，以及最大及最小的縮放範圍

config.resize_dir = 'vertical'; //可以設定 (both, vertical,或是 horizontal)

css easing 動畫的加速減速列表.

http://easings.net/en

可以顯示圖片、影片、Flash Swf、Youtube連結、mp4、m4v、flv、ogg、ogv影片檔的多功能jQuery lightbox

原檔出處：http://html5box.com/html5lightbox/

要崁入youtube，就直接把youtube的網址貼在<a>標簽內即可...

Css讓ul在div裡置中

li下float:left;時要讓ul在DIV中置中：

例：要讓ul在id為" HEADER"的div裡面置中

#HEADER{
width: 1000px;
height: 190px;
display: block;
margin: 0 auto;
text-align: center;
}


#HEADER ul{
margin: 0;
padding: 0;
display: inline-block;
}

#HEADER li{
float: left;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding-right: 10px;
list-style-type: none;
color: gray;
}

WOWslider java特效 去除浮水印的方法

For  wow slider 2.7.1 版

1.先用原本的圖片把data1/images/裡面加了浮水印的圖片覆蓋

2.打開engine1資料夾內的 wowslider.js 

3.用尋找功能找到這一段「zIndex:11,right:"5px",bottom:"2px"」

4.在後面加上  ,display:"none"  也就是變成「 zIndex:11,right:"5px",bottom:"­2px",display:"none" 」

5.按儲存，就大功告成了

youtube上的教學影片...不過是for舊版 下方的討論裡面有人提供新版的去除方法

div css 教學網站收錄

divcss5

javascript圖片轉場特效、圖片效果及css圖片動畫特效收集

參考1

參考2

10 CSS And Javascript Animation Plugins, Frameworks and Libraries

jqueryui.com