HTML部份
<h1>保養有道</h1> <div class="container-xl"> <div class="row"> <div class="col-12 col-md-8"> <h4 class="mb-md-4">優良的保養方式才能養出水潤光滑的美麗肌膚</h4> </div> </div> </div>
CSS部份 (以下參考使用, 不一定要相同的設定)
/* 手機版h1下方距離 */ #sec4 h1 { margin-bottom: 20px; } /* 手機版才出現的影像(上方) */ #sec4 .row { padding-top: 130px; background: url(../img/sec4m1.png) no-repeat right top; background-size: auto 130px; position: relative; } /* 手機版才出現的影像(上方小花圖) */ #sec4 .row::before { content: ''; background-image: url(../img/sec4m2.png); width: 29px; height: 23px; position: absolute; right: 88px; top: 130px; transform: translateY(-60%); } /* 白色區域網格系統區 */ #sec4 .row .col-12 { background-color: #fff; } /* 桌機版時 ------------------------------------------------- */ @media (min-width: 768px) { /* h1下方距離 */ #sec4 h1 { margin-bottom: 40px; } /* 換背景圖 */ #sec4 .row { padding-top: 0; background: url(../img/sec4bg.png) no-repeat center top, url(../img/sec4bg2.png) repeat-y center top; background-size: 100% auto; min-height: 680px; } /* 將手機版呈現的小花圖不顯示 */ #sec4 .row::before { content: none; } }
HTML部份
<!-- 折疊式面板 start ---------------------------------------------- --> <div class="accordion" id="accordionObj"> <!-- 折疊式面板 - 一組QA項目 --> <div class="accordion-item"> <!-- Q.標題 --> <h2 class="accordion-header" id="item-heading1"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-collapse1" aria-expanded="false" aria-controls="item-collapse1"> 1、保養順序第一個步驟: 適度的清潔 </button> </h2> <!-- A.內容 --> <div id="item-collapse1" class="accordion-collapse collapse" aria-labelledby="item-heading1" data-bs-parent="#accordionObj"> <div class="accordion-body"> <p> 保養順序的第一個步驟當然就是清潔,但是清潔必須適當,過度的清潔就傷皮膚了,肌膚想要水潤透亮, 就必須維持油水平衡,保濕是絕對必要的,因此選擇洗面乳時,必須選擇含有保濕因子的產品,幫助維持肌膚需要的水分。 </p> <p> 如果白天有上妝時,晚上的保養必須先重視卸妝,潔膚水也就是俗稱的卸妝水,除了卸除防曬、彩妝之外, 還可以幫助清潔毛細孔中的空氣髒污。 </p> </div> </div> </div> <!-- 折疊式面板 - 一組QA項目 --> <div class="accordion-item"> <h2 class="accordion-header" id="item-heading2"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-collapse2" aria-expanded="false" aria-controls="item-collapse2"> 2、幫助保養品吸收的前導液: 化妝水 </button> </h2> <div id="item-collapse2" class="accordion-collapse collapse" aria-labelledby="item-heading2" data-bs-parent="#accordionObj"> <div class="accordion-body"> 為了避免肌膚太過乾澀,在清潔後常會使用化妝水或面膜濕潤角質,幫助後續保養品的推勻,才能更有效的吸收, 化妝水可以視為是協助後續保養品吸收的前導液,主要目的為維持臉部角質濕潤,以便讓保養品更好滲透到肌膚底層, 發揮保養品的效果。 </div> </div> </div> <!-- 折疊式面板 - 一組QA項目 --> <div class="accordion-item"> <h2 class="accordion-header" id="item-heading3"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-collapse3" aria-expanded="false" aria-controls="item-collapse3"> 3、選擇添加各種保養成分的精華液 </button> </h2> <div id="item-collapse3" class="accordion-collapse collapse" aria-labelledby="item-heading3" data-bs-parent="#accordionObj"> <div class="accordion-body"> <p> 精華液是專門為賦活肌膚而設計的密集保養,其質地輕盈細膩,能迅速滲透肌膚表面,直達肌底,為後續保養品做好準備。 精華液蘊含多種活性成份,協同發揮極致保養功效,使一般保養程序的效果激增,打造緊實豐盈的肌膚,煥發肌底光澤。 臉部精華液應與日常保養品搭配使用,針對肌膚所需進行重點保養。 </p> <p> 精華液通常被認為是保養步驟中的核心角色,精華液會添加高濃度的精華成分,能夠為肌膚密集補充最需要的養分, 讓臉部有保濕鎖水的功能,讓肌膚吸收更多的養分,肌膚健康了,膚色自然不會呈現不健康的蠟黃色。 </p> </div> </div> </div> <!-- 折疊式面板 - 一組QA項目 --> <div class="accordion-item"> <h2 class="accordion-header" id="item-heading4"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-collapse4" aria-expanded="false" aria-controls="item-collapse4"> 4、鎖住水分的重要關鍵: 乳液/乳霜 </button> </h2> <div id="item-collapse4" class="accordion-collapse collapse" aria-labelledby="item-heading4" data-bs-parent="#accordionObj"> <div class="accordion-body"> <p> 化妝水的主要成分是由水構成的,原則上塗上後一段時間就會蒸發,通常只是協助後續保養品有更好的推勻。 最後就需要乳液登場協助鎖水的幫助了。 </p> <p> 乳液含有適度的油脂,能夠在使用化妝水補充的水分上,像是蓋上一層蓋子,能夠防止水分在被肌膚吸收前蒸發, 有效保濕。此外乳液能讓皮膚軟化、提升保養效果,養成使用乳液的習慣,讓皮膚能以更好的狀態吸收下一段的保養 為了使乳液的作用發酵。 </p> </div> </div> </div> <!-- 折疊式面板 - 一組QA項目 --> <div class="accordion-item"> <h2 class="accordion-header" id="item-heading5"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-collapse5" aria-expanded="false" aria-controls="item-collapse5"> 5、面膜適合天天敷的迷思解惑 </button> </h2> <div id="item-collapse5" class="accordion-collapse collapse" aria-labelledby="item-heading5" data-bs-parent="#accordionObj"> <div class="accordion-body"> <p> 面膜有區分清潔、保濕、美白、抗老、加強...等等效能的,原則上如果妳的肌膚沒有敏感上的問題, 基本上屬於一般性温和性保濕的面膜天天敷、常常敷是可以的,但是如果是敏感性肌膚,或是加強性面膜就不適合, 建議一週一次左右即可,畢竟過度保養容易使毛囊堵塞,引發粉刺與痘痘。 </p> </div> </div> </div> <!-- 折疊式面板 - 一組QA項目 --> <div class="accordion-item"> <h2 class="accordion-header" id="item-heading6"> <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#item-collapse6" aria-expanded="false" aria-controls="item-collapse6"> 6、常常去角質能讓肌膚光滑無瑕? </button> </h2> <div id="item-collapse6" class="accordion-collapse collapse" aria-labelledby="item-heading6" data-bs-parent="#accordionObj"> <div class="accordion-body"> 角質層若囤積、沒有代謝,會使肌膚變得暗沉粗糙而顯老,許多人因為年齡增長,新陳代謝變慢了,就卯起來去角質, 但其實角質層具有隔絕外界髒污、細菌入侵身體肌膚的作用。過度去角質會讓肌膚完全暴露在危險環境中, 肌膚反而容易泛紅、發癢。因此,去角質還是一個月一次就好。 </div> </div> </div> </div> <!-- 折疊式面板 end ------------------------------------------------ -->
CSS部份 (以下參考使用, 不一定要相同的設定)
/* 折疊式面板 - 四周留白 ---------------------------- */ .accordion { padding: 0.5rem; } /* 折疊式面板 - 一組QA項目 */ .accordion-item { border: none; } /* 折疊式面板 - 目錄標題h2內的按鈕區 */ .accordion-button { padding: 1rem 0 1.25rem 0; } /* 折疊式面板 - 目錄標題h2內的按鈕區 - 沒有收合時 */ .accordion-button:not(.collapsed) { color: var(--c-word1); font-size: 1.05rem; font-weight: bold; background-color: transparent; box-shadow: none; } /* 折疊式面板 - 目錄標題h2內的按鈕區 - 點選後焦點停佇時 */ .accordion-button:focus { border-color: transparent; box-shadow: none; } /* 折疊式面板 - 內容區域 */ .accordion-body { padding: .5rem 0rem 1.5rem 1.5rem; border-top: 1px dotted #999; text-align: justify; } /* 桌機版時 ------------------------------------------------- */ @media (min-width: 768px) { /* 折疊式面板 - 四周留白 */ .accordion { padding: 1rem 1.5rem; } /* 折疊式面板 - 內容區域 - 四周留白 */ .accordion-body { padding: .5rem 2.5rem 3rem 2rem; } }