December 2014
Intermediate to advanced
416 pages
5h 33m
Chinese
Content preview from Responsive Web Design 響應式網頁設計學習手冊
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.
300
|
響應式網頁設計學習手冊
完成之後，我有兩個問題。首先，導覽與文章元素的頂端重疊。其
次，每個導覽項目都只有包含其文字所需要的大小，如果每個都一
樣大，應該會更好。
先來處理第二個問題，我將 25% 的寬度賦予
li
，如圖 10-7 所示︰
@media only screen and (min-width: 30em) {
nav li { display: block; oat: left; width: 25%; }
}
圖 10-7 導覽按鈕現在具有相等寬度
另一個問題稍微棘手些。通常，我會
clear
浮動元素之後的下一個
元素，但因為
<nav>
是
<header>
元素裡的最後一個東西，這樣做並
不會將
<header>
元素的下緣往下移動。
解決辦法是添加內邊距到
<nav>
元素的底部，為導覽騰出空間。我
會使用 em 來指定內邊距，因此它能夠隨著文字尺寸而改變。你會在
圖 10-8 中看到結果︰
@media only screen and (min-width: 30em) {
nav li { display: block; oat: left; width: 25%; }
nav { padding-bottom: 3em; }
}
10. 導覽與標頭配置 ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access
More than 5,000 organizations count on O’Reilly
O’Reilly covers everything we've got, with content to help us build a world-class technology community, upgrade the capabilities and competencies of our teams, and improve overall team performance as well as their engagement.Julian F.
I wanted to learn C and C++, but it didn't click for me until I picked up an O'Reilly book. When I went on the O’Reilly platform, I was astonished to find all the books there, plus live events and sandboxes so you could play around with the technology.Addison B.
I’ve been on the O’Reilly platform for more than eight years. I use a couple of learning platforms, but I'm on O'Reilly more than anybody else. When you're there, you start learning. I'm never disappointed.Amir M.
I'm always learning. So when I got on to O'Reilly, I was like a kid in a candy store. There are playlists. There are answers. There's on-demand training. It's worth its weight in gold, in terms of what it allows me to do.