關閉廣告

記得筆者曾經寫過一篇「用 JavaScript 來做偽浮水印」，那時是用 JavaScript 來寫的，得經過計算才能把版權宣告的圖片放在右下角。現在筆者把整個效果用 jQuery 來改寫，並把原本要計算的版權宣告圖片位置換成 background-position 的方式來控制，這樣想放那就只要設定一下就好了。

我們的 HTML 就是很單純的圖片而已：

檢視原始碼 HTML

1.jpg

(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea Java

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top
SQLite是遵守ACID的關聯式資料庫管理系統，它包含在一個相對小的C庫中。它是D.RichardHipp建立的公有領域項目。
不像常見的客戶端/伺服器結構範例，SQLite引擎不是個程序與之通信的獨立進程，而是連接到程序中成為它的一個主要部分。所以主要的通信協議是在程式語言內的直接API調用。這在消耗總量、延遲時間和整體簡單性上有積極的作用。整個資料庫（定義、表、索引和資料本身）都在宿主主機上存儲在一個單一的文件中。它的簡單的設計是通過在開始一個事務的時候鎖定整個資料文件而完成的。
(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea Java

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top

1.jpg

 

(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea CSS

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top

1.jpg

今天我們要跟大家分享幾個製作滿版背景圖的方法。

現在先來確定一下我們的需求：

圖片必須剛好填滿瀏覽器不能留有縫細，也不能因為圖片太大而出現捲軸。
圖片可以隨著瀏覽器尺寸自動縮放。
圖片必須保持長寬比，不能變形。
要達成上面的需求，我們有以下的方法可以使用


使用CSS3 background-size 屬性

background-size 是css3 的屬性，用來定義背景圖片的尺寸。使用上可以直接指定長寬的數值或是縮放的比例；指定"contain"可以讓背景圖片自動縮放到填滿內容區域內的最大尺寸；指定"cover"可以讓背景圖片自動縮放到覆蓋內容區域的最小尺寸。可以參考w3c background-size的資訊

因為我們現在要做的是完整覆蓋瀏覽器的背景圖片，所以要使用”background-size:cover;”這個設定。使用方法如下：
 

(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網頁優化 SEO NetYea bootstrap使用教學 網站架設

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top

很多人用BootStrap 圖片因寬度縮小看起來很高興

但是縮得太小的時候，高度會達到最小高度因此無法往下縮

會造成圖片變形，如圖

1.png

(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea bootstrap使用教學

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top
在使用CSS的時候，用某些特效能讓網站更有活力，如果運用JQUERY又太過複雜

不過今天作者看到某網站的運用不錯，於是就利用CSS也做了

可以看到下圖，滑鼠未移置圖片範例

1.png



用CSS寫下列代碼
 
  1. .chimga{
  2.     margin:10px;
  3.     width:100%;
  4.     height:100%;
  5.     box-sizing:border-box;
  6.     overflow:hidden;
  7.     display:block;
  8. }
  9. .chimga:hover img{
  10.     -moz-transform:scale(1.3) rotate(2deg);
  11.     -webkit-transform:scale(1.3) rotate(2deg);
  12.     -o-transform:scale(1.3) rotate(2deg);
  13.     -ms-transform:scale(1.3) rotate(2deg);
  14.     transform:scale(1.3) rotate(2deg);
  15. }
複製代碼
(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea CSS

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top

指定背景圖片大小
background-size：bg-size , bg-size
bg-size = auto | length | percentage | cover | contain

  • 預設值為auto，即背景圖片原始長寬。
  • length指定圖片具體大小的數值，不允許負值。
  • percentage以背景圖所在元素的百分比指定背景圖大小，不允許負值。
  • length與percentage可設定2數值，也可只設定1個數值，當只設定一個數值，另一個數值(高)預設值為auto，此時高度以背景圖原始寬高比例，自動縮放。
  • cover主要用於背景圖小於所在的內容，而背景圖又不適合使用repeat，此時就可以採用cover的方式，使背景圖放大至內容的大小，但此方法容易使背景圖因放大而失真。
  • contain與cover正好相反，主要用於背景圖大於所在內容，但卻需要將背景圖完整呈現，此時就可採用contain的方式，使背景圖縮小至內容的大小。

效果呈現為了讓呈現效果有明顯的區別，範例中的屬性預設為：
width:300px;height:200px;border:1px solid #CCC;background:#FFFFFF url(bg.jpg) no-repeat left top;
 

(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea CSS

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top

再用bootstrap時，常常會遇到一些小細節須要修改

常常為了一些小問題找半天

GOOGLE半天也沒看到有人說明此問題

所以就只好自己來了

找到bootstrap.css

加入

  1. @media (max-width: 480px) {
  2.   #navbar {
  3.   margin-top:45px;
  4.   }
  5. }
(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea bootstrap使用教學

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top
範例圖片

1.png



CSS
  1. body{ text-align:center;}
  2. *{ margin:0; padding:0;}
  3. img{ border:none;}
  4. #container{ width:900px; height:900px; background:#000000; border:1px solid #006633; margin:auto; padding:0;}
  5. #loader{ width:480px; margin:auto; height:500px; background:#FFFFFF; float:left; margin-right:5px;}
  6. #imageOptions{ float:left;}
  7. #imageOptions li{ list-style:none; margin:10px;}
  8. .loading{ background:url(images/spinner.gif) center center no-repeat;}
  9. h3{ line-height:500px;}
(繼續閱讀...)

NetYea 網頁設計 發表在 痞客邦 留言(1) 人氣()

▲top

前台看到 相關商品

1.png

(繼續閱讀...)
文章標籤
關鍵字優化 網頁設計 網站架設 網頁優化 SEO NetYea opencart

NetYea 網頁設計 發表在 痞客邦 留言(0) 人氣()

▲top
«12345 67...12