基礎概念講解:click for video!!
平面作品參考範例:
數位作品實作示範:
石碇之水
那年的冬季,水清的是一種無法想像。看著天空的顏色在轉化。
藍的與白的,是一種交相印。
教學video:
範例使用 CSS:
<style>
/*主DIV*/
.maindiv01 {
position: relative;
border: 0px solid orange;
}
/*標題大字*/
.divwordbig {
font-family: Verdana, '微軟正黑體';
font-size: 3.4em;
font-weight: bold;
line-height: 1.6em;
text-align: left;
color: green;
text-shadow: 2px 2px 2px black;
}
/*中間內文*/
.divwordsmall {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
line-height: 1.8em;
text-align: left;
background-color: whitesmoke;
width: 70%;
}
/*下面內文*/
.divwordsmall02 {
font-family: Verdana, '微軟正黑體';
font-size: 1.04em;
font-weight: bold;
background-color: lightgreen;
position: absolute;
top: 290px;
left: 185px;
}
/*第一張照片*/
.popic01 {
position: absolute;
left: 240px;
top: -10px;
}
/*第二張照片*/
.popic02 {
position: absolute;
left: 260px;
top: 155px;
padding: 3px;
background-color: whitesmoke;
-webkit-transform: rotate(-5deg);
-webkit-box-shadow: 2px 2px 2px 2px silver;
}
/*主div背景圖*/
.bacimg {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXuypCTBLgUE8Uzgtmk5CBLe_qmT2J5nNApg1Dv6kVuYc4DApKLm3EnCbRyKArw2UX-kq147j3aYL1LzVI_6lYKxAA5Znd0aaN-SVWpTm8RAUwZPuubjTFLcnjOOm9afMmfynaufD8AI4/w684-h456-no/IMG_1076.JPG);
background-repeat: no-repeat;
background-position: left bottom;
background-size: 455px;
}
</style>
範例補充用 互動CSS:
.popic01:hover {
border: 1px solid transparent;
padding: 3px;
background-color: whitesmoke;
-webkit-box-shadow: 1px 1px 1px 2px silver;
}
沒有留言:
張貼留言