模仿網頁
准備工作
- 下載寫網頁的工具,這里我使用的是VS Code,可以直接去官網下。
- 選擇要模仿的網頁:這里選擇的是學校的郵件系統:http://mail.swpu.edu.cn/,也可以選擇自己想要模仿的界面,步驟差不多
開始模仿
如果完全無前端知識,我覺得能以最快的方式,先看到模仿效果,有很大的激勵效果。接下來就以比較簡單的方式先完成一個界面的制作,再詳細解釋每一部分的界面和代碼的對應關系。
首先要創建一個項目,網頁項目的創建比較簡單,一個文件夾就可以搞定,自己隨便在某一個目錄下新建一個文件夾,然后打開已經下好的vs code,vscode的漢化網上有簡單教程,步驟還是蠻簡單的。
簡單說一下:在下面所示的輸入框中輸入相應的插件名字,然后安裝就可以了。一個是漢化,一個是用來運行我們的html網頁。這里我已經安裝了,所以顯示的是已啟用。
文件->打開文件夾,然后就找到剛新建的目錄打開就行。
然后創建兩個文件,命名隨意,但是后綴需要一個.html 和一個 .css 雖然 .css文件可以不需要,但是為了代碼看上去比較簡潔,所以還是分開比較好。
這里先說一下這兩個文件大致的作用,html里面的代碼就是網頁的框架,由一個一個“積木”搭建起來的整個網頁的結構。Css里面的代碼則是決定積木的位置顯示方式顏色之類的外在屬性。
打開選擇的網頁,右擊查看源代碼
可以看到如下界面:
接下來在紅框圈出來的地方,我們來復制一些代碼到自己的項目里
找到style這個英文,復制<style></style>中間的部分,首尾的<style></style>不要復制。復制到項目的css文件里。也就是復制10-107行的內容
然后在項目里會看到有一個錯誤
給個0值就可以
然后打開html文件,打出一個!,生成基礎代碼
然后去網頁代碼里繼續復制我們需要的代碼,也是找到body這個英文部分,復制中間的部分即可,粘貼到html文件中對應的<body></body>中間
然后在下圖所示的地方加上代碼 <link rel="stylesheet" href="style.css">,也就是把那些外在屬性的資源加載進來。
Ctrl +s 保存一下html的代碼以后,在html的界面,我們按alt+B就可以打開這個我們寫的界面了,前提是安裝了open in browser。
大家可以看到,已經有了大致框架了,但是和真實的網頁還是差點啥是吧,因為外在的那些屬性,也就是css文件中,我們復制的位置啊大小啊之類的可以直接被解析,但是有一些圖片是用url從外部讀取的,所以我們現在還缺乏圖片文件。
按照新建文件的方式,旁邊就是新建文件夾,我們新建一個images文件夾,去存放圖片
先對比一下和原網站的區別
首先對比一下頭部,可以看到,我們做的沒有圖片顯示
接下來就去原網站把圖片文件下載下來,下載到前面我們新建的image文件夾下
然后去代碼里找到這個圖片被調用的位置
把原有的路徑變成我們自己的路徑,這里用相對路徑就可以啦,索引到我們剛下載的圖片,只要你跟我的images文件在這個項目文件相同的位置,照着寫就可以
這樣頭部就完美模仿出來了
然后再看一下尾部已經完美模仿出來了。
最后來看一下中間部分,也就是還原步驟比較多的部分,先來看一下對比圖:
這個時候,我們再繼續嘗試用圖片另存為的方式已經不行了,接下來就介紹一下比較正規的方式去獲取元素,按F12進入開發者界面
進入network選項,然后刷新一下瀏覽器,重新加載資源,就可以看到Name框,接下來再下面找到我們需要的圖片。
右擊圖片,選擇,open image in new tab,就會再打開一個只顯示這張圖片的網頁,
我們就又可以圖片另存為了
就這樣,我們把所有的圖片文件都下載下來
這些就是我們下載下來的圖片資源啦
接下來去css文件中,ctrl+f,按照文件名字查找各個圖片原本被調用的位置
找到以后按照前面的方式替換成我們自己的路徑,其他圖片文件也是一樣的操作
需要注意的是有些圖片在我們復制源文件的時候和我們下載圖片資源的時候是不一樣的,比如主要的背景圖,我復制的代碼時05,但是下載的是04,這個大家靈活變通一下就可以了,因為后台加載的圖片每次應該都是隨機的。
然后我們再來看一下我們自己的網頁和原始網頁的對比
可以看出來已經很像了對不對,接下來我們就處理細節
首先要先定位到還有問題的元素,這部分和原始網頁還不太一樣。
按F12進入開發者模式,
到elements下,用鼠標划過代碼,左邊對應的界面元素就會有被選中的效果,然后我們一層一層把代碼展開,再繼續定位到我們需要修改的元素
在html代碼里找到對應的地方
然后我們可以看到這是一個列表元素li,之前有提到html就是一個網頁的大致框架,就是有哪些積木,li就是一種類型的積木,積木會有一些屬性,onclick是定義這個元素被點擊后的函數,id就是定義一下這個元素的id為via_acct,可以用id來索引到這個元素
因為是簡單模仿,所以我們可以看出來差別就是一個背景色
前面也說過了顏色這些可以在css文件中寫
具體的修改需要去系統的學習一下css 的知識了
這里我就直接給出如何修改,因為有一個樣式正好可以用,所以直接修改成前面那個就可以了。
我們再來對比一下
已經非常接近成功了
接下來界面上還差一點需要修改的,就是輸入框的默認值,這個修改起來也是蠻簡單的
把下划線去掉就可以了,這是html語言版本的不同,html5中應該寫成placeholder
至此我們的界面部分就完成拉
如果已經學習過css和html5,我們可以對前面直接復制粘貼的代碼進行一下精簡,只保留需要的部分即可。以及加上一些自己需要做出的修改即可,樣式css可以直接復用,既方便,又能更多的復現原來的網頁中自己想要的效果。
最后我把html中的文件精簡為如下:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> </script> </head> <body> <div class="t"> <div class="h"> <div class="logo"><img src="images/login_logo.png" /></div> <a href="" target="_blank" class="help">幫助</a> </div> </div> <div class="c"> <div class="box" style="right:60px; top:60px;" id="box"> <ul class="tab" id="tab"> <li class="current">帳號登錄</li> <li class="dragbar" id="dragbar"></li> </ul> <!-- 賬號密碼登錄--> <div class="boxc" id="tab_via_acct"> <h3>用戶登錄</h3> <div class="text_item"> <input type="text" class="text" id="user" style="ime-mode:disabled" autocomplete="off" placeholder="用戶名" onfocus="this.className='text_f'" onblur="this.className='text'" /> <div class="pop" style="display:none;" id="pop"></div> </div> <form name='form_login' method="post" action=""> <div class="text_item"> <input type="hidden" class="text" name="user" value="" /> <input type="password" class="text" id="usermsg" name="password" placeholder="密碼" onfocus="this.className='text_f'" onblur="this.className='text'" /> </div> <div class="bl"> <span style="float:left"> <input type="hidden" name="login_ssl" value="0" /> <p id="tip" style="color:red;font-family:宋體;clear: both;"></p> </span> <span class="blt"> <a href="" target="_self">忘記密碼</a> </span> </div> <div class="btnb"> <!-- 登錄按鈕 --> <input type="button" name="submit" class="btn" value="登 錄" style="float:right" onclick="confire()"/> <div style="clear:both"></div> </div> </form> </div> </div> <div class="f" id="f" style="display:none;"></div> <div class="login_drag" id="drag_target"></div> </div> <div class="b">西南石油大學</div> </body> </html>
Css文件可以不用精簡,直接復用
接下來就是添加驗證用戶的靜態腳本代碼了
具體需要學習一下js,我這里也只給出代碼部分
這里我直接寫在了head里面,也可以像css一樣從外部鏈入。

head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="style.css"> <script> function confire() { var username=document.getElementById("user").value; var spanmsg=document.getElementById("usermsg").value; var tipelement=document.getElementById("tip"); if(username.length==0|spanmsg.length==0) { tipelement.innerText=("用戶名或密碼不能為空!"); return; } if(username=="tom"&spanmsg=="123") { window.open(); } } </script> </head>
成果展示
當密碼和用戶名正確的時候,我打開了一個空白界面
基本上這個網頁就算是完成了
簡單來分析一下網頁的結構
然后可以展開每一部分,繼續解析結構,然后就可以自己按照大致的結構去自己模仿了。
碼雲地址
https://gitee.com/MavisLuo/java_ee