用html和css创建一个最基本的网页

1.登录页面

2.主网页

3.副网页

 代码部分（主网页）：

html:

css部分：

1. body {
2.     width: 1400px;
3.     padding: 0;
4.     margin: 0 auto;
5.     border: 1px solid #dcd6d6;
6. }
8. .w {
9.     width: 1200px;
10.     margin: 0 auto;
11. }
13. .fl {
14.     float: left;
15. }
16. 
     
17. .fr {
19.     float: right;
20. }
22. .shortcut {
23.     height: 32px;
24.     background-color: #f1f1f1;
25.     line-height: 32px;
26. }
28. .shortcut ul li {
29.     float: left;
30.     list-style: none;
31.     margin-top: -18px;
32. }
34. .shortcut ul li a {
35.     text-decoration: none;
36. }
38. /* .shortcut ul li:hover {
39.     color: brown;
40. } */
41. .shortcut .fr ul li:nth-child(even) {
42.     width: 1px;
43.     height: 12px;
44.     background-color: #666;
45.     margin: -7px 15px 0
46. }
48. header {
49.     margin: 0 auto;
50.     width: 1200px;
51.     height: 150px;
52.     /* background-color: aquamarine; */
53. }
55. .logo {
56.     position: absolute;
57.     margin: 0 auto;
58.     top: 1px;
59.     margin-top: 35px;
60.     margin-left: 0px;
61.     width: 200px;
62.     height: 100px;
63.     /* background-color: burlywood; */
64. }
66. .logo a {
67.     display: block;
68.     margin-left: 50px;
69.     width: 100px;
70.     height: 78px;
71.     background-image: url(../image/3.jpg);
72.     background-position: -9px -9px;
73.     background-repeat: no-repeat;
74.     text-indent: -9999px;
75.     overflow: hidden;
76. }
78. .search {
79.     margin: -80px 450px;
80.     left: 4500px;
81.     top: 32px;
82.     width: 600px;
83.     height: 36px;
84.     border: 2px solid red;
85. }
87. button,
88. input {
90.     font-family: "宋体";
91.     /* 默认有灰色边框，去掉 */
92.     border: 0;
93.     /* 蓝色边框去掉 */
94.     outline: none;
95.     font-size: 20px;
96. }
98. .search input {
99.     float: left;
100.     width: 500px;
101.     height: 36px;
102.     padding-left: 10px;
103. }
105. .search button {
106.     float: right;
107.     width: 100px;
108.     height: 37px;
109.     background-color: rgb(217, 99, 99);
110.     font-size: 30px;
111. }
113. .hotwords {
114.     position: relative;
115.     top: 112px;
116.     left: 450px;
117.     width: 630px;
119. }
121. .hotwords a {
122.     font-size: 20px;
123.     margin: 0 10px;
124.     text-decoration: none;
125.     color: #747a76;
127. }
129. .nav1 {
130.     width: 1400px;
131.     position: relative;
132.     margin: 0 auto;
133.     margin-top: 40px;
134.     border: 2px solid rosybrown;
135. }
137. .nav .dropdown {
138.     float: left;
139.     width: 300px;
140.     height: 50px;
141.     margin: -53px 0px;
142.     background-color: rgb(231, 171, 160);
144. }
146. .nav .navitems {
147.     float: left;
148.     margin: -52px 0px;
150. }
152. .dropdown .dt {
153.     width: 100%;
154.     height: 50px;
155.     text-align: center;
156.     line-height: 50px;
157.     font-size: 25px;
158.     /* border: solid; */
159. }
161. .dropdown .dd {
162.     position: absolute;
163.     width: 300px;
164.     height: 500px;
165.     margin-top: 3px;
166.     background-color: rgb(137, 75, 70);
167. }
169. .dropdown .dd ul li {
170.     width: 300px;
171.     height: 35px;
172.     line-height: 32px;
173.     list-style: none;
174.     margin-left: -40px;
175.     /* border: solid; */
176.     text-indent: 2em;
177. }
178. 
      
179. .dropdown .dd ul li:hover {
180.     background-color: #fff;
181. }
183. .dropdown .dd ul li a {
184.     font-size: 24px;
185.     color: #fff;
186.     text-decoration: none;
187. }
189. .dropdown .dd ul li:hover a {
190.     color: rgb(222, 39, 26);
191. }
193. .navitems {
194.     position: relative;
195.     left: 350px;
196.     height: 40px;
197.     /* background-color: aqua; */
198. }
200. .navitems ul li {
201.     margin-left: 400px;
202.     float: left;
203.     margin: 5px 20px;
204.     list-style: none;
205.     margin-top: -1px;
206. }
208. .navitems ul li a {
209.     float: left;
210.     text-decoration: none;
211.     font-size: 25px;
212.     color: #918484;
213. }
215. .navitems ul li a:hover {
216.     color: red;
217. }
219. /* footer */
220. .footer {
221.     clear: both;
222.     margin-left: 100px;
223.     height: 600px;
224.     width: 1400px;
225.     margin: 0 auto;
226.     background-color: #f5f5f5;
227. }
229. .footer .w {
230.     width: 1400px;
231. }
233. .mod_left {
234.     height: 120px;
235.     border-bottom: 1px solid #ccc;
236. }
238. .mod_left ul li {
239.     float: left;
240.     margin-left: 70px;
241.     width: 240px;
242.     height: 100px;
243.     background-color: rgb(195, 210, 204);
244.     list-style: none;
245. }
247. .mod_left ul li h1 {
248.     display: block;
249.     margin-left: 10px;
250.     width: 20px;
251.     height: 20px;
252.     border-radius: 50%;
253.     background-color: aquamarine;
254. }
256. .mod_left ul li h2 {
257.     margin-left: 50px;
258.     margin-top: -50px;
259. }
261. .mod_left ul li p {
262.     font-size: 20px;
263.     margin-left: 30px;
264. }
266. .mod_right {
267.     height: 250px;
268. }
270. .mod_right ul li {
271.     margin-top: 10px;
272.     list-style: none;
273.     font-size: 20px;
274.     text-align: center;
275.     margin-left: 60px;
276. }
278. .mod_right .b {
279.     font-size: 26px;
280.     color: #747a76;
281. }
283. .mod_right ul {
284.     float: left;
285.     margin-left: 100px;
287. }
289. .mod_right ul li a {
290.     text-decoration: none;
291.     color: #918484;
292. }
294. .mod_right ul li a:hover {
295.     color: rgb(220, 39, 51);
296. }
298. /* .s {
299.     height: 300px;
300. } */
302. .last_top {
303.     width: 1400px;
304.     border: 1px solid #ccc;
305.     height: 0px;
306.     margin-top: 30px;
307. }
309. .last_top ul {
310.     margin-top: 40px;
311.     margin-left: 230px;
312. }
314. .last_top ul li {
315.     font-size: 16px;
316.     float: left;
317.     list-style: none;
318.     margin: 0 6px;
319. }
321. .last_top ul li a {
322.     text-decoration: none;
323.     color: #918484;
324. }
326. .last_top ul li a:hover {
327.     color: red;
328. }
330. .last_top ul li:nth-child(even) {
331.     height: 20px;
332.     width: 1px;
333.     background-color: #a79797;
334. }
336. .last_button {
337.     margin-top: 80px;
338.     margin-left: 60px;
339.     height: 60px;
340.     width: 1200px;
341.     color: #5c5252;
342. }
344. .last_button p {
345.     width: 1100px;
346.     text-align: center;
347. }