Wednesday, August 30, 2017

【Jquery】-最簡單的使用並控制slider幻象燈

JQUERY的盛行也帶動了網頁的美化，以下是最簡單的幻象燈方法


DEMO



如何安裝呢?


1.連結必要的javascript及Jquery，CSS。[wpdm_file id=1][wpdm_file id=2]


<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

2.加入HTML代碼。


<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

3.加入JAVASCRIPT。


<script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider();
});
</script>

完成囉，參考網址點我，超級實用的！

另外函式＿

Labels: , ,

posted by kjnb @ August 30, 2017   0 Comments

Sunday, August 20, 2017

最簡單的方式安裝CKEditor

寫過網站的都知道!CKEditor是一種編輯插件，可以在輸入框裡簡單的編輯，不用自己輸入ＨＴＭＬ代碼

如何自己安裝呢？

步驟一請進入官方網站，為了節省空間，我們可以查看下面的內容，直接插入代碼即可。




 

稍微解釋一下
Basic Package  -- 基本
Standard package --標準
Full Package --全功能

步驟二直接將代碼放進去<head>....</head>裡面！


<head>
<title>例如</title>
<script src="http://cdn.ckeditor.com/4.4.3/full/ckeditor.js"></script>
</head>

步驟三找出你的文字欄位找到『name="xxxx"』，此時我們在次將代碼放入下方(xxx你自己設定的名稱)


<textarea name="abc"></textarea>
<script>
CKEDITOR.replace( abc' );  //這裡必須對應到名稱
</script>

範例:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CKEditor</title>
<script src="http://cdn.ckeditor.com/4.4.3/full/ckeditor.js"></script>
</head>
<body>
<textarea name="editor1"></textarea>
<script>
CKEDITOR.replace( 'editor1' );
config.skin = 'office2013';
</script>
</body>
</html>

Labels: , ,

posted by kjnb @ August 20, 2017   0 Comments

Friday, August 11, 2017

CSS3-新增圓角框 





網址：http://border-radius.com/
語法：CSS3

Labels: ,

posted by kjnb @ August 11, 2017   0 Comments

圖片可以在手機版網頁上，顯示適當的大小

雖然在一般電腦上瀏覽網頁，圖片大小看起來很正常，但是，當使用手機等行動裝置瀏覽網頁，就會發現圖片太大導致超出螢幕的寬度，這樣很不美觀，而且對使用者來說也不方便閱讀，透過css就可以輕鬆解決這個問題...


img{
max-width:100%;
 height:auto;
}

 

參考資料:http://seanphpbook.blogspot.tw/2012/04/androidcss.html

Labels: , ,

posted by kjnb @ August 11, 2017   0 Comments

Monday, August 7, 2017

CSS3- transition 讓網頁動畫效果

直接把這串代碼帶進去HOVER裡面，將會有奇蹟發生
transition: background 2s ease;
-moz-transition: background 2s ease;
-webkit-transition: background 2s ease;
-ms-transition: background 2s ease;
-o-webkit-transition: background 2s ease;

示範：http://www.flycan.com/demo/transition1/transition_subject/　（來自非肯設計）

Labels: , ,

posted by kjnb @ August 07, 2017   0 Comments