觀看金魚都能懂網頁設計入門 17
https://codepen.io/mikeyam/pen/WNwPzpy 小練習
從排版練習中,學到許多垂直置中技巧
logo部分運用inline-block特性,可以用padding把高度撐高
.logo{
display: inline-block;
padding: 6px;
}
運用flex-direction: column; justify-content: center; 把文字垂直置中
.product .text{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 20px;
text-align: center;
}
運用vertical-align: bottom;方法把img邊框問題做處理,因為inline的特性才會有的小問題
.product .box img{
width: 100%;
vertical-align: bottom;
}
.path li + li::before{
content: '/';
color: #aaa;
position: absolute;
left: 0;
}
https://code.tutsplus.com/zh-hant/tutorials/the-30-css-selectors-you-must-memorize--net-16048
這個被稱為相鄰兄弟選擇器。 它僅僅會選擇剛好在左邊元素之前的元素,選擇第一個li之後都會運用到偽元素
.path li + li::before{
content: '/';
color: #aaa;
position: absolute;
left: 0;
}
選擇它的直接的子對象,只選擇service 第一個 h2
.service > h2{
width: 960px;
margin: auto;
text-align: center;
font-size: 40px;
padding: 20px 0;
}
選擇它的直接的子對象,只選擇service 第一個 p
.service > p{
width: 960px;
margin: auto;
text-align: center;
padding-bottom: 40px;
}