已經成功開始使用GitHub後,那我們再回到網頁的部分吧!
今天要加入的設計是買賣網站幾乎都會有的警語標誌。
而我要做成像是跑馬燈的樣子,在網頁偏上的地方無限循環,作為警惕。
事不宜遲,上程式碼吧!
.html檔
<div class="run">
<marquee direction="left" scrollamount="7" behavior="alternate"><b>代購規則務必看過、喊單前請三思、喊單視同成年人</b>
</marquee>
</div>
.css檔
.run{
height: 50px;
width: 100%;
font-size: 0.8cm;
color: red;
position:relative;
}
marquee裡可以調整的有幾個,我挑出五個比較特別的說說:
1.BEHAVIOR="屬性"
SCROLL:不斷的由右至左循環
ALTERNATE:不斷的左、右之間來回,碰壁就反彈
這個就是我使用的啦~~總覺得用scroll我一句也沒有長,每次看到都會有一大塊空空的,最後還是選了alternate
SLIDE:由右至左一次,就停住
2.DIRECTION="屬性"
簡單來說就是控制要往上下左右哪個方向開始循環
3.SCROLLAMOUNT="數值"
每次移動的距離,單位是px,數字越大越快
預設:6px
4.SCROLLDELAY="數值"
每幾秒移動一次上面設定的距離
預設:85毫秒/ms
5.LOOP="次數"
0和預設都是無限喔~
以上是我開賽的第八天,讓我們來期待第九天的到來吧!
加油、加油! 倒數22天。
參考資料:裡面還有很多可以調整但我沒有說到的,有興趣可以點進來看看喔!