CSS實戰樣式 文字兩側加居中橫線

在日常的開發中，會遇到這樣的需求，比如移動web開發中的登入頁的底部，會出現這樣的需求：其他登入方式，兩側有居中的橫線

（一）使用 vertical-align 屬性來實現

1.html部分

class="other-way-login">

class="line">
span>
class="txt">其他登入方式span>
class="line">
span>
div>2.css部分
.other-way-login

.line

.other-way-login

.txt

優點：背景顏色

1.html部分

class="other-way-login">

class="line">
span>
class="txt">其他登入方式span>
div>2.css部分
.other-way-login

.txt

（三）使用偽元素來實現

1.html部分

class="other-way-login">

class="wrap">
class="title">其他登入方式span>
h2>
div>2.css部分
.other-way-login

/*偽元素實現*/

.title

:before

.title

:after

（四）使用浮動屬性實現

1.html部分

class="wrap">

class="line">
span>
其他登入方式span>
class="line">
span>
div>2.css部分
*

.wrap

span

.wrap

.line

（五）背景圖填充

兩側跟隨廣告

var top pic.offsettop target scroll top top 把最新的 scrolltop 給 target 在這裡例子當中最為重要的是兩句。為什麼要加上，top的值。我們知道，水平滾到條滾動的時候。是需要動的，我 列印了scroll top 和target的值。我們看到是...

loading系列之左右兩側小圓點向兩側移動

效果 思路 實現 實現 按照步驟拆解，首先建立6個實心小圓點，布局檔案就不貼了，主要是 邏輯。建立六個小圓點 public void getpoints startleftmove 開啟動畫 startanimation 步驟 二 三 先從最左側小圓點開始執行動畫，執行一段距離之後再通過相反的動畫將...

js 兩側廣告滾動Demo

水垢何曾相受，細看兩俱無有，寄語揩揹人，輕手，輕手，居士本來無垢.水垢何曾相受，細看兩俱無有，寄語揩揹人，輕手，輕手，居士本來無垢.水垢何曾相受，細看兩俱無有，寄語揩揹人，輕手，輕手，居士本來無垢.水垢何曾相受，細看兩俱無有，寄語揩揹人，輕手，輕手，居士本來無垢.水垢何曾相受，細看兩俱無有，寄語揩揹...