【範例結果】
<section> <div class="subtitle"> <h2>旅遊推薦</h2> <div class="subicon"><img src="./image/subicon01.svg" alt=""></div> <p>旅行,卻彷如無限大符號地, <br> 一次次旅程感受或發現過去所未曾領略的極致所在。</p> </div> <div class="tripNoteBg"> <div class="tripNote"> <h3>豐富旅遊。精彩永續</h3> <p>歐洲的歷史建築,不再只是冰冷的石頭,<br> 而是音槳家生命歷程的一部份,<br> 放慢腳步用心來聽聽歐洲,<br> 不再只是浮光掠影的表象,<br> 讓瑰麗的片刻風景,成為生命中的永恆回憶。</p> </div> </div> </section>
// 一般設定============================= *{padding: 0 ; margin: 0;} ul,ol,li{list-style: none;} a{text-decoration: none;} body{ font-family: 'FontAwesome',Verdana,'Microsoft JhengHei',sans-serif; font-size: 16px; }
(1) web font 應用與 beforea、after偽元素結合
本網參考連結:【web font與icon font應用】、【icon font 與 before、after結合】
Awesom CSS CND 連結【連結至】、【Awesome官網】
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
(2) 直書/橫書應用:
// 共用section元素設定============================= .subtitle{ h2{ writing-mode: vertical-rl; /* 直書設定*/ /*文字美化*/ margin-top: 40px; font-size: 20px; font-weight: bold; color:#364F6B; &:before,&:after{ content: "\f072"; padding: 0 20px; color:#FF549E; margin: 10px; } }//h2 } //.subtitle .subicon{ width: 80px; margin: 20px; }//.subicon
(3) Flex應用: Flex CSS tools
// 共用section元素設定============================= .subtitle{ /*利用Flex 讓元表垂直置中*/ display: flex; flex-direction: column; align-items: center; }