Responsive text align center

電腦版想靠右對齊的文字，手機版想要置中對齊，這類的文字對齊，Bootstrap 並沒有內建這種功能，不過網路上早已經有解答！

https://github.com/twbs/bootstrap/issues/11292

CSS3 在所有 target blank 的連結後添加圖示

清楚的 UI ，在外連的連結後面加入圖示

/*
1. 注意 hover 合併 after 的寫法，不可調換
2. 注意加內容文字，又加入圖片的 content 寫法
3. 這樣寫也可以 a[target="_blank"]:after 
*/

a[target]:after{
   content: "(" url('../images/external_link_bk.png') ")";
}
a[target]:hover:after{
   content: "(" url('../images/external_link_red.png') ")";
}

純CSS下拉選單

<ul>
<li><a href="#">最新資訊</a>
<ul>
<li><a href="#">器材介紹</a></li>
<li><a href="#">購買指南</a></li>
<li><a href="#">產品評測</a></li>
</ul>
</li>
</ul>







.nav {
background-color:#000;
}
.nav ul{
list-style-type: none;
padding:0px;
margin:0px;
}
.nav li{
display: inline-block;
margin: 0px 10px;
position: relative;
}
.nav a{
color:#FFF;
text-decoration: none;
line-height: 26px;
font-size: 14px;
}
.nav a:hover{
text-decoration: underline;
}
.nav ul ul{
position: absolute;
background-color:#000;
left:-10px;
width: 110px;
display: none;
}
.nav ul li:hover > ul {
display: block;
}

瀏覽器通用的CSS陰影

.shadow{
 -moz-box-shadow: 1px 1px 5px #666;
 -webkit-box-shadow: 1px 1px 5px #666;
 box-shadow: 1px 1px 5px #666;
 /* For IE 8 */
 -ms-filter:"progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666')";
 /* For IE 5.5 - 7 */
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#666');
}

條件式註解

如果IE沒聽話，最後只好另外做一個IE專屬的CSS囉
把這些寫在head 裡面，並且把CSS link寫在"內容"這兩字的位置上就可以囉

內容











內容

修復舊版IE6、IE7的CSS inline-block

舊版的IE6、IE7不接受CSS的inline-block
display: inline-block;
所以製作需要置中對齊的主選單時就沒有辦法使用text-align:center;

我們可以用這幾句修正
zoom:1;
*display: inline;
_height: 30px;

像這樣寫就可以了~~~
ul.nav li {
     display: inline-block;
     zoom:1;
     *display: inline;
     _height: 30px;
}

CSS背景語法

background-image 背景影像圖檔網址
如果圖檔放在images資料夾中，要寫成 background-image:url('images/img_tree.png');


background-repeat 是否重覆拼接背景
no-repeat 不重覆
repeat-x 重覆x軸方向
repeat-y 重覆y軸方向

background-position 背景起點位置
right top 指的就是從左上角開始置放圖片

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

相簿或產品列表的html和css

li float left 之後 ul 就會瞇成一條線了，所以我們替ul 加上overfloat hidden，讓ul可以隨產品增加向下伸展版面，提醒大家：在實際組合入版面的時候，記得一定要設上 ul 寬度，不然會出線多餘的空間。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文件</title>
<style type="text/css">
ul {
 background-color: #F00;
 width: 195px;
 list-style: none;
 margin: 0px;
 padding:5px;
 overflow: hidden;
}
li {
 float:left;
 display: block;
 width:50px;
 height: 60px;
 margin:5px;
 border: 1px solid #FFF;
}
</style>
</head>

<body>
<ul>
  <li>111<br />111<br />111</li>
  <li>111<br />111<br />111</li>
  <li>111<br />111<br />111</li>
  <li>111<br />111<br />111</li>
</ul>
</body>
</html>

Reset CSS 的主要目的是減少瀏覽器不一致的問題

Eric Meyer 的 Reset CSS
http://meyerweb.com/eric/tools/css/reset/

html5doctor 修改了 Meyer 的成為比較符合 html5 的reset，刪除/新增了一些語法
http://html5doctor.com/html-5-reset-stylesheet/

Yahoo Developer Network也出了兩種
YUI2 Reset CSS
YUI3 Reset CSS

直式主選單HTML和CSS

其實主選單就是一串連結清單

HTML：

Home
News
Contact
About

CSS：

ul {
list-style-type:none;
margin:0;
padding:0;
}
a {
display:block;
width:60px;
}

CSS隱藏網頁元素

visibility:hidden 
隱藏網頁元素，但是實體空間仍在，因此會出現一塊空白區域


display:none;
隱藏網頁元素，並且消除實體空間，因此網頁下方的內容會上移


>>到W3schools試試看

網頁版面置中的CSS

可以用來置中 div, table, ul 等

margin-left: auto;
margin-right: auto;