背景滾動視差的乙個頁面 仿雅虎郵箱主頁

2021-07-04 14:54:17 字數 1764 閱讀 4269

自己打算以後可以把這個作為自己官方**設計的乙個標準,雅虎這個介面的**是然後自己仿照這個做了乙個。

一開始很多問題,注意要加上

backgroung-attachment: fixed

這樣才會沒有問題了。

lang="en">

charset="utf-8">

name="viewport"

content="width=divice-width,initial-scale=0.85,user-scalable=no,maximum-scale=0.85">

夢想不止步title>

* html

.div1

.div2

.div3

.div4

.div5

*,body

.dialog

.show

style>

head>

style="width: 100%;height:160px;text-align: center;padding-top: 80px;background-color: #00bfff;">

這只是乙個簡單的嘗試h1>

div>

style="width:100%;height: 400px"

class="div1"

id="div1">

div>

class="dialog"

style="background-color: #00ee00">

這只是乙個簡單的嘗試h1>

div>

class="show div2"

id="div2">

div>

class="dialog"

style="background-color: #ff00ff">

這只是乙個簡單的嘗試h1>

div>

class="show div3"

id="div3">

div>

class="dialog"

style="background-color: #ee7621">

這只是乙個簡單的嘗試h1>

div>

class="show div4"

id="div4">

div>

class="dialog"

style="background-color: #b23aee">

這只是乙個簡單的嘗試h1>

div>

class="show div5"

id="div5">

div>

window.onload=function

() }

if (scrolltop2 > -720 && scrolltop > 200)

}if (scrolltop3 > -720) }

if (scrolltop4 > -720)

}if (scrolltop5 > -720)

}scrolltop1d=scrolltop1;

scrolltop2d=scrolltop2;

scrolltop3d=scrolltop3;

scrolltop4d=scrolltop4;

scrolltop5d=scrolltop5;}}

script>

body>

html>

前端學習 仿寫乙個知乎頁面

並不適合 還是老老實實寫吧 冗談冗談 3.看一下注意的點 vertical align 用來指定行內元素 inline 或 單元格 table cell 元素的垂直對齊方式 注意 vertical align 只對行內元素 單元格元素生效 不能用它垂直對齊塊級元素 1.實現水平居中 div中img居...

乙個頁面中實現多個滾動條

原 這裡是table滾動id 標題簡介 作者 1 這是一篇標題很長的文章用來測試 的測試標題 這是一篇標題很長的文章用來測試 不被太多列擠得變形的描述.管理員 1 這是一篇標題很長的文章用來測試 的測試標題 這是一篇標題很長的文章用來測試 不被太多列擠得變形的描述.管理員 test測試test測試t...

模仿Parallax寫乙個簡單的視差效果

前言 之前寫專案的時候乙個需求效果是兩個元素需要有乙個視差特效,使用的是jquery的parallax外掛程式,只是為了學習一下,主要原理就是通過監聽滑鼠移動事件,來修改指定元素的left,top值。樣例如下 dom結構 希望哪個元素有視差效果,就設定clss類為parallax item,設定da...