<menu id="ycqsw"></menu><nav id="ycqsw"><code id="ycqsw"></code></nav>
<dd id="ycqsw"><menu id="ycqsw"></menu></dd>
  • <nav id="ycqsw"></nav>
    <menu id="ycqsw"><strong id="ycqsw"></strong></menu>
    <xmp id="ycqsw"><nav id="ycqsw"></nav>
  • html登陸頁面代碼(網頁制作登錄注冊頁面)


    大家好,這篇文章給大家分享怎么樣設計一個簡單的會員登陸頁面

    話不多說,直接看效果圖:七小時帶你入門HTML+CSS網頁設計,簡單會員登陸頁面設計(五)

    簡單的會員登陸頁面

    html代碼:

    <div class="tpt-login">
    <h2>簡單的會員登陸頁面</h2>
    <form>
    <input type="text" name="name" placeholder="請輸入賬號">
    <input type="password" name="password" placeholder="請輸入密碼">
    <p>
    <span><i></i></span>我已閱讀并同意
    <a href="#" target="_blank"> 會員登陸協議</a>
    </p>
    <button>立即登錄</button>
    </form>
    </div>
    

    知識點:

    form標簽用于將input等表單元素標簽包起來,可以提交數據到服務器,比如文本字段、復選框、單選框、提交按鈕等等。input標簽包含類型、名稱等其他屬性,如type=”text”表示單行文本框、type=”password”表示密碼文本框、name=””表示標簽名稱、placeholder=””表示提示信息等等。

    從上面的效果圖來看,我們需要定義黑色背景,表單區域居中顯示,頭部是標題介紹,中間兩個表單元素分別輸入賬號和秘密,下方則是同意會員登陸協議和立即登陸按鈕。

    CSS代碼:

    首先我們用body來定義背景顏色:

    body {
     background: #252935;
    }
    
    

    給div命名一個tpt-login樣式名稱,來控制整個表單樣式,如定義高度和寬度為360像素、內邊距上下50像素,左右30像素、背景顏色為白色、8像素的邊角、最后用position: absolute絕對定位來使整個區域左右垂直居中:

    .tpt-login {
    	width: 360px;
    	height: 360px;
    	padding: 50px 30px;
    	background: #FFF;
    	border-radius: 8px;
    	margin: auto;
    	position: absolute;
    	top: 0;
    	left: 0;
    	bottom: 0;
    	right: 0;
    }
    

    頭部標題介紹用h2定義,字體大小為28像素,顏色為黑色并居中等:

    .tpt-login h2 {
    	font-size: 28px;
    	font-weight: 500;
    	padding-bottom: 50px;
    	text-align: center;
    	color: #333;
    }
    

    中間表單元素需要定義寬度和行高,字體大小為16像素,背景顏色為灰色等:

    .tpt-login input {
    	width: 340px;
    	padding: 0 10px;
    	margin-bottom: 20px;
    	height: 55px;
    	line-height: 55px;
    	border: 0;
    	background: #f5f5f5;
    	font-size: 16px;
    	color: #666;
    }
    

    下方則是同意會員登陸協議和立即登陸按鈕,我就不詳細介紹了,直接看代碼:

    .tpt-login button {
    	display: inline-block;
    	height: 50px;
    	line-height: 50px;
    	width: 360px;
    	background: #1e9fff;
    	color: #fff;
    	font-size: 16px;
    	margin-top: 20px;
    	border: none;
    	border-radius: 2px;
    	cursor: pointer;
    }
    .tpt-login p {
    	font-size: 14px;
    	color: #777;
    }
    .tpt-login a {
    	font-size: 14px;
    	color: #3581b9;
    }
    .tpt-login span {
    	position: relative;
    	display: inline-block;
    	width: 7px;
    	height: 7px;
    	border-radius: 100%;
    	border: 1px solid #ff5722;
    	padding: 4px;
    	top: 4px;
    	margin-right: 6px;
    }
    .tpt-login i {
    	position: absolute;
    	display: inline-block;
    	width: 7px;
    	height: 7px;
    	border-radius: 100%;
    	background: #ff5722;
    }
    

    這樣一個簡單的會員登陸頁面就完成了,當然,布局的方式有很多種,這只是其中一個方法,也歡迎大家留言分享一下其他的布局方式,謝謝觀看!??!

    版權聲明:本文內容由互聯網用戶自發貢獻,該文觀點僅代表作者本人。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容, 請發送郵件至 舉報,一經查實,本站將立刻刪除。

    發表評論

    登錄后才能評論
    国产精品区一区二区免费