iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

向CSScoke重新學習CSS系列 第 10

第十天:從基本排版中運用的小知識

  • 分享至 

  • xImage
  •  

觀看金魚都能懂網頁設計入門 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;
}

消除img邊框小問題

運用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;
}

上一篇
第九天:定位的學問?
下一篇
第十一天:Animation 和 transition 網頁動畫
系列文
向CSScoke重新學習CSS30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言