四、網頁排版技巧 Part I

Previous三、使用 CSS 變更 HTML 標籤特性 Next六、網頁排版技巧 Part II

Last updated 5 years ago

Was this helpful?

四、網頁排版技巧 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 的話，並排處的邊線感覺還是看起來寬一點

.col {
  float: left;
/*   border: 5px solid lightblue; */
  box-shadow: 1px 1px 10px lightblue, -1px -1px 10px lightblue;;
  padding: 10px 5px 30px 5px;
  text-align: center;
}

參考資料

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 作業：設計一個三欄式版面，具有表頭表尾的版面吧！

除了這章節教的內容外，我多添加了幾個東西到作業裡面一個是頁內錨點，搭配 scroll-behavior: smooth; 會有滾動的感覺彩蛋的部份使用了 YouTube Player API，控制影片的播放與暫停

第四章測驗

4.32 其他常見 clear 清除浮動效果

在父元素新增偽元素

.clearfix:after{
  content:'';
  display:table;
  clear:both;
}

Previous三、使用 CSS 變更 HTML 標籤特性 Next六、網頁排版技巧 Part II

Last updated 5 years ago

Was this helpful?