解決文字編輯器下的 table 在 RWD 的問題
解法1 - 把他變成小視窗
[ table前的框(通常我都用div) ] {
display: block;
overflow-x: auto;
}
這樣他就會在適當的時候變成左右滑動,
也不用擔心變形的問題了
2017年8月31日 星期四
[CSS] 文字超出時變成 "..."
文字超出變成 "..."
div {
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
因為是仰賴寬度,
所以請別忘的設定外圍寬度,
不然可是會失敗的!
div {
overflow : hidden;
text-overflow : ellipsis;
white-space : nowrap;
}
因為是仰賴寬度,
所以請別忘的設定外圍寬度,
不然可是會失敗的!
[Laravel][5.4.33] 如何查詢當前框架運行的版本號
如何查詢當前框架運行的版本號?
方法A:
1. 到 "/你的lavarel project/vendor/laravel/framework/src/Illuminate/Foundation" 資料夾內
2. 打開 Application.php 文件
3. 找到 "const VERSION ... ..." 這行,右邊的字串就是當前框架運行的版本號
方法B:
1. 到 "/你的lavarel project" 資料夾前
2. 打開檔案 artisan
3. 找到 "Laravel Framework" 這行,右邊的字就是當前框架運行的版本號
方法C:
1. 利用終端機(console)到 "/你的lavarel project" 資料夾內
2. 輸入指令 "php artisan -V"
3. "Laravel Framework" 這行右邊的文字就是你當前框架運行的版本號
這樣你還找不到我就真的沒辦法了... ...
方法A:
1. 到 "/你的lavarel project/vendor/laravel/framework/src/Illuminate/Foundation" 資料夾內
2. 打開 Application.php 文件
3. 找到 "const VERSION ... ..." 這行,右邊的字串就是當前框架運行的版本號
方法B:
1. 到 "/你的lavarel project" 資料夾前
2. 打開檔案 artisan
3. 找到 "Laravel Framework" 這行,右邊的字就是當前框架運行的版本號
方法C:
1. 利用終端機(console)到 "/你的lavarel project" 資料夾內
2. 輸入指令 "php artisan -V"
3. "Laravel Framework" 這行右邊的文字就是你當前框架運行的版本號
這樣你還找不到我就真的沒辦法了... ...
2017年3月31日 星期五
[jQuery]常見jQuery的三種不同架構
常見jQuery的三種不同架構 $(function(), (function($), $.fn.myFunctionName
第一種
$(function(){
// Document is ready
});
其作用和 $(document).ready()一樣 ,用意在DOM載入後執行ready()方法。
第二種
(function($) {
// Here "$" is a jQuery reference
})(jQuery)
基本上是()(para)匿名方法(anonymous function),傳承jQuery的函式庫,jQuery plugins都是用這樣的架構。
第三種
$.fn.myFunctionName = function(){
// script codes
}
2017年3月18日 星期六
[CSS] Flexible Box 彈性排版
[CSS] Flexible Box 彈性排版
隨著各家瀏覽器支援的功能越來越多,
過去常用的 display + position + float 雖然能解決大部分的排版方式,
但總還是讓人覺得不夠用,
例如要讓物件在 rwd 時能完美填滿,
或者要讓某個物件垂直置中,
又或者當我們要在一連串相同的排版中對特定物件作一些排列時,
時常讓人弄得很抓狂阿!
今天就讓安森煮煮來教各位這個好用的朋友吧!
Flexible Box 對於各家瀏覽器的對應支援版本:
資料來源:http://caniuse.com
Flexbox 可以對任何的物件使用,
但是要注意,
若是父物件被定義為 Flexbox,
那其下子物件的 float、clear 以及 vertical-align 都將會失效,
另外, Flexbox 比較常應用在 一維 的排版上,
通常針對 二維 的排版安森煮煮就會比較推薦使用 網格排版(Grid Layout)。
下面讓我們來認識一下 Flexbox 個名詞的示意圖:
容器(父元素)
容器本身有兩種定義方式:1. flex
2. inline-flex
與常用的 block 意義相同 inline 用來決定後方的元素是否強制換行。
EX:
display: -webkit-flex; /* Safari */display: flex;
display: -webkit-inline-flex; /* Safari */display: inline-flex;
Flexbox 的容器(父元素)主要有以下六種屬性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
接下來讓我們來一一介紹
flex-direction
主要在於決定項目在主軸(main axis)的排列方向。
flex-direction: row | row-reverse | column | column-reverse;其中:
row : 預設值, 水平主軸,排列方向為由左至右
row-reverse : 水平主軸,排列方向為由右至左
column : 垂直主軸,排列方向為由上至下
column-reverse : 垂直主軸,排列方向為由下至上
EX:
-webkit-flex-direction: row; /* Safari */
flex-direction: row;
flex-wrap
主要在於決定當項目排不下的時候,該如何換行。
flex-wrap: nowrap | wrap | wrap-reverse;其中:
nowrap : 預設值,不換行
wrap : 換行,向下排列
wrap-reverse : 換行,向上排列
EX:
-webkit-flex-wrap: nowrap; /* Safari */
flex-wrap: nowrap;
flex-flow
flex-direction 與 flex-wrap 的簡寫。flex-flow: flex-direction | flex-wrap;其中:
預設值為 row nowrap
EX:
-webkit-flex-flow: row nowrap; /* Safari */
flex-flow: row nowrap;
justify-content
主要為控制項目在主軸(main axis)上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;其中(假設為 水平 主軸):
flex-start : 向 主軸起點(main start) 對齊,也就是靠左對齊
flex-end : 向 主軸終點(main end) 對齊,也就是靠又對齊
center : 置中
space-between : 以項目之間的間距都相等的方式對齊
space-around : 以每個項目本身的兩側間距相等的方式對齊
EX:
-webkit-justify-content: flex-start; /* Safari */
justify-content: flex-start;
align-items
決定項目在交叉軸(cross axis)的對齊方式。align-items: flex-start | flex-end | center | baseline | stretch;其中(假設為 垂直 交叉軸):
flex-start : 向 交叉軸起點(cross start) 對齊,也就是靠上對齊
flex-end : 向 交叉軸終點(cross start) 對齊,也就是靠下對齊
center : 項目的中心點向交叉軸中心點對齊
baseline : 以項目內的第一行文字的底線對齊
stretch : 預設值,如果項目沒有定義高度或定義為 auto 時,項目的高度將會填滿整個 Flexbox 的高度
EX:
-webkit-align-items: stretch; /* Safari */
align-items: stretch;
align-content
主要在於決定多個交叉軸(cross axis)時的對齊方式,如果項目只有一行(也就是只有一個交叉軸),
此屬性將會失效。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;其中:
flex-start : 全部向交叉軸起點(cross start) 對齊,也就是靠上排列
flex-end : 全部向交叉軸起點(cross start) 對齊,也就是靠下排列
center : 全部向交叉軸起點(cross start) 對齊,也就是置中排列
space-between : 以每行項目之間的間距都相等的方式向交叉軸對齊
space-around : 以每行項目本身的上下間距相等的方式向交叉軸對齊
stretch : 預設值,放大每行項目的高度到佔滿整個交叉軸
EX:
-webkit-align-content: stretch; /* Safari */
align-content: stretch;
項目(子元素)
Flexbox 的項目(子元素)有六種屬性:- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
各屬性的介紹如下
order
決定項目的排列順序,對於有 全局屬性(Global attributes) 的標籤可能會失效(例如:nav),數字排列由小到大。order: [integer];預設值為 0,無單位
EX:
-webkit-order: 0; /* Safari */
order: 0;
flex-grow
定義項目在排版後還有剩餘空間時該如何放大的比例分配。flex-grow: [number];預設值為 0,無單位,數值不可為負值,數值為 0 時不放大
EX:
-webkit-flex-grow: 0; /* Safari */
flex-grow: 0;
flex-shrink
定義項目在排版當中剩餘空間不足時該如何縮小項目的比例。
flex-shrink: [number];預設值為 1,無單位,數值不可為負值,數值為 0 時不縮小
EX:
-webkit-flex-shrink: 0; /* Safari */
flex-shrink: 0;
flex-basis
定義項目初始化的的主軸空間(main size),也就是項目的寬度。flex-basis: auto | [width];預設值為 auto,瀏覽器計算此屬性來計算主軸(main axis)的剩餘空間
EX:
-webkit-flex-basis: auto; /* Safari */
flex-basis: auto;
flex
flex-grow、flex-shrink 與 flex-basis 的簡寫。
flex: none | auto | [flex-grow] [flex-shrink] ? || [flex-basis];預設值為 0 1 auto,W3C建議在定義項目屬性時優先使用此屬性,因為瀏覽器會根據此屬性計算排版相關值,以及使程式能正確初始化相關數值
EX:
-webkit-flex: auto; /* Safari */
flex: auto;
align-self
定義特定項目可以有與其他項目不一樣的對齊方式,類似 align-items,但 align-items 主要是針對容器,此屬性主要是針對項目,就像繼承的概念,可以覆寫 align-items 的屬性。align-self: auto | flex-start | flex-end | center | baseline | stretch;容器有定義時預設值為 auto,容器沒有定義時預設值為 stretch
EX:
-webkit-align-self: auto; /* Safari */
align-self: auto;
[點我參考範例]
2017年3月15日 星期三
[php] 利用 PHP 取得目前網址
利用 PHP 取得目前網址
透過 $_SERVER 在 PHP 中取得目前網址,下面是幾個常用的功能
$_SERVER['HTTP_HOST']
$_SERVER['REQUEST_URI']
$_SERVER['PHP_SELF']
$_SERVER['QUERY_STRING']
$_SERVER['REQUEST_URI']
$_SERVER['PHP_SELF']
$_SERVER['QUERY_STRING']
假設我們的網址是: http://127.0.0.1/index.php/About/about/id/1?search=123#a
則以上 $_SERVER 分別顯示結果會是...
//顯示 127.0.0.1
echo $_SERVER['HTTP_HOST'];
//顯示 /index.php/About/about/id/1/search/123/
echo $_SERVER['REQUEST_URI'];
//顯示 /index.php/About/about/id/1/search/123/
echo $_SERVER['PHP_SELF'];
//顯示 search=123 (thinkphp會把 "?" 轉成 "/" 所以在 think info 模式時會是 null )
echo $_SERVER['QUERY_STRING'];
echo $_SERVER['HTTP_HOST'];
//顯示 /index.php/About/about/id/1/search/123/
echo $_SERVER['REQUEST_URI'];
//顯示 /index.php/About/about/id/1/search/123/
echo $_SERVER['PHP_SELF'];
//顯示 search=123 (thinkphp會把 "?" 轉成 "/" 所以在 think info 模式時會是 null )
echo $_SERVER['QUERY_STRING'];
因為 "#" 號 是用來對客戶端發送的數據, 所以在 php 中是無法直接取得的,
可以利用前端瀏覽器加上 ajax 來傳遞至伺服器 。
可以利用前端瀏覽器加上 ajax 來傳遞至伺服器 。
這只是個簡單的範例而已,如果網址結構較為複雜,可以調用更多的 $_SERVER 來取得詳細的部分,請參考php.net 的 $_SERVER 介紹。
PHP:$_SERVER - Manual
http://php.net/manual/en/reserved.variables.server.php
PHP:$_SERVER - Manual
http://php.net/manual/en/reserved.variables.server.php
[JavaScript] 用 JavaScript 取得目前網址與其它網址參數
用 JavaScript 取得目前網址與其它網址參數
首先透過 JavaScript 取得目前網頁網址的語法是 window.location.href,以下簡單範例:
假設我們的網址是:http://www.bigwell.com.tw:80/test.html?id=222#333
// 輸出値為 http://www.bigwell.com.tw/test.html?tid=222#333
window.location.href
window.location.href
// 輸出値為 http:
window.location.protocol
window.location.protocol
// 輸出値為 www.bigwell.com.tw
window.location.hostname
window.location.hostname
// 輸出値為 www.bigwell.com.tw
window.location.host
window.location.host
// 輸出値為 80
window.location.port
window.location.port
// 輸出値為 /test.html
window.location.pathname
window.location.pathname
// 輸出値為 ?tid=222
window.location.search
window.location.search
// 輸出値為 #333
window.location.hash
其他詳細可參考: http://www.w3schools.com/js/js_window_location.asp
訂閱:
文章 (Atom)