基礎程式設計範例 -網頁名片
畫面預覽 CodePen: http://codepen.io/lhuang23/pen/GjWYWW
規劃 div .card div .watermark h3
名片內部規劃 width:350px; height: 200px div .circle2 div .logo span h2 h5 hr
HTML <div class=“watermark">NAMECARD</div> <div class="card"> <h2>黃鈴玲 <span>Lingling Huang</span></h2> <h5>大葉大學多媒體學程-助理教授</h5> <hr> <p>交通大學應用數學博士，任教於多媒體學程與資工系，<br> 目前教授 [電腦軟體應用] 與 [網頁設計應用] 等課程</p> <div id="logo"></div> <div class="circle circle1"></div> <!-- pink ball --> <div class="circle circle2"></div> <!– blue circle --> <div class="circle circle3"></div> <!– blue ball --> </div> <h3>網頁課程範例-名片</h3>
CSS step1 整體 先幫所有元素加邊框(最後會取消) 並設定字型 *{ border: solid 1px; font-family: 微軟正黑體; } 設定網頁全高全寬 html, body { width: 100%; height: 100%; 設定網頁背景色，內距外距0，上下框線， 設定body寬度計算時有包含框線寬度 body{ background-color: #d1d1d1; margin: 0px; padding: 0px; border-top: solid 20px #FC3F7E; border-bottom: solid 20px #FC3F7E; box-sizing: border-box; } 網頁背景色 框線 外距 內距 上框線 下框線
CSS step2 名片部份 .card{ width: 350px; height: 200px; margin: auto; padding: 20px; margin-top: 230px; background-color: #eee; color: #666; letter-spacing: 1px; border: solid 1px rgba(0,0,0,0.15); border-radius: 6px; box-shadow: 0px 0px 25px rgba(0,0,0,0.3); } 元素置中 內距 上方外距 背景顏色 文字顏色 文字間距 邊框樣式 邊框圓角 陰影
CSS step3 名片裡的文字部份 最後一行文字格式 h3{ 文字大小 padding-top: 100px; h2{ font-size: 25px; } h2 span{ font-size: 12px; h5{ color: #1B93CF; p{ line-height: 22px; 最後一行文字格式 h3{ padding-top: 100px; text-align: center; color: #555; } 文字大小 文字置中對齊 文字顏色 文字行高
CSS step4 放置logo圖 先修改 * ，幫所有網頁元素設定位置為相對 設定logo區塊寬高位置及背景圖 #logo{ *{ border: solid 1px; font-family: 微軟正黑體; position: relative; } 設定logo區塊寬高位置及背景圖 #logo{ width: 120px; height: 110px; position: absolute; top: 15px; right: 35px; background-image: url("http://mdc.dyu.edu.tw/rwd/images/mdc_title.png"); }
CSS step5 放三個圓 .circle3{ width: 50px; height: 50px; right: 20px; 先設定所有圓形區塊的圓角及位置 .circle{ border-radius: 100%; position: absolute; } 設定粉紅色圓的寬高位置及背景色 .circle1{ width: 100px; height: 100px; right: 100px; bottom: -60px; background-color: #FCB1CA; 先設定右上角空心圓區塊的寬高位置及框線 .circle2{ width: 60px; height: 60px; right: -30px; top: -30px; border: solid 5px #95D5FC; } 設定右下角圓的寬高位置及框線背景色 .circle3{ width: 50px; height: 50px; right: 20px; top: 170px; border: solid 1px #d1d1d1; background-color: rgba(177,237,250,0.9);
CSS step6 處理浮水印區塊 文字斜體 文字顏色為黑色帶透明度 文字陰影為白色帶透明度 修改.card，設定超出名片範圍不顯示 overflow: hidden; } 設定NAMECARD文字區塊 .watermark{ font-size: 250px; position: absolute; top: 40%; width: 100%; text-align: center; font-style: italic; color: rgba(0,0,0,0.06); text-shadow: 2px 1px 1px rgba(255,255,255,0.2); 修改body，設定浮水印超出背景範圍 不顯示 body{ overflow: hidden; } … 前略，裡面加一行 … 前略，裡面加一行 文字斜體 文字顏色為黑色帶透明度 文字陰影為白色帶透明度
CSS step7 滑鼠移至名片的移動效果 動畫名稱，叫用前面定義的move-left 動畫執行時間(秒) 動畫結束後保持在最後的狀態 定義CSS3動畫，名稱為move-left @keyframes move-left{ from {left: 0px; } to {left: -2px; } } 當滑鼠滑過card區塊時 .card:hover{ animation-name: move-left; animation-duration: 0.1s; animation-fill-mode: forwards; 動畫名稱，叫用前面定義的move-left 動畫執行時間(秒) 動畫結束後保持在最後的狀態
CSS step8 增加漸層色塊
HTML 在<h2>前增加div區塊 <div class=“watermark">NAMECARD</div> <div class="card"> <div id="gradient"></div> <h2>黃鈴玲 <span>Lingling Huang</span></h2> <h5>大葉大學多媒體學程-助理教授</h5> <hr> <p>交通大學應用數學博士，任教於多媒體學程與資工系，<br> 目前教授 [電腦軟體應用] 與 [網頁設計應用] 等課程</p> <div id="logo"></div> <div class="circle circle1"></div> <!-- pink ball --> <div class="circle circle2"></div> <!– blue circle --> <div class="circle circle3"></div> <!– blue ball --> </div> <h3>網頁課程範例-名片</h3>
CSS 先定義色塊大小位置底色 #gradient{ } position: absolute; width: 90px; height: 300px; top: -30px; left: 65px; background-color: #e4f5fc; transform: rotate(20deg); } background: -moz-linear-gradient(top, #e4f5fc 0%, #bfe8f9 53%, #9fd8ef 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #e4f5fc 0%,#bfe8f9 53%,#9fd8ef 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #e4f5fc 0%,#bfe8f9 53%,#9fd8ef 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e4f5fc', endColorstr='#9fd8ef',GradientType=0 ); /* IE6-9 */ CSS 線上漸層編輯器，複製語法貼入{}裡 http://www.colorzilla.com/gradient-editor/
CSS step9 滑鼠移至Logo的旋轉效果 定義CSS3動畫，名稱為move-left @keyframes rotate{ 0% { transform: rotate(0deg);} 50% { transform: rotate(180deg);} 100% { transform: rotate(360deg);} } 當滑鼠滑過card區塊時 #logo:hover{ animation-name: rotate; animation-duration: 1s; animation-timing-function: linear; 動畫名稱，叫用前面定義的rotate 動畫執行時間(秒) 動畫使用線性的速度