四、網頁排版技巧 Part I
前面都在談單欄式樣版型。這章節談多欄式的版型
4.26 Float 浮動定位技巧
因為 div 是 block 元素,自己會佔據一整行,所以不會並排在一起
需要用 float 屬性
float: left
希望元素可以並排在一起,就是使用 float 的好時機
麻煩老師過目我的 H4-26 作業練習了,謝謝老師 (已使用 CodePen 內建 css reset)
想順便請問,如何讓每條邊線的視覺效果看起來一樣呢?
我在三欄都有設定 border: 5px solid lightblue;
。 但它們並排的時候,在視覺效果上,border 的寬度會相加,顯得交接處的 border 看起來變得比較粗
如果我想讓它們每條邊線的視覺效果都一樣,難道只能每一欄個別設定 border 嗎?
我目前想到兩個可能的方法
一、或許能用 table 排版,這樣每條邊線就能都一樣 但似乎就無法用 float 排版了,對未來想要 RWD 的話可能不方便
二、使用 box-shadow
的話,並排處的邊線感覺還是看起來寬一點
參考資料
4.27 使用 clear 清除浮動
float 的好朋友,clear
在浮動完的 div 後面加 div.clearfix,css 設定 clear: both;
4.28 兩欄式、三欄式版面定位技巧
寬度要注意,不然會換行
可以用 Chrome 的開發者工具確認高度
main 可以把三欄都包在一起,調整和 .footer 的距離
4.29 設計並排式選單
利用 ul li 排版
float: left
增加高度
display: block
4.30 LOGO 與選單並排設計技巧
左邊 logo,右邊 list 選單
.topmenu 關於我們 產品介紹 Q&A
4.31 作業:設計一個三欄式版面,具有表頭表尾的版面吧!
麻煩老師過目我的 HW4-32 作業練習了,謝謝老師 (已使用 CodePen 內建 css reset) https://codepen.io/ayugioh2003/pen/bvzxKM
除了這章節教的內容外,我多添加了幾個東西到作業裡面 一個是頁內錨點,搭配 scroll-behavior: smooth;
會有滾動的感覺 彩蛋的部份使用了 YouTube Player API,控制影片的播放與暫停
第四章測驗
4.32 其他常見 clear 清除浮動效果
在父元素新增偽元素
Clearing a float container without source markup clearfix 制定的過程
Last updated