藍色的天空: 2012.09

2012年9月28日星期五

[CSS] 版面置中

要讓版面置中的方法:
將 wrapper 區塊置中

<body>
<div id="wrapper">
</div>
</body>

1. 使用自動邊界置中

#wrapper {
    width: 720px;    /* 可用 % 或其它單位 */
    margin: 0 auto;
}

2. 使用負邊界來做置中

#wrapper {
    width: 720px;
    position: relative;
    left: 50%;           /* 將區塊的左邊對齊中央 */
    margin-left: -360px; /* 再將左邊界設為寬度一半的負值 */
}

2012年9月20日星期四

[CSS] 工具說明 (Tip)

效果: ( 移到按鈕上時會出現下方黃色的文字說明 )

將要顯示的文字說明用 span 包起來

<body>
<a href="#" class="btnLink">Button Link<span>This is a button like link</span></a>
</body>

CSS 的內容:

<style>
a.btnLink {
    display: block;
    background-color: #94B8E9;
    border: 1px solid black;
    text-decoration: none;
    text-align: center;
    width: 300px;
    position: relative; /* 設定錨點為相對配置, span 就可依相對於錨點的位置來做絕對配置 */
}

a.btnLink:hover {
    background-color: #369;
    color: #fff;
}

a.btnLink span {
    display: none; /* 先將 span 設為隱藏，平常裡面的內容就不會顯示出來 */
}

/* 當滑鼠移到錨點上時，改變 span 的 style 讓它顯示出來 */
a.btnLink:hover span {
    display: block;
    position: absolute; /* 設為絕對位置 (相對於錨點) */
    top: 1em;  /* 設定 span 的位置，比錨點低 1em */
    left: 2em;  /* 設定 span 的位置，比錨點往右 2em */
    padding: 0.2em 0.6em;
    border: 1px solid #996633;
    background-color: #FFFF66;
    color: #000;
}
</style>

2012年9月19日星期三

[CSS] 製作類似按鈕的 link

原本的超連結 (<a>) 是會在內容下方產生底線，並要點選該連結內容才會有反應
可以加入以下的 CSS 樣式，就可以產生類似按鈕的效果，在框內都會有反應，不一定要點選文字才行

<style>
a {
    display: block;            /* 設為區塊模式 */
    background-color: #94B8E9; /* 定義按鈕顏色 */
    border: 1px solid black;   /* 按鈕邊框 */
    text-decoration: none;     /* 不產生底線 */
    text-align: center;        /* 將文字置中 */
    width: 300px;              /* 設定寬度 */
}

/* 滑鼠指到連結時改變按鈕顏色 */
a:hover {
    background-color: #369;
    color: #fff;
}
</style>
<body>
<a href="#">Button Link</a>
</body>

效果:

滑鼠移到按鈕上會改變顏色:

2012年9月28日 星期五