web端登录页设计，web高级登录界面设计代码

今天小编为大家分享生活中的小常识、日常问题解答等相关内容，希望能够帮助大家。

1、创建新的html文档。

2、准备好你需要的图标。

3、写hmtl代码。

4、div id='wrapper'

5、div id='header'

6、 div id='logo'/div

7、 div id='heading'

8、Div id='title '后台管理系统/div

9、 div id='subTitle'Ver 1.0/div

10、 /div

11、/div

12、div id='main'

13、 div id='mainBg'

14、 div id='mainPanel'

15、 div id='left'

16、 div id='image'/div

17、 /div

18、 div id='right'

19、div id=' welcome ' span id=' welcome-text '管不间断空格理不间断空格登不间断空格录/span /div

20、div id='用户名span class='item '用户名：/span span

21、 input type='text' name='userName' class='form-input'

22、 /span /div

23、div id='用户密码span class='item '密nbspnbspnbsp码：/span span class='input '

24、 input type='password' name='password' class='form-input'

25、 /span /div

26、div id='用户校验码span class='item '验证码：/span span class='input '

27、 input type='text' name='checkCode' class='form-input'

28、 /span span class='checkcode-span'/span /div

29、Div id=' error prompt' span id=' prompt text' Here is the error prompt /span /div.

30、 div id='button-group'

31、Input Type=' Submit' Class='btn' Value=' Submit'/

32、输入类型='reset' class='btn' value='重置'/

33、 /div

34、 /div

35、 /div

36、 /div

37、/div

38、div id='footer'

39、Div id='text' Copyright 2009-2011 Baidu Jingyan Copyright /div

40、/div

41、/div

42、写css代码。

43、style

44、body { margin: 0px; padding: 0px; overflow: hidden; }

45、#wrapper { position: absolute; width: 100%; height: 100%; min-width: 1280px; min-height: 680px; overflow-x: hidden; overflow-y: hidden; background-image: -moz-linear-gradient(top, #77D1F6, #2F368F); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #77D1F6), color-stop(1, #2F368F)); }

46、#header { height: 100px; width: 100%; }

47、#logo { position: absolute; float: left; margin-left: 5%; margin-top: 30px; height: 40px; width: 160px; text-align: center; }

48、#heading { position: relative; float: left; margin-left: 20%; margin-top: -18px; height: 110px; width: 60%; border-radius: 18px; background-color: #1C75BC; opacity: 0.6; }

49、# heading # title { margin-top:40px； Text alignment: centered; Font series: Microsoft Yahei; Font size: 24px Font thickness: bold; }

50、#heading #subTitle { margin-top: 10px; text-align: center; font-family: Courier New; }

51、#main { margin-top: 20px; height: 500px; width: 100%; }

52、#mainBg { position: relative; float: left; margin-left: 20%; margin-top: 0px; height: 500px; width: 60%; border-radius: 18px; background-color: #000000; opacity: 0.5; }

53、#mainPanel { position: relative; margin: 25px; height: 450px; border-radius: 18px; background-image: -moz-linear-gradient(top, #EBEBEB, #BFBFBF); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #EBEBEB), color-stop(1, #BFBFBF)); }

54、#mainPanel #left { float: left; border-right: 2px solid #F6F6F6; position: relative; top: 10%; height: 80%; width: 49%; border-right-style: groove; }

55、#mainPanel #image { position: relative; height: 256px; width: 256px; left: 15%; top: 12%; background-image: url('./images/admin.png'); }

56、#mainPanel #right { float: left; position: relative; height: 90%; width: 49%; top: 5%; }

57、#welcome { margin-top: 20px; height: 60px; width: 100%; vertical-align: middle; display: inline-block; line-height: 60px; text-align: center; }

58、# welcome # welcome-text { font-size:38px；字体粗细：粗体；字体系列：微软雅黑；文-影：0 1px 1px # f6f 6 f 6}

59、#user-name { height: 35px; width: 100%; margin-top: 20px; vertical-align: middle; display: inline-block; line-height: 35px; }

60、#user-password { margin-top: 20px; height: 35px; width: 100%; vertical-align: middle; display: inline-block; line-height: 35px; }

61、#user-checkcode { margin-top: 20px; height: 35px; width: 100%; vertical-align: middle; display: inline-block; line-height: 35px; }

62、#button-group { margin-top: 10px; height: 35px; width: 100%; vertical-align: middle; display: inline-block; line-height: 35px; text-align: center; }

63、#error-tip { margin-top: 20px; margin-left: 5%; height: 40px; width: 90%; vertical-align: middle; display: inline-block; line-height: 35px; text-align: center; border-bottom: 2px solid #F6F6F6; border-bottom-style: groove; }

64、# error-tip # tip-text { font-size:18px； Font thickness: bold; Font series: Microsoft Yahei; Color: red; }

65、. item { margin-left:20px； Font series: Microsoft Yahei; Font size: 20px Font thickness: bold; Floating: left; Width: 80px margin-top: 3px; Text alignment: centered; text-shadow:0 1px 1px # f6f 6 f 6； }

66、.input { vertical-align: middle; display: inline-block; }

67、#checkcode-img { margin-top: 3px; height: 20px; width: 60px; }

68、.form-input { height: 20px; }

69、.btn { border: 1px solid #cccccc; cursor: pointer; margin: 10px 5px; height: 40px; width: 80px; text-align: center; border-radius: 4px; border-color: #636263 #464647 #A1A3A5; text-shadow: 0 1px 1px #F6F6F6; background-image: -moz-linear-gradient(center top, #D9D9D9, #A6A6A6 49%, #A6A6A6 50%); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #D9D9D9), color-stop(1, #A6A6A6)); }

70、#footer { margin-top: 20px; width: 100%; }

71、# footer # text { text-align:center； Font size: 14px font series: Microsoft Yahei; Font thickness: bold; }

72、/style

73、代码的整体结构。

74、检查效果。

本文到此结束，希望对大家有所帮助。

Www.yiLeen.com.CN艺莲園提供生活百科,美食,购物,旅游,房产,交通,家居,数码,科技,财经,教育,健康,娱乐,历史,汽车,生活消费门户网站