實現花瓣登陸靜態頁面

2022-01-11 00:01:31 字數 4590 閱讀 5441

思路

花瓣網

1、對頁面進行分析

3、對頁面尺寸進行分析

4、實現

將頁面素材儲存到本地,方法如下圖

頁面尺寸進行分析

只做了大概得尺寸,尺寸獲取方法,使用截圖得方法獲取寬和高,注意獲取過程中得大小不能有變化。將最大化後獲取尺寸

實現

寫乙個元素,緊接著就css付樣式

html實現

>花瓣

title

>

7<

meta

name

="viewport"

content

="width=device-width, initial-scale=1"

>

8<

link

rel="stylesheet"

type

="text/css"

media

="screen"

href

="index.css"

/>

9head

>

10<

body

>

11<

div

id="login-frame"

>

12<

div

id="main"

>

13<

div

id="logo"

>

div>

14<

div

class

="lable text-1"

>使用第三方賬號登陸

div>

15<

div

class

="other-login"

>

16<

ul>

17<

li><

a title

="微博"

class

="weibo"

href

="">

a>

li>

18<

li><

a title

="qq"

class

="qq"

href

="">

a>

li>

19<

li><

a title

class

="wechat"

href

="">

a>

li>

20<

li><

a title

="豆瓣"

class

="douban"

href

="">

a>

li>

21<

li><

a title

="人人"

class

="renren"

href

="">

a>

li>

22ul

>

23<

div

class

="clearn"

>

div>

24div

>

25<

div

class

="lable text-2"

>使用手機/郵箱登陸

div>

26<

form

class

="mail-login"

action

="login"

method

="post"

>

27<

input

id="email"

name

="email"

type

="text"

placeholder

="輸入手機號或郵箱"

>

28<

input

type

="password"

name

="password"

placeholder

="密碼"

>

29<

a id

="btn-login"

href

=""type

="button"

onclick

="return href"

>

30<

span

class

="text"

>登 陸

span

>31a

>

32form

>

33<

div

id="forget-pwd"

>

34<

a class

="forget-pwd"

href

="#"

>忘記密碼》

a>

35div

>

36<

div

id="register"

>

37<

span

class

="no-accounter"

>

span

>還沒有花瓣賬號?

span

>

38<

a class

="register"

href

="#"

>點選註冊》

a>

39div

>

40div

>

41div

>

4243

body

>

44html

>

css樣式

1

html,body56

body910

.clearn

1314

#login-frame

2021

#main

2425

#logo

3536

.lable

4344

.lable::before

52.lable::after

6061

.other-login

65.other-login>ul>li

72.other-login>ul>li>a

79.weibo:hover

82.qq

8586

background-position:-80px -80px;

87 }

88.wechat

91.wechat:hover

94.douban

97.douban:hover

100.renren

103.renren:hover

106107

.text-2

110111

#main.mail-login

115116

#email

119.mail-login>input

129130

#btn-login

142#btn-login:hover

145146

#register-forgetpsd

150.forget-pwd,.register

156.forget-pwd:hover,.register:hover

159160

#register

163.register

166.no-accounter

結果

js php實現靜態頁面實時呼叫使用者登陸狀態的方法

在程式開發中,經常會把頁面做成html的靜態形式,這樣可以減輕伺服器負載,但是也存在乙個問題就是當註冊使用者登陸時,要在html頁面顯txbthk 示登陸成功或需要登陸的提示,這樣我們就必須想其它辦法來實現了,下面我們就是利用js php來例項的,當然還有ajax也可以實現,如下 複製 如下 i c...

頁面是否登陸問題

第一種 在js裡邊寫 protected void page load object sender,eventargs e 是否登入驗證 function loginfun 第二種 每個頁面寫上這個 protected void page load object sender,eventargs e...

curl登陸後模擬登陸並訪問登陸後的頁面

header content type textml charset utf 8 採集的資訊需要先登入的就要先模擬登入 設定cookie儲存路徑 cookie path ch curl init 組裝使用者名稱和密碼 info username 141391000914 info password ...