1.直角三角形
（1）等邊直角三角形制作
（2）任意邊長直角三角形制作
製作如下效果
2.常規頁碼設計基本要求：（1）頁碼陳列（2）上一頁、下一頁（3）頁碼跳轉
解決思路：將a元素轉為行內塊元素，設定高度、寬度、背景、邊框等樣式。
3.設定垂直對齊方式vertical-align用於設定元素的垂直對齊方式，僅針對行內元素（inline）、行內塊元素（inline-block）及表格單元格元素（table-cell）有效，對塊級元素無效。
（1）當行內元素或行內塊元素設定vertical-align屬性時，其屬性值表示該元素相對於其父元素的垂直方式。
baseline：預設，元素的基線與父元素的基線對齊
sub：元素的基線與父元素的下標基線對齊
super：元素的基線與父元素的上標基線對齊
text-bottom：元素的底部與父元素的字型底部對齊
text-top：元素的頂部與父元素的字型頂部對齊
middle：元素的中部與父元素基線+父元素x高度的一半之和對齊
<length>：元素的基線與父元素基線length距離對齊，可以為正，可以為負
<percentage>：元素的基線與父元素基線percentage百分比
（2）當行內元素或行內塊元素設定vertical-align屬性時，其屬性值也能表示該元素相對於整行的垂直方式。
top：元素及其後代元素的頂部與整行頂部對齊
bottom：元素及其後代元素的底部與整行底部對齊
<style>img { height: 8px; }img.top {vertical-align: top; }img.bottom {vertical-align: bottom; }img.baseline {vertical-align: baseline; }img.sub {vertical-align: sub; }img.super {vertical-align: super; } img.middle {vertical-align: middle; } img.text-top {vertical-align: text-top; }img.text-bottom {vertical-align: text-bottom; }img.percentage {vertical-align: -100%; }img.length {vertical-align: -20px; } </style><body><br /><p>這是<img class="baseline" src="images/b.jpg" alt="" />一幅圖片-baseline </p><br /><p>這是<img class="sub" src="images/b.jpg" alt="" />一幅圖片-sub</p><br /><p>這是<img class="super" src="images/b.jpg" alt="" />一幅圖片-super</p><br /><p>這是<img class="text-top" src="images/b.jpg" alt="" />一幅圖片-text-top </p><br /><p>這是<img class="text-bottom" src="images/b.jpg" alt="" />一幅圖片-text-bottom </p><br /><p>這是<img class="middle" src="images/b.jpg" alt="" />一幅圖片-middle</p><br /><p>這是<img class="mr" src="images/b.jpg" alt="" />一幅圖片-預設</p><p>這是<img class="top" src="images/b.jpg" alt="" />一幅圖片-top</p><br /><p>這是<img class="bottom" src="images/b.jpg" alt="" />一幅圖片-bottom</p><p>這是<img class="length" src="images/b.jpg" alt="" />一幅圖片-length</p><p>這是<img class="percentage" src="images/b.jpg" alt="" />一幅圖片-percentage</p> </body>
最新評論