Div+CSS仿支付宝登录页面

CSS代码：

1. body{     
2.     margin: 0;     
3.     padding: 0;     
4.     background-color: #f1f4f5;     
5.     font: 12px/1.5 tahoma,arial,宋体;     
6. }     
7. a{     
8.     text-decoration: none;     
9.     color: #6c6c6c;     
10. }     
11. #top{     
12.     height: 25px;     
13.     background: #fafafa;     
14.     color: #6c6c6c;     
15.     font: 12px/1.5 tahoma,arial,宋体;     
16. }     
17. #top-content{     
18.     width: 990px;     
19.     height: 20px;     
20.     padding-top: 2px;     
21.     margin: 0 auto;     
22. }     
23. #fn-left{     
24.     width: 90px;     
25.     height: 20px;     
26.     display: inline     
27. }     
28. #fn-right1{     
29.     width: 268px;     
30.     height: 18px;     
31.     float: rightright;     
32.     display: inline;     
33. }     
34. #nav-content{     
35.     padding-top: 20px;     
36.     width: 990px;     
37.     margin: 0 auto;     
38. }     
39. #nav{     
40.     height: 80px;     
41.     background-color: #FA6602;     
42. }     
43. #nav-logo{     
44.     padding-top: 8px;     
45.     float: left;     
46.     display: inline;     
47.     width: 239px;     
48.     height: 51px;     
49. }     
50. #fn-right2{     
51.     float: rightright;     
52.     display: inline;     
53.     width: 540px;     
54.     height: 50px;     
55. }     
56. #link{     
57.     width: 540px;     
58.     height: 21px;     
59.     list-style: none;     
60.     font-size: 14px;     
61.      
62.      
63. }     
64. #link li{     
65.     float: left;     
66.     display: block;     
67.     text-align: center;     
68.     width: 90px;     
69.     z-index: 99;     
70.     position: relative;     
71.     height: 35px;     
72.          
73. }     
74. #main{     
75.     width: 1349px;     
76.     height: 860px;     
77.     background: #f7f4f0;     
78.     padding-top: 30px;     
79.     padding-bottom: 15px;     
80.      
81.      
82. }     
83. #container{     
84.     width: 990px;     
85.     margin: 0 auto;     
86.     background: url("https://i.alipayobjects.com/e/201201/2NAaUdjkAN.jpg") repeat-y scroll 0 0 #FFFFFF;     
87. }     
88. #sidebar{     
89.     float: left;     
90.     display: inline;     
91.     width: 190px;     
92.     background-color: #FCFCFC;     
93. }     
94. .sidebar-title{     
95.     color: #666;     
96.     font-size: 14px;     
97.     font-weight: bold;     
98.     margin: 10px 0 10px 25px;     
99.      
100.      
101. }     
102. .sidebar-ul{     
103.     padding-left: 25px;     
104.     list-style: none;     
105. }     
106. .sidebar-ul li{     
107.     margin-right: 20px;     
108.     border-top: 1px solid #eee;     
109.     height: 40px;     
110. }     
111. .sidebar-ul li.counter a{     
112.     color: #f60;     
113. }     
114. #content{     
115.     float: rightright;     
116.     display: inline;     
117.     width: 740px;     
118.     padding: 30px 30px 50px;     
119.     background-color: #fff;     
120. }     
121. .pagetitle{     
122.     background: url(https://i.alipayobjects.com/e/201201/2NAWAhzH87.jpg) no-repeat 0 -222px;     
123.     height: 37px;     
124. }     
125. .lianxicontent{     
126.     margin-top: 30px;     
127.     color: #595959;     
128. }     
129. .notice{     
130.     padding: 5px 10px;     
131.     background-color: #fff6d9;     
132.     color: #f60;     
133. }     
134. .hz{     
135.     line-height: 30px;     
136.     margin-top: 10px;     
137.     padding-bottom: 20px;     
138.     border-bottom: 1px dashed #ccc;     
139. }     
140. .title{     
141.     font-size: 14px;     
142.     font-weight: bold;     
143. }     
144. .others{     
145.     margin-top: 20px;     
146.     list-style: none;     
147. }     
148. .others-item{     
149.     line-height: 24px;     
150.     padding: 0 30px 20px 0;     
151.     width: 340px;     
152. }     
153. .title{     
154.     font-weight: bold;     
155.     font-size: 14px;     
156. }     
157. #hehe{     
158.     float: left;     
159.     display: inline;     
160. }     
161.      
162.   

总结：

target="_blank"的作用是在新的页面上打开超链接

css中font-weight: bold;表示字体加粗

list-style: none;的作用讲的通俗点就是去掉ul li前的黑点

text-align: center;表示文字在水平方向上居中

以上就是本文的全部内容，希望对大家的学习有所帮助。

学习工具

代数计算器

三角函数

解析几何

立体几何

知识解答

教育知识

百科知识

生活知识

常识知识

写作必备

作文大全

作文素材

句子大全

实用范文

关于我们

关于我们

联系我们

网站地图

名师互学网交流群

名师互学网客服

名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号

关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号：晋ICP备2021003244-6号