[转]天天生鲜，html效果布局

zoukankan html css js c++ java

[转]天天生鲜，html效果布局
效果如下：

html代码如下：
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>Document</title>
8. <link rel="stylesheet" href="reset.css">
9. <link rel="stylesheet" href="main.css">
10. </head>
11. <body>
12. 
13. <div class="login">
14. 
15. <div class="loginbox">
16. 
17. <h3>欢迎您来天天生鲜！</h3>
18. 
19. <div class="loginrg">
20. 
21. <div class="inlogin">
22. 欢迎您：
23. <a href="">张山</a>
24. </div>
26. 
27. <div class="unlogin">
28. <a href="">登录</a>
29. <span>|</span>
30. <a href="">注册</a>
31. </div>
33. 
34. <div class="mylogin">
35. <span>|</span>
36. <a href="">我的购物车</a>
37. <span>|</span>
38. <a href="">我的订单</a>
39. </div>
40. </div>
41. </div>
42. </div>
44. 
45. <div class="search">
46. 
47. <div class="searchbox">
48. 
49. <a href=""><img src="images/logo.png" alt=""></a>
50. 
51. <div class="searchcar">
52. <form action="">
53. <input class="txt"type="text" placeholder="搜索">
54. <input class="sub"type="submit" value="搜索" >
55. </form>
56. </div>
57. 
58. <div class="buy">
59. <a href="">我的购物车</a>
60. <span>0</span>
62. </div>
63. </div>
64. </div>
65. 
66. <div class="cate">
67. 
68. <div class="catecon">
69. 
70. <a class="all" href="">全部商品分类</a>
71. 
72. <ul class="catelist">
73. <li><a href="">首页</a></li>
74. <li><span>|</span></li>
75. <li><a href="">手机生鲜</a></li>
76. <li><span>|</span></li>
77. <li><a href="">抽奖</a></li>
78. </ul>
79. </div>
80. </div>
82. 
83. <div class="slide">
84. 
85. <div class="slidecon">
86. 
87. <ul class="flist">
88. <li><a href="">新鲜水果</a></li>
89. <li><a href="">新鲜水果</a></li>
90. <li><a href="">新鲜水果</a></li>
91. <li><a href="">新鲜水果</a></li>
92. <li><a href="">新鲜水果</a></li>
93. <li><a href="">新鲜水果</a></li>
94. </ul>
95. 
96. <div class="slidepic">
97. 
98. <ul class="slist">
99. <li><a href=""><img src="images/slider.jpg" alt=""></a></li>
100. <li><a href=""><img src="images/slider.jpg" alt=""></a></li>
101. <li><a href=""><img src="images/slider.jpg" alt=""></a></li>
102. <li><a href=""><img src="images/slider.jpg" alt=""></a></li>
103. </ul>
104. 
105. <div class="lfbtu"></div>
106. <div class="rgbtu"></div>
107. 
108. <ul class="rd">
109. <li class="active"></li>
110. <li></li>
111. <li></li>
112. <li></li>
113. </ul>
114. </div>
115. 
116. <div class="rgpic">
117. <a href=""><img src="images/right01.jpg" alt=""></a>
118. <a href=""><img src="images/right02.jpg" alt=""></a>
119. </div>
121. </div>
122. </div>
124. 
125. <div class="foods">
126. 
127. <div class="foodscon">
128. 
129. <div class="fhead">
130. <a class="fheada" href="">海鲜水产</a>
131. 
132. <ul class="fheadlist">
133. <li><span>|</span></li>
134. <li><a href="">深海鱬鱼</a></li>
135. <li><a href="">帝王蟹</a></li>
136. </ul>
137. <a class="fheadlista" href="">查看更多>></a>
139. </div>
140. 
141. <div class="lfad">
142. <a href=""><img src="images/fish.jpg" alt=""></a>
143. </div>
144. 
145. <ul class="foodslist">
147. <li>
148. <h5>基围虾</h5>
149. <a href=""><img src="images/daxia.jpg" alt=""></a>
150. <div>¥39.9</div>
151. </li>
153. <li>
154. <h5>基围虾</h5>
155. <a href=""><img src="images/daxia.jpg" alt=""></a>
156. <div>¥39.9</div>
157. </li>
159. <li>
160. <h5>基围虾</h5>
161. <a href=""><img src="images/daxia.jpg" alt=""></a>
162. <div>¥39.9</div>
163. </li>
165. <li>
166. <h5>基围虾</h5>
167. <a href=""><img src="images/daxia.jpg" alt=""></a>
168. <div>¥39.9</div>
169. </li>
171. </ul>
172. </div>
173. </div>
177. </body>
178. </html>
reset.css
1. body{
2. font-size:12px;
3. color:#666666;
4. }
6. /* 1.login最外侧盒子设定高29 背景颜色#f7f7f7 下边框1 */
7. .login{
8. height: 29px;
9. background:#f7f7f7;
10. border-bottom: 1px solid #dddddd;
11. }
13. /* 1.1 login内容部分设置高20 宽1200 居中*/
14. .loginbox{
15. 1200px;
16. height: 29px;
17. margin:0 auto;
18. }
20. /* 1.11左侧欢迎栏设置居中注意浮动 */
21. .loginbox h3{
22. line-height: 29px;
24. float:left;
25. }
27. /* 1.12右侧我的订单设置宽290 高29 居中注意浮动 */
28. .loginrg{
29. 290px;
30. height: 29px;
31. line-height:29px;
33. float:right;
34. }
36. /* 1.12登录与未登录设置隐藏注意浮动*/
37. .inlogin{
38. float:left;
39. }
40. .unlogin{
41. display: none;
42. }
44. /* 1.121已经登录设置 a颜色orange */
45. .inlogin a{
46. color:orange;
47. }
49. /* 1.122未登录设置 span左右间距 a 鼠标点击变颜色; */
50. .unlogin span, .mylogin span{
51. margin:0 10px;
52. }
53. .unlogin a, .mylogin a{
54. color:#666666;
55. }
57. .unlogin a:hover, .mylogin a:hover{
58. color:orange;
59. }
62. /* 2.search部分设置宽默认高90 */
63. .search{
64. height:90px;
65. }
67. /* 内部内容盒子设置宽1200 高90 居中背景颜色主要测试用*/
68. .searchbox{
69. 1200px;
70. height: 90px;
71. margin:0 auto;
72. /* background: palegreen; */
73. }
75. /* 2.1左侧logo设置位置上29 左17 */
76. .searchbox a{
77. margin-left: 17px;
78. margin-top:29px;
80. /* 注：浮动或者转化行内块元素，一般浮动为主 */
81. /* display: inline-block; */
82. float: left;
83. }
85. /* 2.2搜索框设置宽616 高38 边框位置左120 上36 浮动 */
86. .searchcar{
87. 616px;
88. height: 38px;
89. border:1px solid #37ab40;
90. margin-left: 120px;
91. margin-top: 36px;
93. /* 注：出问题找浮动 */
94. float:left;
95. }
96. /* 搜索框搜索栏设置宽516 高38 居中背景图缩进40 */
97. .searchcar .txt{
98. 516px;
99. height: 38px;
100. line-height: 38px;
101. background: url(images/search.png) no-repeat 12px 9px;
102. /* background: palevioletred; */
103. text-indent: 40px;
104. }
105. /* 搜索框搜索按钮设置宽100 高39 背景颜色字白 14 行高38居中浮动*/
106. .searchcar .sub{
107. 100px;
108. height: 39px;
109. background: #37ab40;
111. font-size:14px;
112. color:white;
113. line-height: 39px;
115. float:right;
116. }
118. /* 2.3右侧购物车宽200 高40 右浮动位置上36 */
119. .buy{
120. 200px;
121. height: 40px;
123. float: right;
124. margin-top:36px;
125. /* background-color: red; */
126. }
127. /* 设置a 宽158 高38 居中背景图字14颜色缩进56 */
128. .buy a{
129. /* 因为要给行内元素设置宽高改变类型 */
130. /* display: inline-block; */
131. float:left;
132. 158px;
133. height: 38px;
134. border:1px solid #dddddd;
135. margin-top:0;
136. margin-left:0;
138. color:#37ab40;
139. font-size:14px;
140. line-height: 38px;
142. background: url(images/buycar.png) no-repeat 14px 10px;
143. text-indent: 56px;
144. /* background: purple; */
145. }
146. /* 设置span 宽40 高40 背景颜色字18 白居中 */
147. .buy span{
148. /* 因为要给行内元素设置宽高改变类型 */
149. /* display: inline-block; */
150. float:right;
151. 40px;
152. height: 40px;
153. background: #ff8800;
155. font-size:18px;
156. color:white;
157. line-height: 40px;
158. text-align: center;
159. /* float:right; */
162. }
164. /* 3.全部商品分类最外侧高40 上26 边框2 #37ab40 */
165. .cate{
166. height: 40px;
167. margin-top:26px;
168. border-bottom: 2px solid #37ab40;
169. }
171. /* 内容设置宽1200 高40 居中 */
172. .catecon{
173. 1200px;
174. height: 40px;
175. margin:0 auto;
176. }
178. /* 3.1全部商品分类宽200高40 居中字14 白背景色浮动 */
179. .all{
180. 200px;
181. height: 40px;
182. line-height: 40px;
183. text-align: center;
185. font-size:14px;
186. color:white;
187. background: #37ab40;
189. /* 设置浮动主要是给首页list找边界 */
190. float:left;
191. }
193. /* 3.2首页设置宽215高40 左35 上下居中 */
194. .catelist{
195. 215px;
196. height: 40px;
197. line-height: 40px;
199. margin-left:35px;
201. /* 注：有问题找浮动 */
202. float:left;
203. }
204. /* 设置li 字14 横排一行浮动 */
205. .catelist li{
206. float:left;
207. }
209. /* span a 标签设置左右20 字体颜色 */
210. .catelist span{
211. margin:0 20px;
212. }
213. .catelist a{
214. color:#666666;
215. }
217. /* 4.slide 高270 内容宽1200高270 居中*/
218. .slide{
219. height:270px;
220. }
221. .slidecon{
222. 1200px;
223. height: 270px;
224. margin:0 auto;
225. }
227. /* 4.1左侧水果列表设置宽200高270 有问题找浮动 */
228. .flist{
229. 200px;
230. height: 270px;
231. /* background: black; */
233. float:left;
234. }
236. /* 水果列表宽198 高44 边框居中背景图 */
237. .flist li{
238. 198px;
239. height: 44px;
240. border:1px solid #f7f7f7;
241. border-top:0;
242. line-height: 44px;
243. text-align: center;
244. background: url(images/sprite.png) no-repeat 33px 9px;
245. }
247. /* 雪碧图位置设置采用 nth选择器 */
248. .flist li:nth-child(2){
249. background-position-y: -41px;
250. }
251. .flist li:nth-child(3){
252. background-position-y: -91px;
253. }
254. .flist li:nth-child(4){
255. background-position-y: -141px;
256. }
258. .flist li:nth-child(5){
259. background-position-y: -191px;
260. }
261. .flist li:nth-child(6){
262. background-position-y: -241px;
263. }
265. /* a 字14 背景图有问题找浮动 yo*/
266. .flist a{
267. font-size:14px;
268. background: url(images/sprite.png) no-repeat 170px -291px;
270. /* display: inline-block; */
271. float:right;
272. 198px;
273. height:44px;
274. }
276. /* 4.2轮播图设置宽760 高279 有问题找浮动 */
277. .slidepic{
278. 760px;
279. height: 279px;
281. float:left;
282. overflow: hidden;
283. position: relative;
284. }
286. /* 轮播图宽760*4 高270 有问题找浮动*/
287. .slist{
288. 3040px;
289. height:270px;
290. }
291. .slist li{
292. float:left;
293. }
295. /* 4.22左右按钮宽25高25 背景图定位*/
296. .lfbtu{
297. 25px;
298. height: 25px;
299. background: url(images/sprite.png) no-repeat 0px -350px;
301. position: absolute;
302. bottom:123px;
303. left: 12px;
304. cursor: pointer;
305. }
307. .rgbtu{
308. 25px;
309. height: 25px;
310. background: url(images/sprite.png) no-repeat 0px -400px;
312. position: absolute;
313. bottom:123px;
314. right: 12px;
315. cursor: pointer;
316. }
317. /* 4.23小圆点设置 */
318. .rd{
319. height: 11px;
320. /* background: black; */
322. 760px;
323. position: absolute;
324. bottom:19px;
325. left:0;
327. text-align: center;
328. }
330. .rd li{
331. 11px;
332. height: 11px;
333. /* background: red; */
334. border-radius: 50%;
336. /* 注：不适用浮动，因为浮动不能居中 */
337. /* float:left; */
338. display: inline-block;
339. }
340. .active{
341. background: greenyellow;
342. }
344. /* 4.3右侧广告消除行间距设置父元素为0*/
345. .rgpic{
346. font-size:0px;
347. }
349. /* 5.foods 设置外高335 上25 内宽1200高335 居中*/
350. .foods{
351. height: 335px;
352. margin-top: 25px;
353. }
354. .foodscon{
355. 1200px;
356. height: 335px;
357. margin:0 auto;
358. }
360. /* 上面文字 */
361. .fhead{
362. 1200px;
363. height: 29px;
364. border-bottom: 2px solid #37ab40;
365. }
366. /* a 海鲜水产 16px margin-right:20px; */
367. .fheada{
368. font-size:16px;
369. margin-right: 20px;
370. color:#37ab40;
371. font-weight: bold;
373. float:left;
374. }
375. /* li标签高29 左10 */
376. .fheadlist li{
377. height: 29px;
378. line-height: 29px;
379. float:left;
380. margin-left: 10px;
381. }
383. /* 更多设置高20 */
384. .fheadlista{
385. height: 29px;
386. line-height: 29px;
388. float:right;
389. }
391. /* 5.2左侧广告宽200 高300 有问题找浮动 */
392. .lfad{
393. 200px;
394. height: 300px;
396. float:left;
397. }
399. /* 5.3右侧列表产品宽1000 高300*/
400. .foodslist{
401. 1000px;
402. height: 300px;
404. /* overflow: hidden; */
405. float:left;
406. }
408. /* 列表设置宽249 高299 边框下右居中 */
409. .foodslist li{
410. 249px;
411. height: 299px;
412. border-bottom: 1px solid #666666;
413. border-right: 1px solid #666666;
415. text-align: center;
416. float:left;
417. }
419. /* 基围虾设置字14 高50 下10 */
420. .foodslist h5{
421. font-size:14px;
422. height: 50px;
423. line-height: 50px;
425. margin-bottom: 10px;
426. }
427. /* 39.9设置字20 红加粗高35 上17 */
428. .foodslist div{
429. font-size:20px;
430. color:red;
431. font-weight: bold;
432. height: 35px;
433. line-height: 35px;
435. margin-top:17px;
437. }
man.css如下：
1. /* 元素初始化，重置 */
3. /* 1.所有元素内外边距初始化 */
4. /* 主要元素包括：body,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,dd,dt,li,put, */
5. *{
6. margin:0;
7. padding:0;
8. }
10. /* 2.列表小圆点格式化 */
11. ul,ol{
12. list-style: none;
13. }
15. /* 3. a下划线删除 */
16. a{
17. text-decoration:none;
18. }
20. /* 4. 伪类 */
21. .clearfix:before, .clearfix:after{
22. content: "";
23. display: table;
24. }
26. .clearfix:after{
27. clear: both;
28. }
30. .clearfix{
31. zoom:1;
32. }
34. /* 5.浮动 */
35. .rf{
36. float:right;
37. }
39. .lf{
40. float:left;
41. }
43. /* 6.标题标签 */
44. h1,h2,h3,h4,h5,h6{
45. font-size:100%;
46. font-weight:normal;
47. }
49. /* 7.input */
50. input{
51. outline:none;
52. border:0;
53. }
查看全文

相关阅读:
Linux系统调用函数
 服务器编程模型
 Make bare repository out of git svn init
关于云的思考
 LDAP groovy 访问代码样例
 恢复corrupted gitsvn repository的过程记录
 代码提交日志规范
 Oracle SqlDeveloper/Jdeveloper extension
HowTo Change Oracle SqlDeveloper Languange
Nginx 502 Bad Gateway错误的解决办法

原文地址：https://www.cnblogs.com/life_lt/p/10910246.html