*YouTube 教學頻道* *影像布落格*
首頁
網路組寫作技能
布落格寫作
小世界習作網
《台灣立報》
臉書小品文

2014年12月16日 星期二

有變化的版型:表格+CSS:圓角、陰影、旋轉、移動




這裡有很多字。這裡有很多字。 這裡有很多字。這裡有很多字。

這裡共有四種版面編輯動作:圓角、陰影、旋轉、滑鼠移入互動。【mouse enter↙】
這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有很多字。這裡有 很多字。

在表格的TD中,使用1px div的排版概念(上課術語),形成跨限制的Div面積呈現。【請看教學video】




CSS 語法,請置於<body>之後:

<style>
/*
圓角框CSS語法
*/
.radius1215 {
border-radius: 25px;
}

/*
陰影框CSS語法
*/
.boxshadow1215 {
-webkit-box-shadow: 2px 2px 2px gray;
}

/*
旋轉框CSS語法
*/
.rotate1215 {
-webkit-transform: rotate(-8deg);
}

.rotate121502 {
-webkit-transform: rotate(6deg);
}

/*
相對位置移動CSS語法
*/
.relapo1215 {
position: relative;
top: 1.5em;
left: 2.2em;
}

/*
字的安排的CSS語法
*/
.tdword1215 {
font-family: Verdana, '微軟正黑體';
font-size: 1.2em;
font-weight: bold;
line-height: 1.6em;
letter-spacing: 0.1em;
}

/* 滑入有背景色CSS語法
*/
#tdhover1215:hover {
background-color: #CEFFCE;
}
</style>


教 學影音: