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

其他 2019-05-23 10:14:55 阅读次数: 0

效果如下：

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. <!-- 1.login部分，天天生鲜欢迎您！ -->
  13. <div class="login">
  14. <!-- 1.1 login内容部分 -->
  15. <div class="loginbox">
  16. <!-- 1.11 左侧欢迎栏 -->
  17. <h3>欢迎您来天天生鲜！</h3>
  18. <!-- 1.12右侧我的订单 -->
  19. <div class="loginrg">
  20. <!-- 1.121 已经登录 -->
  21. <div class="inlogin">
  22. 欢迎您：
  23. <a href="">张山</a>
  24. </div>
  25.  
  26. <!-- 1.122未登录 -->
  27. <div class="unlogin">
  28. <a href="">登录</a>
  29. <span>|</span>
  30. <a href="">注册</a>
  31. </div>
  32.  
  33. <!-- 1.123 我的订单 -->
  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>
  43.  
  44. <!-- 2.search部分设置 -->
  45. <div class="search">
  46. <!-- 内部内容盒子设置 -->
  47. <div class="searchbox">
  48. <!-- 2.1左侧logo设置 -->
  49. <a href=""><img src="images/logo.png" alt=""></a>
  50. <!-- 2.2搜索框设置 -->
  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. <!-- 2.3右侧购物车 -->
  58. <div class="buy">
  59. <a href="">我的购物车</a>
  60. <span>0</span>
  61.  
  62. </div>
  63. </div>
  64. </div>
  65. <!-- 3.全部商品分类 -->
  66. <div class="cate">
  67. <!-- 内部内容设置 -->
  68. <div class="catecon">
  69. <!-- 3.1全部商品分类 -->
  70. <a class="all" href="">全部商品分类</a>
  71. <!-- 3.2首页设置 -->
  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>
  81.  
  82. <!-- 4.slide -->
  83. <div class="slide">
  84. <!-- 里面内容 -->
  85. <div class="slidecon">
  86. <!-- 4.1左侧 水果列表展示 -->
  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. <!-- 4.2中间部分 slide轮播图 -->
  96. <div class="slidepic">
  97. <!-- 4.21轮播图图片 -->
  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. <!-- 4.22左右按钮 -->
  105. <div class="lfbtu"></div>
  106. <div class="rgbtu"></div>
  107. <!-- 4.23小圆点 -->
  108. <ul class="rd">
  109. <li class="active"></li>
  110. <li></li>
  111. <li></li>
  112. <li></li>
  113. </ul>
  114. </div>
  115. <!-- 4.3右边图片 -->
  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>
  120.  
  121. </div>
  122. </div>
  123.  
  124. <!-- 5.food商品设置 -->
  125. <div class="foods">
  126. <!-- 内部内容 -->
  127. <div class="foodscon">
  128. <!-- 5.1头部div -->
  129. <div class="fhead">
  130. <a class="fheada" href="">海鲜水产</a>
  131. <!-- 3.2首页设置 -->
  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="">查看更多&gt;&gt;</a>
  138.  
  139. </div>
  140. <!-- 5.2左侧广告 -->
  141. <div class="lfad">
  142. <a href=""><img src="images/fish.jpg" alt=""></a>
  143. </div>
  144. <!-- 5.3右侧列表产品 -->
  145. <ul class="foodslist">
  146.  
  147. <li>
  148. <h5>基围虾</h5>
  149. <a href=""><img src="images/daxia.jpg" alt=""></a>
  150. <div>¥39.9</div>
  151. </li>
  152.  
  153. <li>
  154. <h5>基围虾</h5>
  155. <a href=""><img src="images/daxia.jpg" alt=""></a>
  156. <div>¥39.9</div>
  157. </li>
  158.  
  159. <li>
  160. <h5>基围虾</h5>
  161. <a href=""><img src="images/daxia.jpg" alt=""></a>
  162. <div>¥39.9</div>
  163. </li>
  164.  
  165. <li>
  166. <h5>基围虾</h5>
  167. <a href=""><img src="images/daxia.jpg" alt=""></a>
  168. <div>¥39.9</div>
  169. </li>
  170.  
  171. </ul>
  172. </div>
  173. </div>
  174.  
  175.  
  176.  
  177. </body>
  178. </html>

reset.css


  1. body{
  2. font-size:12px;
  3. color:#666666;
  4. }
  5.  
  6. /* 1.login最外侧盒子设定 高29 背景颜色#f7f7f7 下边框1 */
  7. .login{
  8. height: 29px;
  9. background:#f7f7f7;
  10. border-bottom: 1px solid #dddddd;
  11. }
  12.  
  13. /* 1.1 login内容部分设置 高20 宽1200 居中*/
  14. .loginbox{
  15. width:1200px;
  16. height: 29px;
  17. margin:0 auto;
  18. }
  19.  
  20. /* 1.11左侧欢迎栏设置 居中 注意浮动 */
  21. .loginbox h3{
  22. line-height: 29px;
  23.  
  24. float:left;
  25. }
  26.  
  27. /* 1.12右侧我的订单设置 宽290 高29 居中 注意浮动 */
  28. .loginrg{
  29. width:290px;
  30. height: 29px;
  31. line-height:29px;
  32.  
  33. float:right;
  34. }
  35.  
  36. /* 1.12登录与未登录设置隐藏 注意浮动*/
  37. .inlogin{
  38. float:left;
  39. }
  40. .unlogin{
  41. display: none;
  42. }
  43.  
  44. /* 1.121已经登录设置 a颜色orange */
  45. .inlogin a{
  46. color:orange;
  47. }
  48.  
  49. /* 1.122未登录设置 span左右间距 a 鼠标点击变颜色; */
  50. .unlogin span, .mylogin span{
  51. margin:0 10px;
  52. }
  53. .unlogin a, .mylogin a{
  54. color:#666666;
  55. }
  56.  
  57. .unlogin a:hover, .mylogin a:hover{
  58. color:orange;
  59. }
  60.  
  61.  
  62. /* 2.search部分设置 宽默认 高90 */
  63. .search{
  64. height:90px;
  65. }
  66.  
  67. /* 内部内容盒子设置 宽1200 高90 居中 背景颜色主要测试用*/
  68. .searchbox{
  69. width:1200px;
  70. height: 90px;
  71. margin:0 auto;
  72. /* background: palegreen; */
  73. }
  74.  
  75. /* 2.1左侧logo设置 位置 上29 左17 */
  76. .searchbox a{
  77. margin-left: 17px;
  78. margin-top:29px;
  79.  
  80. /* 注：浮动或者转化行内块元素，一般浮动为主 */
  81. /* display: inline-block; */
  82. float: left;
  83. }
  84.  
  85. /* 2.2搜索框设置 宽616 高38 边框 位置左120 上36 浮动 */
  86. .searchcar{
  87. width:616px;
  88. height: 38px;
  89. border:1px solid #37ab40;
  90. margin-left: 120px;
  91. margin-top: 36px;
  92.  
  93. /* 注：出问题找浮动 */
  94. float:left;
  95. }
  96. /* 搜索框搜索栏设置 宽516 高38 居中 背景图 缩进40 */
  97. .searchcar .txt{
  98. width: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. width:100px;
  108. height: 39px;
  109. background: #37ab40;
  110.  
  111. font-size:14px;
  112. color:white;
  113. line-height: 39px;
  114.  
  115. float:right;
  116. }
  117.  
  118. /* 2.3右侧购物车 宽200 高40 右浮动 位置上36 */
  119. .buy{
  120. width:200px;
  121. height: 40px;
  122.  
  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. width:158px;
  133. height: 38px;
  134. border:1px solid #dddddd;
  135. margin-top:0;
  136. margin-left:0;
  137.  
  138. color:#37ab40;
  139. font-size:14px;
  140. line-height: 38px;
  141.  
  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. width:40px;
  152. height: 40px;
  153. background: #ff8800;
  154.  
  155. font-size:18px;
  156. color:white;
  157. line-height: 40px;
  158. text-align: center;
  159. /* float:right; */
  160.  
  161.  
  162. }
  163.  
  164. /* 3.全部商品分类最外侧 高40 上26 边框2 #37ab40 */
  165. .cate{
  166. height: 40px;
  167. margin-top:26px;
  168. border-bottom: 2px solid #37ab40;
  169. }
  170.  
  171. /* 内容设置 宽1200 高40 居中 */
  172. .catecon{
  173. width:1200px;
  174. height: 40px;
  175. margin:0 auto;
  176. }
  177.  
  178. /* 3.1全部商品分类 宽200高40 居中 字14 白背景色 浮动 */
  179. .all{
  180. width:200px;
  181. height: 40px;
  182. line-height: 40px;
  183. text-align: center;
  184.  
  185. font-size:14px;
  186. color:white;
  187. background: #37ab40;
  188.  
  189. /* 设置浮动主要是给首页list找边界 */
  190. float:left;
  191. }
  192.  
  193. /* 3.2首页设置 宽215高40 左35 上下居中 */
  194. .catelist{
  195. width:215px;
  196. height: 40px;
  197. line-height: 40px;
  198.  
  199. margin-left:35px;
  200.  
  201. /* 注：有问题找浮动 */
  202. float:left;
  203. }
  204. /* 设置li 字14 横排一行浮动 */
  205. .catelist li{
  206. float:left;
  207. }
  208.  
  209. /* span a 标签设置 左右20 字体颜色 */
  210. .catelist span{
  211. margin:0 20px;
  212. }
  213. .catelist a{
  214. color:#666666;
  215. }
  216.  
  217. /* 4.slide 高270 内容宽1200高270 居中*/
  218. .slide{
  219. height:270px;
  220. }
  221. .slidecon{
  222. width:1200px;
  223. height: 270px;
  224. margin:0 auto;
  225. }
  226.  
  227. /* 4.1左侧水果列表设置 宽200高270 有问题找浮动 */
  228. .flist{
  229. width:200px;
  230. height: 270px;
  231. /* background: black; */
  232.  
  233. float:left;
  234. }
  235.  
  236. /* 水果列表 宽198 高44 边框 居中 背景图 */
  237. .flist li{
  238. width: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. }
  246.  
  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. }
  257.  
  258. .flist li:nth-child(5){
  259. background-position-y: -191px;
  260. }
  261. .flist li:nth-child(6){
  262. background-position-y: -241px;
  263. }
  264.  
  265. /* a 字14 背景图 有问题找浮动 yo*/
  266. .flist a{
  267. font-size:14px;
  268. background: url(images/sprite.png) no-repeat 170px -291px;
  269.  
  270. /* display: inline-block; */
  271. float:right;
  272. width:198px;
  273. height:44px;
  274. }
  275.  
  276. /* 4.2轮播图设置 宽760 高279 有问题找浮动 */
  277. .slidepic{
  278. width:760px;
  279. height: 279px;
  280.  
  281. float:left;
  282. overflow: hidden;
  283. position: relative;
  284. }
  285.  
  286. /* 轮播图宽760*4 高270 有问题找浮动*/
  287. .slist{
  288. width:3040px;
  289. height:270px;
  290. }
  291. .slist li{
  292. float:left;
  293. }
  294.  
  295. /* 4.22左右按钮 宽25高25 背景图 定位*/
  296. .lfbtu{
  297. width:25px;
  298. height: 25px;
  299. background: url(images/sprite.png) no-repeat 0px -350px;
  300.  
  301. position: absolute;
  302. bottom:123px;
  303. left: 12px;
  304. cursor: pointer;
  305. }
  306.  
  307. .rgbtu{
  308. width:25px;
  309. height: 25px;
  310. background: url(images/sprite.png) no-repeat 0px -400px;
  311.  
  312. position: absolute;
  313. bottom:123px;
  314. right: 12px;
  315. cursor: pointer;
  316. }
  317. /* 4.23小圆点设置 */
  318. .rd{
  319. height: 11px;
  320. /* background: black; */
  321.  
  322. width:760px;
  323. position: absolute;
  324. bottom:19px;
  325. left:0;
  326.  
  327. text-align: center;
  328. }
  329.  
  330. .rd li{
  331. width:11px;
  332. height: 11px;
  333. /* background: red; */
  334. border-radius: 50%;
  335.  
  336. /* 注：不适用浮动，因为浮动不能居中 */
  337. /* float:left; */
  338. display: inline-block;
  339. }
  340. .active{
  341. background: greenyellow;
  342. }
  343.  
  344. /* 4.3右侧广告 消除行间距设置父元素为0*/
  345. .rgpic{
  346. font-size:0px;
  347. }
  348.  
  349. /* 5.foods 设置外高335 上25 内宽1200高335 居中*/
  350. .foods{
  351. height: 335px;
  352. margin-top: 25px;
  353. }
  354. .foodscon{
  355. width:1200px;
  356. height: 335px;
  357. margin:0 auto;
  358. }
  359.  
  360. /* 上面文字 */
  361. .fhead{
  362. width: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;
  372.  
  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. }
  382.  
  383. /* 更多设置 高20 */
  384. .fheadlista{
  385. height: 29px;
  386. line-height: 29px;
  387.  
  388. float:right;
  389. }
  390.  
  391. /* 5.2左侧广告 宽200 高300 有问题找浮动 */
  392. .lfad{
  393. width:200px;
  394. height: 300px;
  395.  
  396. float:left;
  397. }
  398.  
  399. /* 5.3右侧列表产品 宽1000 高300*/
  400. .foodslist{
  401. width:1000px;
  402. height: 300px;
  403.  
  404. /* overflow: hidden; */
  405. float:left;
  406. }
  407.  
  408. /* 列表设置 宽249 高299 边框下右 居中 */
  409. .foodslist li{
  410. width:249px;
  411. height: 299px;
  412. border-bottom: 1px solid #666666;
  413. border-right: 1px solid #666666;
  414.  
  415. text-align: center;
  416. float:left;
  417. }
  418.  
  419. /* 基围虾设置 字14 高50 下10 */
  420. .foodslist h5{
  421. font-size:14px;
  422. height: 50px;
  423. line-height: 50px;
  424.  
  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;
  434.  
  435. margin-top:17px;
  436.  
  437. }

man.css如下：

  1. /* 元素初始化，重置 */
  2.  
  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. }
  9.  
  10. /* 2.列表小圆点格式化 */
  11. ul,ol{
  12. list-style: none;
  13. }
  14.  
  15. /* 3. a下划线删除 */
  16. a{
  17. text-decoration:none;
  18. }
  19.  
  20. /* 4. 伪类 */
  21. .clearfix:before, .clearfix:after{
  22. content: "";
  23. display: table;
  24. }
  25.  
  26. .clearfix:after{
  27. clear: both;
  28. }
  29.  
  30. .clearfix{
  31. zoom:1;
  32. }
  33.  
  34. /* 5.浮动 */
  35. .rf{
  36. float:right;
  37. }
  38.  
  39. .lf{
  40. float:left;
  41. }
  42.  
  43. /* 6.标题标签 */
  44. h1,h2,h3,h4,h5,h6{
  45. font-size:100%;
  46. font-weight:normal;
  47. }
  48.  
  49. /* 7.input */
  50. input{
  51. outline:none;
  52. border:0;
  53. }

猜你喜欢

转载自www.cnblogs.com/life_lt/p/10910246.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022