加入按鈕式文字的超連結的方式
寫完遊記最後一篇後就想說每篇的網址都有了
應該要在每篇中加入一塊超連結到其他天的心得的區塊
就分出一段放6個超連結感覺很沒意思 很粗糙
本來想用quote 但這樣就跟放音樂的區塊重複了
查了幾篇文之後決定用這個按鈕式文字來當超連結
就以心得中的連結為例(我也懶得重寫一個了
詳細code如下(以下幾乎都在html模式下編輯
先在文章最前面加入以下語法
兩個head和style的<>反正就是標示這些語法的區塊
a.blackbtn和a.blackbtn:hover就是按鈕式文字連結的屬性
a其實是可省略的 加的話這個class就只限用於<a>標籤裡了
前者裡三個 background-color是底色 color是文字顏色
padding前後兩個數字分別是上下高度及左右寬度
好像是文字本身往外延伸多少距離當方塊吧
後者則是游標移上去之後這塊會變成的樣子
不會變文字顏色和框大小的就不用特別再寫了
這邊我想要變的是底色 因此改變background-color
a.thisbtn跟blackbtn基本上差不多
我是多加這個用來表示當前頁面區別而已
至於blockquote.frame是這塊區域外框的描述 這就留到其他篇來說了
然後在文章中想加入這塊連結區域的地方加入以下語法
第一行的div包起來的是我置中的文字"沖繩畢旅遊記"
接下來的才是按鈕式文字
一日到五日也可以用工具列的超連結加入 然後在<a>中多加class="blackbtn"這個敘述
基本上這邊加好class後在撰寫模式中排版也是可以的
就是要多按預覽來檢視排版效果就是了
最後的心得篇因為就是所在頁面 class用事先額外建的thisbtn
然後href整個刪掉不要網址連結 還是要真的用這頁的網址也無所謂
這樣基本上就完成了
<a>裡面可以再加title="xxx"的敘述 這樣游標停在按鈕連結上時就會在游標旁顯示"xxx"的文字
功能大概就這樣 還有很多其他屬性可以設定 例如按鈕離旁邊的距離之類的
這篇基本上就是可以功能正確而已 龜毛的排版顏色花樣等都還要爬文查詢
應該要在每篇中加入一塊超連結到其他天的心得的區塊
就分出一段放6個超連結感覺很沒意思 很粗糙
本來想用quote 但這樣就跟放音樂的區塊重複了
查了幾篇文之後決定用這個按鈕式文字來當超連結
就以心得中的連結為例(我也懶得重寫一個了
沖繩畢旅遊記一日目 二日目 三日目 四日目 五日目 心得篇
詳細code如下(以下幾乎都在html模式下編輯
先在文章最前面加入以下語法
<head>稍微解釋一下語法
<style>
a.blackbtn {
background-color: #AC4B42;
color: #FEFEFE;
padding: 5px 10px;
}
a.blackbtn:hover {
background-color: #436212;
}
a.thisbtn {
background-color: #6CAFD9;
color: #FEFEFE;
padding: 5px 10px;
}
blockquote.frame {
border: 3px dotted #7F9A39;
padding: 10px 17px 20px 20px;
}
</style>
</head>
兩個head和style的<>反正就是標示這些語法的區塊
a.blackbtn和a.blackbtn:hover就是按鈕式文字連結的屬性
a其實是可省略的 加的話這個class就只限用於<a>標籤裡了
前者裡三個 background-color是底色 color是文字顏色
padding前後兩個數字分別是上下高度及左右寬度
好像是文字本身往外延伸多少距離當方塊吧
後者則是游標移上去之後這塊會變成的樣子
不會變文字顏色和框大小的就不用特別再寫了
這邊我想要變的是底色 因此改變background-color
a.thisbtn跟blackbtn基本上差不多
我是多加這個用來表示當前頁面區別而已
至於blockquote.frame是這塊區域外框的描述 這就留到其他篇來說了
然後在文章中想加入這塊連結區域的地方加入以下語法
<blockquote class="frame" style="width: 500px;">一樣blockquote是外框敘述
<div style="margin-bottom: 12px; text-align: center;">
沖繩畢旅遊記</div>
<a class="blackbtn" href="http://anton1615.blogspot.tw/2017/05/blog-post.html">一日目</a>
<a class="blackbtn" href="http://anton1615.blogspot.tw/2017/05/blog-post_2.html">二日目</a>
<a class="blackbtn" href="http://anton1615.blogspot.tw/2017/05/blog-post_56.html">三日目</a>
<a class="blackbtn" href="http://anton1615.blogspot.tw/2017/05/blog-post_18.html">四日目</a>
<a class="blackbtn" href="http://anton1615.blogspot.tw/2017/05/blog-post_77.html">五日目</a>
<a class="thisbtn">心得篇</a></blockquote>
第一行的div包起來的是我置中的文字"沖繩畢旅遊記"
接下來的才是按鈕式文字
一日到五日也可以用工具列的超連結加入 然後在<a>中多加class="blackbtn"這個敘述
基本上這邊加好class後在撰寫模式中排版也是可以的
就是要多按預覽來檢視排版效果就是了
最後的心得篇因為就是所在頁面 class用事先額外建的thisbtn
然後href整個刪掉不要網址連結 還是要真的用這頁的網址也無所謂
這樣基本上就完成了
<a>裡面可以再加title="xxx"的敘述 這樣游標停在按鈕連結上時就會在游標旁顯示"xxx"的文字
功能大概就這樣 還有很多其他屬性可以設定 例如按鈕離旁邊的距離之類的
這篇基本上就是可以功能正確而已 龜毛的排版顏色花樣等都還要爬文查詢
留言
張貼留言