 |
這裡有很多字。這裡有很多字。
這裡有很多字。這裡有很多字。 這裡共有四種版面編輯動作：圓角、陰影、旋轉、滑鼠移入互動。【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>
/*
圓角框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>
教 學影音：
沒有留言:
張貼留言