目前分類:CSS (22)

瀏覽方式: 標題列表 簡短摘要

我們常常在網頁設計的時候,會需要使用到Table表格來排版,有時候多少需要加一點顏色來美化

今天要教大家的是僅透過簡單的CSS語法,來讓Table表格達到奇偶底色相間,整個語法不需要用到任何javascript,但是,僅限使用在IE7版本以上,若IE7以下恐怕還是不支援(不過這年頭IE7以下直接可以捨棄掉了),但即使是如此,還是不影響整個程式上的運作,頂多也只是美觀上的問題而已。

首先,很簡單,僅需要加上以下兩行CSS語法,就可以達到Table的奇偶底色相間:

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(3) 人氣()

2014-08-25_112644  

Font Awesome 一行語法,輕鬆在網頁加入ICON圖示

以往在網頁製作的時候,有時候要考慮到美編的內容,所以會在網頁中加入一些小ICON的圖示,一方面最主要用來增加網站的美觀;另外一方面則是用來讓瀏覽者好辨識該按鈕的內容,也就是我們俗稱的UI(User Interface - 使用者介面)

只不過以往的方法,對於網頁設計師人員相當麻煩,因為在網站設計的過程中,他們必須自行去網路蒐集或請美編人員設計這樣的ICON,再者,這些圖示ICON都還只是圖片檔,所以無形之中會造成以下幾點的缺點:

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

Responsive_Design  

RWD(Responsive Web Design)自適應網站的製作方式

首先,你必須先在網站開始的地方加上以下meta語法,用於規定裝置的的結構規則:

     <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
    

其次,需將所有有圖片的地方,加上以下CSS語法,方便圖片按照螢幕寬度的自動縮放:

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

最後在CSS的地方加上以下規則(通常最少我們都分3個尺寸),讓不同寬度大小,給予新的不同CSS規則,就完成了:

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(1) 人氣()

DIV區塊內文字左右對齊的CSS語法

英文的單字長度都不大一樣,所以我們常常會碰到在某一區塊裡面,英文無法左右對齊的窘境;這時候我們可以使用CSS的一個對齊的語法-- text-justifytext-align

但是text-justify它有支援上的限制:

 support1.png

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

CSS3.jpg  

 

 

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

CSS3.jpg  

 


文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

CSS3.jpg

 


文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

csssprites.png  

何謂CSS Sprite?

一般在做網頁時,都會加入許多圖示來讓整體網頁看起來更為活潑,不過你可能不知道,當一個頁面裡圖示越多,使用者就必須花更多時間來讀取這些零散的圖示,但透過CSS Sprites這項技術,可以幫你把所有圖示合併成一張大圖,在以CSS的定位方式來讓某圖示出現。

CSS Sprites Generator是一個幫你把圖片組合起來的網站工具,除了幫你組合起來之外,還會幫你算好位置並且顯示出來,讓你不必自己辛苦計算位置,因為CSS Sprites Generator會幫你搞定。

哪些知名網站使用這項技術呢?

最常見的Yahoo就是個很好的例子,我們常在Yahoo首頁看到網站的小圖示(如下圖)

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

CSS3.jpg      

最近在網路上找到補強IE6.0、IE7.0、IE8.0的支援CSS3補丁

不過使用要注意以下的內容

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

css.jpg

CSS的語法為:
選取器 { 屬性:設定值;}
這篇就要來介紹選取器(Selector)的種類及應用。
選取器(Selector),也有人稱之為選擇器,不過 Dreamweaver 內稱之為選取器,小魚也跟著 Adobe 如此稱呼。
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

css.jpg

我們首先要了解,所有的html元素,要馬是block(塊元素)、要馬是inline(內聯元素)。下面了解一下block、inline各自的特點:

block元素的特點:

總是在新行上開始;
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

2.jpg

如何不使用任何JavaScript或jQuery,僅使用純CSS語法

來達到二階層、三階層的下拉選單按鈕?

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(9) 人氣()

我們該如何使用純CSS語法

不使用任何Table表格,將表單達到美化的效果呢?

首先,我們必須要先設計好表單的格式

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(1) 人氣()

有時候我們在設計網頁的時候

因為特殊需求,不想使用圖片式的漸層背景

這時候 Ultimate CSS Gradient Generator 就能幫上我們大忙

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

對於這個連結邊的小框框,我們可以透過以下的CSS語法來隱藏它:

1.jpg

 

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

1307952738-815d7e68231c1c3a5f4479f8def063bd.png  

http://www.css3maker.com/


文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

透過 css 設定可以讓區塊水平垂直居中在網頁

CSS CODE:

<style type="text/css">
  #div {
      position:absolute;
      height:200px; width:400px;
      margin:-100px 0px 0px -200px;
      top: 50%;left: 50%;
      text-align: left;
      background-color: #efefef;
      border: 1px dotted #999;
      overflow: auto;
  }
< /style>
文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

1.依照區塊大小強制段行,但會截斷英文單字 word-break: break-all;

CODE :
<div style="width: 200px; word-break: break-all;">
文字內容
</div>

 

2.依照區塊大小強制段行,不會截斷英文單字 word-break: normal;

文章標籤

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

在網頁設計中,我們常用到Table畫表格,不過表格邊框粗細即使設定了1px

還是相當的粗,這時,只能靠CSS來讓框線重疊的方式達到細框線了

CSS CODE :

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

仿舊Facebook div+css簡單實現固定底部漂浮導航列
參考以下示意圖 :

1.jpg 

英傑銳數位設計 發表在 痞客邦 留言(0) 人氣()

1 2