網頁製作：一個簡易美觀的登入介面 - 程式前沿

在這個html裡面，我們主要對登入介面進行了整體佈局規劃，利用div將內部的視窗、圖片、標籤、輸入框、按鈕、連結進行分塊，這樣方便我們之後用css對其 ... 程式語言前端開發IOS開發Android開發雲端運算人工智慧伺服器搜尋資料庫軟體開發工具網頁製作：一個簡易美觀的登入介面2018.07.20程式語言css,WEB前端開發,介面,多頁網頁製作,登入介面,網頁,網頁製作,網頁製作從零開始,資料分析網頁製作,部落格網頁製作HOME程式語言網頁製作：一個簡易美觀的登入介面Advertisement這次來總結一下公司的Task1實現一個登入介面。

登入介面其實在大三的時候就有做過，但是當時做的介面超級low，主要區別在於有無css，由於公司的設計要求，對於該介面的很多細節處理實在不容易。

所以，還是想要寫點東西記錄一下。

先截個圖，展示一下效果吧：然後我們看一下程式碼：在我們做一個頁面之前，要先想好他的一個整體佈局，也就是我們這裡面的login.html主頁面，大致結構如下：接下來，我們先上程式碼，看一下具體實現方法：login.html

說明：在這個html裡面，我們主要對登入介面進行了整體佈局規劃，利用div將內部的視窗、圖片、標籤、輸入框、按鈕、連結進行分塊，這樣方便我們之後用css對其進行準確的調位置、調邊距。

同時也對重要的幾個東西設定了id和class，這也是方便我們之後用css對其進行準確的調顏色、調字型。

login.js/** *CreatedbyKayon2016/3/8. */ functionlogin(){ varusername=document.getElementById("username"); varpass=document.getElementById("password"); if(username.value==""){ alert("請輸入使用者名稱"); }elseif(pass.value==""){ alert("請輸入密碼"); }elseif(username.value=="admin"&&pass.value=="123456"){ window.location.href="welcome.html"; }else{ alert("請輸入正確的使用者名稱和密碼！") } }說明：這個js是用來判斷使用者名稱和密碼是否正確的，實現起來還算簡單。

可以記一下，介面跳轉的語句：window.location.href=”welcome.html”;其次就是對輸入框的返回值的獲取，這裡我們用到了document.getElementById的知識點，通過document的物件方法來獲得指定ID值的物件。

這裡要注意是byId，所以前面的html裡的username和password要設id值，而不是name值，不然獲取不到的！關於document的介紹可以點選該連結：詳解JavaScriptDocument物件login.cssbody{ background-image:url("images/login/loginBac.jpg");; background-size:100%; background-repeat:no-repeat; } #login_frame{ width:400px; height:260px; padding:13px; position:absolute; left:50%; top:50%; margin-left:-200px; margin-top:-200px; background-color:rgba(240,255,255,0.5); border-radius:10px; text-align:center; } formp>*{ display:inline-block; vertical-align:middle; } #image_logo{ margin-top:22px; } .label_input{ font-size:14px; font-family:宋體; width:65px; height:28px; line-height:28px; text-align:center; color:white; background-color:#3CD8FF; border-top-left-radius:5px; border-bottom-left-radius:5px; } .text_field{ width:278px; height:28px; border-top-right-radius:5px; border-bottom-right-radius:5px; border:0; } #btn_login{ font-size:14px; font-family:宋體; width:120px; height:28px; line-height:28px; text-align:center; color:white; background-color:#3BD9FF; border-radius:6px; border:0; float:left; } #forget_pwd{ font-size:12px; color:white; text-decoration:none; position:relative; float:right; top:5px; } #forget_pwd:hover{ color:blue; text-decoration:underline; } #login_control{ padding:028px; } 說明：這個css就是最難部分了，介面之所以能達到如此美觀的效果，比如登入的視窗要在螢幕居中顯示、背景透明、框的四個角要有一點弧度、登入按鈕與輸入框上下對齊等等。

摘要：①讓背景圖片拉伸且佔據整個螢幕：background-size:100%;background-repeat:no-repeat;②讓一個div塊在整個螢幕居中：width:400px;height:260px;padding:13px;position:absolute;left:50%;top:50%;margin-left:-200px;margin-top:-200px(其中的margin-left:和margin-top最好是設為width和height的一半值，那樣是完全居中的效果，當然記得前面要加個負號！)③設定圓角：text-align:center;border-top-left-radius:5px;border-bottom-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;④設定背景顏色且加透明效果：background-color:rgba(240,255,255,0.5);⑤讓輸入框和label對齊居中：formp>*{  display:inline-block;  vertical-align:middle;}⑥去除連結的下劃線：text-decoration:underline;7、給一個label或者button裡面的文字設定居中：  width:120px;  height:28px;  line-height:28px;  text-align:center;（需要設定line-height其值等於height也就是字的行高等於它所在的label、button的高！）8、給“登入”和“忘記密碼”的中間設定間距：先在html裡給他們繫結一塊div：      忘記密碼？ 然後在css裡設定一下padding：#login_control{  padding:028px;}該例子的程式碼為您提供免費下載，下載地址：點選開啟連結（另外，該案列的升級版，也就是稍微複雜一點的登入介面，可點此處下載程式碼：點選開啟連結2.0版）Advertisement写评论取消回覆很抱歉，必須登入網站才能發佈留言。

近期文章Spark入門（一）用SparkShell初嘗Spark滋味2019.12.08Spark入門（二）如何用Idea運行我們的Spark項目2019.12.08Spark入門（三）Spark經典的單詞統計2019.12.08Spark入門（四）Spark的map、flatMap、mapToPair2019.12.08Spark入門（五）Spark的reduce和reduceByKey2019.12.08Spark入門（六）Spark的combineByKey、sortBykey2019.12.08Spark入門（七）Spark的intersection、subtract、union和distinct2019.12.08Spark實戰尋找5億次訪問中，訪問次數最多的人2019.12.08Spark實戰搭建我們的Spark分佈式架構2019.12.08【機器學習】深度學習開發環境搭建2019.12.08AdvertisementAdvertisement