案例的知識點主要3個方面,一個是html5的結構,一個是CSS3樣式,一個是頁面居中的定位。
1.html5中的屬性(placeholder)實現文本框的提示信息,required屬性設置文本框信息是必填的。
2. CSS3的屬性線性漸變(linear-gradient)實現頁面(body)區域的背景色。
3.通過絕對定位(position:absolute)和CSS3中的變形(transform)實現div的頁面居中定位。
案例的效果如下:
網頁login.html的代碼如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/page.css"/>
</head>
<body>
<div class="login1">
<h1>后臺管理登陸</h1>
<div>
<form>
<p>
<input type="text" placeholder="請輸入登錄帳號" required="required"/>
</p>
<p>
<input type="password" placeholder="請輸入登錄密碼" required="required"/>
</p>
<p>
<button type="submit">登陸</button>
</p>
</form>
</div>
</div>
</body>
</html>
外部樣式文件page.css的代碼如下:
說明:在外部樣式(page.css)中,類(.login1)控制的div定位如果還不太理解的話,請參看下面的圖示。
至此,案例制作完成。
app 內嵌H5頁面,個人中心頁面模板,包含 列表 按鈕 圖片 icon 搜索 布局 上傳 對話框 。
手機演示地址:http://www.17sucai.com/preview/10221/2017-01-20/ceshi/index.html — my-read.html — my-secure.html — my-put.html — my-up.html
手機演示地址:http://www.17sucai.com/pins/demoshow/22887
手機版大氣信息管理系統界面模板
手機演示地址:http://www.17sucai.com/pins/demoshow/22475
藍色的手機登錄模板
手機演示地址:http://www.17sucai.com/pins/demoshow/22480
蘋果風格
手機演示地址:http://www.17sucai.com/pins/demoshow/20946
*請認真填寫需求信息,我們會在24小時內與您取得聯系。