ログイン画面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* { margin: 0; パディング: 0; }
.all { 高さ: 600px; 幅: 1100ピクセル; マージン: 自動; 境界線: 1px #DCDCDC 実線; }
.s { 幅: 300px; 高さ: 20ピクセル; フロート: 右; マージントップ: 6px; }
.header { 幅: 1100px; 高さ: 100ピクセル; 背景色: rgb(255, 255, 255); フォントサイズ: 12px; マージン: 自動; 境界線: 1px #DCDCDC 実線; }
.a { 表示: インラインブロック; 幅: 130ピクセル; 高さ: 20ピクセル;
}
.nei { 表示: インラインブロック; 幅: 85ピクセル; 高さ: 20ピクセル; 境界線: 1px #DCDCDC 実線; }
.header>img {
マージン左: 30px;
マージントップ: 10px;
垂直配置: 中央;
}
.nei>img { 垂直配置: 中央; }
.header {
テキスト装飾: なし。
}
。右 {
幅: 396ピクセル;
高さ: 400ピクセル;
フロート: 右;
}
.righter { 幅: 350px; 高さ: 300ピクセル; マージントップ: 50px; }
.left { 幅: 700px; 高さ: 400ピクセル; フロート: 左; }
.left img { margin-left: 120px; マージントップ: 20px; }
.middle { 幅: 1100px; 高さ: 400ピクセル; 背景色: rgb(252, 252, 252); }
.right スパン { margin-left: 40px; フォントの太さ: 太字; 色: rgb(102, 102, 102); }
.right a { テキスト装飾: なし; マージン左: 145px; フォントサイズ: 12px; }
.one 入力 {
マージン左: 40px;
背景色: #FFFFFF;
背景: URL(Image/icon_02.gif) リピートなし 20px 20px;
背景位置: 20px;
高さ: 50ピクセル;
幅: 300ピクセル;
境界線: #DCDCDC 実線 1px;
}
.two input { margin-top: 15px; マージン左: 40px; 背景色: #FFFFFF; 背景: url(Image/lock.png) 繰り返しなし 20px 20px; 背景位置: 23px; 高さ: 50ピクセル; 幅: 300ピクセル; 境界線: #DCDCDC 実線 1px; }
.three input { margin-top: 20px; マージン左: 40px;
}
.three span { color: rgb(118, 118, 122); }
.three { フォントサイズ: 13px; カラー: rgb(118, 118, 122); }
.four input { margin-top: 15px; マージン左: 40px; 高さ: 50ピクセル; 幅: 300ピクセル; 境界半径: 3px; 背景色: rgb(255, 60, 60); フォントサイズ: 16px; 色: 白; 境界線: 0px; }
.five p { margin-top: 15px; マージン左: 40px; フォントサイズ: 12px; カラー: rgb(118, 118, 122); }
.right input::-webkit-input-placeholder {
フォントサイズ: 16px;
カラー: rgb(118, 118, 122);
}
.six img { margin-top: 15px; マージン左: 20px; 幅: 30ピクセル; 高さ: 30ピクセル; 垂直配置: 中央; }
.6 スパン img { margin-left: 15px; }
.6 スパン { margin-left: 25px; フォントサイズ: 12px; カラー: rgb(118, 118, 122); }
.eight img { 幅: 12px; 高さ: 12px; 垂直配置: 中央; マージン左: 0; }
.footer { 幅: 1100px; 高さ: 100ピクセル; 背景色: #FCFCFC; フォントサイズ: 12px; 色: #000000; テキスト整列: 中央; 行の高さ: 15px; } </style> </head> <body> <div class="all"> <div class="header"><img src="画像/ログインロゴ。
<img src="./Image/runbun.png">ヘルプセンター<img src="./Image/turnb.png"> </div> </div> </div>
<
div
class
="middle">
<div class="left"><img src="Image/loadimg.jpg"></div>
<div class="right">
<div class="righter">
<form action="#" method=" get">
<span>1haodian ユーザー ログイン</span><a href="登録ページ。html" target="_blank">注册账号</a><br />
<div class="one"><input type="text" name="username"
placeholder=" 邮箱/手机/用户名"><br /> </
div >
<div class="two"><input type="password" name="password"
placeholder=" 密码">
</div>
<div class="three"><input type="checkbox"
value="自動ログイン">自動ログイン<span> &n bsp; パスワードをお忘れですか? </span>
</div>
<div class="four"><input type="submit" value="login"></div>
<div class="five">
<p>より協力的な Web サイト アカウントのログイン < /p>
</div> <a
<div class="eight"><img src="./Image/turnb.png"></span></div> </form> </div> </div>
</div>
<
div
class
= "フッター"><br />上海 ICP No. 13044728 | Co-word B1.B2-20130004 | ビジネスライセンス<br /><br />
Copyright© Yihaodian Online Supermarket 2007-2016, All Rights Reserved
</div>
< /div>
</body>
</html>
登録インターフェース
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.all { height: 680px; 幅: 1300ピクセル; マージン: 自動; }
.s { 幅: 300px; 高さ: 20ピクセル; フロート: 右; マージントップ: 5px; }
.header { 幅: 1300px; 高さ: 100ピクセル; 背景色: rgb(255, 255, 255); フォントサイズ: 12px; マージン: 自動; 境界線: 1px #DCDCDC 実線; }
.a { 表示: インラインブロック; 幅: 130ピクセル; 高さ: 20ピクセル; }
.nei { 表示: インラインブロック; 幅: 85ピクセル; 高さ: 20ピクセル; 境界線: 1px #DCDCDC 実線; }
.header>img {
マージン左: 30px;
マージントップ: 10px;
垂直配置: 中央;
}
.nei>img { 垂直配置: 中央; }
.header a、
.ca { テキスト装飾: なし; }
.footer { 高さ: 580px; 幅: 1300ピクセル; 背景色: rgb(252, 252, 252); }
.main { 幅: 400px; 高さ: 550ピクセル; マージン左: 450px; 背景色: rgb(252, 252, 252); }
.main input { 幅: 360px; 高さ: 60ピクセル; マージントップ: 10px; }
.a2 入力 { 幅: 200px; 高さ: 60ピクセル; フロート: 左; }
.a3 入力 { 幅: 150px; 高さ: 66ピクセル; フロート: 左; マージン左: 10px; フォントサイズ: 16px; 色: 白; 背景色: rgb(87, 86, 95); 境界線: 0; フォントの太さ: 太字; }
.b 入力 { 幅: 360px; 高さ: 60ピクセル; マージントップ: 10px; }
.c { マージントップ: 15px; パディング左: 30px; }
.d 入力 { 色: 白; 背景色: rgb(255, 60, 60); 境界線: 0; フォントサイズ: 18px; }
.e { フォントサイズ: 14px; テキスト整列: 中央; }
.z { パディングトップ: 20px; マージン-ボトム: 10px; フォントサイズ: 25px; テキスト整列: 中央; }
.main input::-webkit-input-placeholder { padding-left: 20px; フォントサイズ: 16px; フォントの太さ: 太字; カラー: rgb(118, 118, 122); } </style> </head> <body> <div class="all"> <div class="header"> <img src="画像/ログインロゴ.
</div>
</div>
</div>
<div class="footer">
<div class="main">
<form action="#" method="get">
<div class="z">1号店注册</div>
<input type="text" placeholder="手机号">
<div class="a1">
<div class="a2"><input type="text" placeholder="手机号" ></div>
<div class="a3"><input type="button"value="確認コードの取得"></div>
</div>
<div class="b"><input type="text" placeholder="password"></div>
<input type="text" placeholder="confirmpassword">
<div class="c">クリックして登録すると、Yihaodian の<a href="#">「サービス契約」</a></div > に同意したことになります。
<div class="d"><input type="submit" value="同意書に同意して登録"></div>
<div class="e"><br />上海 ICP No. 13044728 | Co- word B1 .B2-20130004 | ビジネスライセンス<br /><br />
Copyright© Yihaodian Online Supermarket 2007-2016, All Rights Reserved</div>
</form>
</div>
</div>
</div>
< /body>
</html>