前言
現實身活上許多報章雜誌的文章的排版都十分的講究，讓我常常著迷於這些設計上。今天在網上偶遇了愛貝客這個網站，他的設計以及排版十分的吸引我，裏頭不僅使用了許多CSS3的技術，還使用了前幾日提到的瀑布流排版，不過這不是今天的重點，吸引我的是它在文章開頭使用的首字放大效果，廢話不多說!開始今天的旅程~
愛貝客 - 個專為爸爸媽媽設計的親子旅遊等的資訊網站。 http://www.abic.com.tw/
什麼是首字放大
為了方便了解，這裡最簡單的說明一下首字放大效果，首字放大就是將文章開頭第一個字放大，在許多文章常常使用這個效果來凸顯文章起頭
CSS :first-letter
顧名思義，首字翻譯成英文即為first-letter，在css中我們可以使用這個selector指定到段落中的第一個字，然後對首字下些額外效果(放大、粗體、顏色)，趕緊看看範例程式碼吧
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.first-letter-effect{
font-size: 17px;
color: #444444;
}
.first-letter-effect:first-letter{
font-size: 30px;
font-weight: bold;
color: #111111;
}
</style>
</head>
<body>
<div class="first-letter-effect">
現實身活上許多報章雜誌的文章的排版都十分的講究，讓我常常著迷於這些設計上。今天在網上偶遇了愛貝客這個網站，他的設計以及排版十分的吸引我，裡頭不僅使用了許多CSS3的技術，還使用了前幾日提到的瀑布流排版，不過這不是今天的重點，吸引我的是它在文章開頭使用的首字放大效果，廢話不多說!開始今天的旅程
</div>
</body>
</html>
結語
感謝收看本人廢話一大堆實作卻是一點點><"，懂得如何做雖然很重要，但更重要的是為什麼要這麼做，為什麼要讓字首放大，該用在甚麼場合、該怎麼用，一個負責任的IT人就該如此，而不是只會用只能生產code，讓我們共同努力並共勉之!
沒有留言:
張貼留言