JDX-01練習說明:網站設計整合

(三)利用CSS3:Flex應用體驗

(A)html結構

<section>
    <h1>section01</h1>
    <div>
        <img src="images/sec0101.jpg" alt="">
        <img src="images/sec0102.jpg" alt="">
        <img src="images/sec0103.jpg" alt="">
        <img src="images/sec0104.jpg" alt="">
        <img src="images/sec0105.jpg" alt="">
    </div>
</section>

(B)h1美化

section h1{text-align: center; height: 100px;line-height: 100px; font-size: 36px;}
section h1:before,section h1:after{ content: ""; width: 20px; height: 20px; background: #ff0062;
                                    display: inline-block; margin: 0 20px; transform: rotate(45deg);}

(C)img美化

參考連結:Flex Tools

section:nth-of-type(1) div {display:flex; flex-direction: column; flex-wrap: wrap; height: 790px;
                            align-items:center;}

(D) 若使用Float情形

(1)float問題

(2)課程範例float改善