about 2 years ago

九個適應性設計小撇步,把你的網站打造成變形金剛!(上篇)

  1. ul 設定clearfix,然後設定text-align:center;
  2. li 設定成inline-block,然後不要有float:left;

置中排列的小秘技-神奇的 margin: auto 屬性

  1. 使用 display: block 時-固定寬度加上 margin: auto 屬性
  2. 使用 display: inline-block 時-在外層設定 text-align: center
  3. 使用絕對定位時-margin: auto 加上左右定位

寫給不是設計師的——漸層配色(上)

pixelmator
[筆記] 基本RWD版型設計

不重要的圖片放在Background:網友不會點選到的圖片,在CSS中用background-image來呈現,而不要在網頁中用img屬性。

aside和article這兩個區塊是並排的,要做到這個功能,我們可以用float來達到,我們讓aside和article這兩個區塊都是float:left。

最後有一個很重要的動作,是因為aside和article這兩個區塊都浮起來,所以下面的footer會趁虛而入,這時候在footer的區塊,我們要使用clear這個指令(clear:both)把float造成的效果清除掉

關於水平置中
如果是區塊要水平置中,一般使用的是margin: auto這樣的指令
但有些時候雖然是區塊,卻還是沒辦法置中,這時候要注意是不是因為我們沒有給它寬度,當沒有給它寬度的時候,預設就是和螢幕一樣寬,所以也沒辦法再將區塊進行置中的動作
如果是一個區塊內的內容要水平置中,這時候就要用到text-align:center這樣的指令。
在aside img這個css中,為了要讓它顯示出這個區塊,我們使用了display:block,但是這會使得在aside這個區塊中,無法使用text-align:center來置中圖片,因為img已經被當成一個區塊來處理的,這時候如果我們想要將aside img這張圖片置中的話,我們要直接在aside img這個區塊的css中加入margin:auto來達到水平置中的效果。

← 如何找到已經灌好的GEM ROR TUTORIAL (3RD ED.) Ch8: Log in, log out →