You are here: 首頁

飛朵啦學習手札

本網站建議使用Firefox2.0以上,或是使用Goole瀏覽器來瀏覽,並使用1024x768解析度來觀看.

JA slide show

新聞公告

歡迎來到飛朵啦學習手札

十二28

Ubuntu 11.04 升级到 14.04.2 LTS

E-mail 列印 PDF

文章轉自:http://rongjih.blog.163.com/blog/static/33574461201551802140680/

升級成功很有效果

-----------------------

以下为Ubuntu 11.04的升级记录 (2015-06-18)。

由于11.04早就过了维护期,无法使用常规的升级方法!
》更新前:
$ uname -a
Linux bcserver4utest 2.6.38-8-server #42-Ubuntu SMP Mon Apr 11 03:49:04 UTC 2011 x86_64 x86_64 x86_64 GNU/Linux
》升级步骤记录:(参考:EOLUpgrades)2015-06-18
1)更改更新源
$ sudo cp /etc/apt/sources.list /etc/apt/sources.list.20150617.bak
$ sudo vi /etc/apt/sources.list
将内容改为如下:
deb http://old-releases.ubuntu.com/ubuntu/ natty main restricted universe multiverse
deb http://old-releases.ubuntu.com/ubuntu/ natty-updates main restricted universe multiverse
deb http://old-releases.ubuntu.com/ubuntu/ natty-security main restricted universe multiverse
deb http://old-releases.ubuntu.com/ubuntu/ natty-backports main restricted universe multiverse
deb http://old-releases.ubuntu.com/ubuntu/ natty-proposed main restricted universe multiverse
执行一下如下更新:
sudo apt-get update
$ sudo apt-get dist-upgrade
2)Update-manager
$ sudo aptitude install update-manager-core update-manager
3)更新内核
$ sudo aptitude install linux-image-server linux-headers-server
完成后重启一下 $ sudo reboot,内核更新后版本如下:
$ uname -a
Linux bcserver4utest 2.6.38-16-server #67-Ubuntu SMP Thu Sep 6 18:15:24 UTC 2012 x86_64 x86_64 x86_64 GNU/Linux
 
 
17

[轉]完美的CSS絕對底部

E-mail 列印 PDF

本文章轉自:wowbox


CSS的簡單在於它易學,CSS的困難在於尋找更好的解決方案。在CSS的世界裡,似乎沒有完美這種說法。所以,現在介紹的CSS絕對底部,只是目前個人見過的方案中比較完美的吧。


先說我們為什麼會使用到這個CSS底部佈局解決方案:

當做一個頁面時,如果頁面內容很少,不足於填充一屏的窗口區域,按普通的佈局,就會出現下面圖片中的樣子(也就是底部內容並沒有位於窗口的底部,而留下了大量空白。



對於追未完美的設計師來說,這是不美觀的。網上有一些解決方案,但會出現當改變窗口高度時,底部和正文重疊的BUG。儘管沒有多少人會有事沒事兒的去改變窗口高度,但設計嘛,追求的就是盡善盡美。



下面是我找到的一個比較完美的方法,來自國外的設計達人,純CSS,可以實現:當正文內容很少時,底部位於窗口最下面。當改變窗口高度時,不會出現重疊問題。



甚至,創造該CSS的人還專門成立一個網站介紹這個CSS底部佈局方案。不知道他有沒有去申請專利:)

HTML代碼:

程序代碼 程序代碼
<div id="wrap">
    <div id="main" class="clearfix">
        <div id="content">
        </div>
        <div id="side">
        </div>
    </div>
</div>
<div id="footer">
</div>

說明:使用這個佈局的前提,就是footer要在總的div容器之外,footer使用一個層,其它所有內容使用一個總的層。如果確實需要到添加其它同級層,那這個同級層就必須使用position:absolute進行絕對定位。

CSS代碼:
下面是主要的CSS代碼,讓你的底部可以位於窗口的最下面:
程序代碼 程序代碼
html, body, #wrap {height: 100%;}
body > #wrap {height: auto; min-height: 100%;}
#main {padding-bottom: 150px;}  /* 必須使用和footer相同的高度 */
#footer {position: relative;
    margin-top: -150px; /* footer高度的負值 */
    height: 150px;
    clear:both;}

說明:需要注意的就是#main的padding值、footer的高度和負margin值,需要保持一致。

就是這麼簡單,不過還沒完。如果你的主體是使用懸浮佈局,還得解決一些瀏覽器的兼容問題,這裡使用的重點是為了Goolge Chrome。

對#main部份進行著名的Clearfix Hack:
程序代碼 程序代碼
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

注:該方案測試於兩欄懸浮佈局,兼容各大主流瀏覽器,包括Google Chrome。

P.S:
網絡上之前比較知名的footer佈局有Ryan Faits創造的,不過它的方法在HTML代碼中會有一個空的div層。嚴格來說,是不符合語義網代碼標準的。 
另外,還有一篇Exploring Footers article from A List Apart,但使用了一些JavaScript代碼。 
這樣一比較,上面看似簡單的純CSS,就顯得偉大許多了。 
OK!沒有了。如果沒看懂,具體的使用方法和說明可以到原站查看

 
 
27

[轉]HTML5 input 中的 pattern 屬性

E-mail 列印 PDF

文轉自:https://yuugou727.github.io/blog/2018/02/20/html5-pattern/

 

#基本的 form

最簡單的表單驗證不陌生,只要 form 裡的 input 放個required屬性,那麼觸發 submit 時都會自動檢查該欄位有無填寫,沒有時截斷請求:

<form>

<input type="text" required>

<button type="submit">Send</button>

</form>

 

在遠古時代,表單是直接丟給後端,讓 server 說 yes or no 的,偶爾看到 php 裡用preg_match(),到前端繼續在 JS 裡用match()。多虧現在瀏覽器良好生態,直接寫在 html 就能做掉了,只要將 input 包進 form 裡,利用其原生 submit method 自動驗證。

type搭配pattern

input 本身已有很好用的type屬性,可以是 number, email, date, time 等等,端看需求,基本的驗證功能它都做好了,像是type="email"就會檢查 @ 以及 domain,足以勝任大部分的表單應用。

 

若要更進一步規範 input 的內容,就加上 pattern 屬性。只有在 type 為 text, search, tel, url, email, password 時的 input 生效。

而 pattern 屬性需帶入 Regular Expression (正規表示法),這個網站有教學與練習。

 
第 1 頁, 共 46 頁