网页效果图：http://www.dycun.cc/

如下：

css代码

main.css：

  1. /*因为大部分的字体都是12px,颜色一致, 所以统一设置下*/
  2. body{
  3.  
  4.     font-size: 12px;
  5.     color: #666666;
  6. }
  7.  
  8. /*!--1.登录部分login -->*/
  9. .login{
  10.         /*外层div 1280px  29px border:1px dddddd bac:f7f7f7*/
  11.     height: 29px;
  12.     border-bottom: 1px solid #dddddd;
  13.     background-color: #f7f7f7;
  14. }
  15.   /*<!--1.2 内层内容-->  */
  16. .login-content{
  17.     /*内层: 1200px 29px 居中*/
  18.     width: 1200px;
  19.     height: 29px;
  20.     margin: 0 auto;
  21. }
  22. /*<!--1.3 天天生鲜 h2-->*/
  23. .login-content h2{
  24.      /*h2,  12px  666666; 设置行高 居中显示*/
  25.     line-height: 29px;
  26. }
  27.  
  28. /*1.4右侧 的登录*/
  29. .login-right{
  30.     width: 250px;
  31.     height: 29px;
  32.     line-height: 29px;
  33. }
  34. /*<1.4.1已经登录部分div-->*/
  35. .logined{
  36.     display: none;
  37. }
  38. .logined a{
  39.     color: #ff8800;
  40. }
  41. /*1.4.2未登录+我的订单*/
  42. .unlogin a,.myorder a{
  43.     color: #666666;
  44. }
  45. .unlogin span,.myorder span{
  46.     margin: 0 10px;
  47. }
  48. .unlogin a:hover,.myorder a:hover{
  49.     color: orange;
  50. }
  51.  
  52. /*2.search部分*/
  53. .search{
  54.     height: 90px;
  55. }
  56. .search-content{
  57.     width: 1200px;
  58.     height: 90px;
  59.     margin: 0 auto;
  60. }
  61. /*2.1logo图标*/
  62. .logo{
  63.     /*//注意: a标签行内属性, 不支持宽高,margin上下*/
  64.     display: inline-block;
  65.     margin-left: 17px;
  66.     margin-top: 28px;
  67. }
  68.  
  69. /*2.搜索框 div>form>input: text submit*/
  70. .searchbar{
  71.     width: 618px;
  72.     height: 38px;
  73.     border: 1px solid #37ab40;
  74.     margin-top: 34px;
  75.     margin-left: 124px;
  76. }
  77.  
  78. /*2.1内部的input*/
  79. .searchbar input{
  80.     outline: none;
  81.     border: 0;
  82. }
  83. .searchtext{
  84.     width: 515px;
  85.     height: 38px;
  86.     line-height: 38px;
  87.     text-indent: 38px;
  88.  
  89.     background: url(../images/sprite.png) no-repeat 12px 9px;
  90. }
  91. /*2.3搜索按钮*/
  92. .searchtbtn{
  93.     width: 103px;
  94.     height: 38px;
  95.     color: white;
  96.     font-size: 14px;
  97.     line-height: 38px;
  98.     background-color:#37ab40;
  99. }
  100.  
  101. /*2.4.我的购物车 div >a+span*/
  102. .mycar{
  103.     width: 200px;
  104.     height: 40px;
  105.     margin-top: 34px;
  106.  
  107. }
  108.  
  109. .mycar a{
  110.     width: 158px;
  111.     height: 38px;
  112.     display: inline-block;
  113.     background-color: #f7f7f7;
  114.     border: 1px solid #dddddd;
  115.     font-size: 14px;
  116.     color: #37ab40;
  117.     text-indent: 37px;
  118.     line-height: 38px;
  119.     text-align: center;
  120.  
  121.     background: url(../images/sprite.png) no-repeat 13px -43px;
  122.  
  123.     float: left;
  124. }
  125. .mycar span{
  126.  
  127.     color: white;
  128.     background-color: #FD8824;
  129.     font-size: 18px;
  130.     line-height: 40px;
  131.     height: 40px;
  132.     width: 40px;
  133.     text-align: center;
  134.  
  135.     display: inline-block;
  136.     float: left;
  137.  
  138. }
  139.  
  140. /*3.分类的文字*/
  141. .category{
  142.     height: 40px;
  143.     margin-top: 27px;
  144.     border-bottom: 2px solid #37ab40;
  145. }
  146. .category-content{
  147.     width: 1200px;
  148.     height: 40px;
  149.     margin: 0 auto;
  150. }
  151. /*<!--3.1全部商品分类-->*/
  152. .category-content h3{
  153.  
  154.     width: 200px;
  155.     height: 40px;
  156.     line-height: 40px;
  157.     text-align: center;
  158.     font-size: 14px;
  159.     color: white;
  160.     background-color: #37ab40;
  161.  
  162.     float: left;
  163. }
  164.  
  165. .category-content ul{
  166.     width: 600px;
  167.     height: 40px;
  168.     margin-left: 34px;
  169.     float: left;
  170. }
  171. .category-content ul li{
  172.     height: 40px;
  173.     line-height: 40px;
  174.     float: left;
  175. }
  176. .category-content ul li a{
  177.     height: 40px;
  178.     font-size: 14px;
  179.     color: #666666;
  180.     line-height: 40px;
  181.     display: inline-block;
  182. }
  183. .category-content ul span{
  184.     margin: 0 20px;
  185. }
  186.  
  187. .category-content ul li a:hover{
  188.     color: orange;
  189. }
  190.  
  191. /*4.sldier*/
  192. .slider{
  193.  
  194.     height: 270px;
  195. }
  196. .slider-content{
  197.     width: 1200px;
  198.     height: 270px;
  199.     margin: 0 auto;
  200.     background-color:  lightcoral;
  201. }
  202.  
  203. /*4.1左侧列表*/
  204. .categorylist{
  205.  
  206.     background-color: #ffffff;
  207.     width: 200px;
  208.     height: 270px;
  209. }
  210.  
  211. .categorylist li{
  212.  
  213.     width: 198px;
  214.     height: 44px;
  215.     border: 1px solid #eeeeee;
  216.     border-top: 0;
  217.     line-height: 44px;
  218.     text-align: center;
  219.  
  220.     background: url(../images/sprite.png) no-repeat 35px -91px;
  221. }
  222. .categorylist li:nth-of-type(2){
  223.     background: url(../images/sprite.png) no-repeat 35px -141px;
  224. }
  225. .categorylist li:nth-of-type(3){
  226.     background: url(../images/sprite.png) no-repeat 35px -191px;
  227. }
  228. .categorylist li:nth-of-type(4){
  229.     background: url(../images/sprite.png) no-repeat 35px -241px;
  230. }
  231. .categorylist li:nth-of-type(5){
  232.     background: url(../images/sprite.png) no-repeat 35px -291px;
  233. }
  234. .categorylist li:nth-of-type(6){
  235.     background: url(../images/sprite.png) no-repeat 35px -339px;
  236. }
  237.  
  238. .categorylist li a{
  239.     display: inline-block;
  240.     width: 198px;
  241.     height: 44px;
  242.     line-height: 44px;
  243.     font-size: 14px;
  244.     color: #333333;
  245.     background: url(../images/listarrow.jpg) no-repeat 182px 12px;
  246. }
  247.  
  248. /*4.2中间的轮播图*/
  249.  
  250. .middleslider{
  251.  
  252.     width: 760px;
  253.     height: 270px;
  254.     background-color: lightgreen;
  255.     position: relative;
  256.     overflow: hidden;
  257.  
  258. }
  259.  /*<!--4.2.1 内部的6张图片-->*/
  260. .sliderimage{
  261.     width: 4560px;
  262.     height: 270px;
  263.     float: left;
  264. }
  265. .sliderimage li{
  266.     float: left;
  267. }
  268. /*<!--4.2.2左右箭头-->*/
  269. .leftarrow{
  270.     width: 19px;
  271.     height: 25px;
  272.  
  273.     position: absolute;
  274.     left: 13px;
  275.     top:120px;
  276.     cursor: pointer;
  277.     background: url(../images/sprite.png) no-repeat -4px -400px;
  278. }
  279. .rightarrow{
  280.     width: 19px;
  281.     height: 25px;
  282.  
  283.     position: absolute;
  284.     right: 13px;
  285.     top:120px;
  286.     cursor: pointer;
  287.     background: url(../images/sprite.png) no-repeat -4px -450px;
  288. }
  289.  
  290. /*4.2.3小圆点*/
  291. .points{
  292.     width: 760px;
  293.     height: 11px;
  294.     position: absolute;
  295.     bottom: 10px;
  296.     left: 0px;
  297.     text-align: center;
  298. }
  299. .points li{
  300.     margin: 0 5px;
  301.     display: inline-block;
  302.     background-color: #9f9f9f;
  303.     width: 11px;
  304.     height: 11px;
  305.     border-radius: 50%;
  306.  
  307. }
  308. .points .active{
  309.     background-color: #cecece;
  310. }
  311.  
  312. /*4.3ad*/
  313. .ad{
  314.     float: left;
  315.     width: 240px;
  316.     height: 270px;
  317.     font-size: 0;
  318. }
  319.  
  320. /*5.foods商品详情*/
  321. .foods{
  322.     height: 335px;
  323.     margin-top: 25px;
  324. }
  325. .foods-content{
  326.  
  327.     width: 1200px;
  328.     height: 335px;
  329.     margin: 0 auto;
  330. }
  331.  
  332. .foodstitle{
  333.     height: 35px;
  334.     line-height: 35px;
  335. }
  336.  
  337. .foodstitle h5{
  338.     float: left;
  339.     font-size: 16px;
  340.     color: #37ab40;
  341.  
  342.     margin-right: 20px;
  343.  
  344. }
  345.  
  346. .foodstitle .titlelist{
  347.     float: left;
  348. }
  349.  
  350. .foodstitle li{
  351.  
  352.     float: left;
  353.     margin-right:12px;
  354. }
  355. .foodstitle li a{
  356.     color: #cecece;
  357. }
  358.  
  359. .more{
  360.     color: #cecece;
  361.     float: right;
  362. }
  363.  
  364. /*5.2 左侧的图片*/
  365. .foodpic{
  366.     width: 200px;
  367.     height: 300px;
  368.     float: left;
  369. }
  370.  
  371. /*5.3商品详情 右侧*/
  372. .fooddetail{
  373.     float: left;
  374.     width: 1000px;
  375.     height: 300px;
  376. }
  377.  
  378. .fooddetail li{
  379.  
  380.     float: left;
  381.     width: 248px;
  382.     height: 299px;
  383.     border: 1px solid #ededed;
  384.     text-align: center;
  385. }
  386.  
  387. .fooddetail li h5{
  388.  
  389.     font-size: 14px;
  390.     height: 50px;
  391.     line-height: 50px;
  392.     margin-bottom: 10px;
  393. }
  394.  
  395. .fooddetail li div{
  396.  
  397.     font-size: 20px;
  398.     color:red;
  399.     font-weight: bold;
  400.     height: 58px;
  401.     line-height: 58px;
  402.     margin-top:5px;
  403.  
  404. }
  405. /*
  406.  
  407. 右侧详情展示:ul>li >h5+a>img+div
  408.  
  409. 			ul:1000px  300
  410. 			li  249px 299px  border 1px  ededed
  411.  
  412. 			\h5  14px 居中  50px;
  413.  
  414. 			间距10
  415.  
  416. 			img 180 180
  417.  
  418. 			div:58px  20px  红色 居中*/

reset.css

  1. /*1.将一些标签的 margin和padding去掉*/
  2. body,p,ul,ol,h1,h2,h3,h4,h5,h6,input,select,dd,dt{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. /*2.去掉a标签的下划线*/
  7. a{
  8.     text-decoration: none;
  9. }
  10. /*3.列表的 前面的小图标*/
  11. ul,ol{
  12.     list-style: none;
  13. }
  14. /*4.清除浮动和塌陷的伪类*/
  15. .clearfix:before,.clearfix:after{
  16.     content: "";
  17.     display: table;
  18. }
  19. .clearfix:after{
  20.     clear:both;
  21. }
  22. .clearfix{
  23.     zoom:1;
  24. }
  25.  
  26. /*5.设置浮动*/
  27. .lf{
  28.     float: left;
  29. }
  30. .rf{
  31.  
  32.     float: right;
  33. }
  34.  
  35. h1,h2,h3,h4,h5,h6{
  36.     font-size: 100%;
  37.     font-weight: normal;
  38. }

html代码：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>天天生鲜</title>
  9.     <link rel="stylesheet" href="css/reset.css">
  10.     <link rel="stylesheet" href="css/main.css">
  11.  
  12. </head>
  13.  
  14. <body>
  15.  
  16.     <!--1.登录部分login 欢迎来到天天生鲜!-->
  17.     <!--1.1 最外层的div-->
  18.     <div class="login">
  19.         <!--1.2 内层内容-->
  20.         <div class="login-content">
  21.             <!--1.3 天天生鲜 h2-->
  22.             <h2 class="lf">欢迎来到天天生鲜!</h2>
  23.             <!--1.4 登录-->
  24.             <div class="login-right rf">
  25.                 <!--<1.4.1已经登录部分div-->
  26.                 <div class="logined lf">
  27.                     欢迎您:
  28.                     <a href="">张三</a>
  29.                 </div>
  30.                 <!--<1.4.2未登录部分div-->
  31.                 <div class="unlogin lf">
  32.                     <a href="">登录</a>
  33.                     <span>|</span>
  34.                     <a href="">注册</a>
  35.  
  36.                 </div>
  37.                 <!--<1.4.3 我的订单div-->
  38.                 <div class="myorder lf">
  39.                     <span>|</span>
  40.                     <a href="">我的购物车</a>
  41.                     <span>|</span>
  42.                     <a href="">我的订单</a>
  43.                 </div>
  44.  
  45.             </div>
  46.         </div>
  47.     </div>
  48.  
  49.     <!--2.search部分-->
  50.     <!--<2.1外层的div-->
  51.     <div class="search">
  52.         <!--2.2内部的内容div-->
  53.         <div class="search-content">
  54.             <!--2.2.1-logo-->
  55.             <a class="logo lf" href="">
  56.                 <img src="data:images/logo.png" alt="天天生鲜的图片" title="天天生鲜logo">
  57.             </a>
  58.             <!--2.2.2搜索框 searchbar-->
  59.             <div class="searchbar lf">
  60.                 <form action="">
  61.                     <!--2.2.2.1文本输入框-->
  62.                     <input type="text" placeholder="搜索" class="searchtext lf">
  63.                     <!--2.2.2.2按钮-->
  64.                     <input type="submit" value="搜索" class="searchtbtn lf">
  65.  
  66.                 </form>
  67.  
  68.             </div>
  69.             <!--2.2.3我的购物车-->
  70.             <div class="mycar rf">
  71.                 <a href="">我的购物车</a>
  72.                 <span>0</span>
  73.             </div>
  74.         </div>
  75.  
  76.     </div>
  77.  
  78.     <!--3. 全部商品 category-->
  79.     <div class="category">
  80.         <div class="category-content">
  81.             <!--3.1全部商品分类-->
  82.             <h3>全部商品分类</h3>
  83.             <!--3.2首页-->
  84.             <ul>
  85.                 <li>
  86.                     <a href="">首页</a>
  87.                 </li>
  88.                 <li>
  89.                     <span>|</span>
  90.                 </li>
  91.                 <li>
  92.                     <a href="">手机生鲜</a>
  93.                 </li>
  94.                 <li>
  95.                     <span>|</span>
  96.                 </li>
  97.                 <li>
  98.                     <a href="">捐赠时令果蔬</a>
  99.                 </li>
  100.                 <li>
  101.                     <span>|</span>
  102.                 </li>
  103.                 <li>
  104.                     <a href="">抽奖</a>
  105.                 </li>
  106.                 <li>
  107.                     <span>|</span>
  108.                 </li>
  109.                 <li>
  110.                     <a href="">免费领取解暑大西瓜 												
  112. 											
    用h+c实现天天生鲜首页的更多相关文章
    	
      1. 								
      1. CSS——制作天天生鲜主页
      1. 		
        终于做好了! index.html: <!DOCTYPE html> <html lang="en"> <head> <meta char ...
      1. 		
      4. 						
      1. 天天生鲜 - App设计
      1. 		
        天天生鲜-思路数据库设计 天天生鲜-各个App 全文检索 天天生鲜-静态文件 一.项目目录 daily_fresh_demo - daily_fresh_demo - df_cart # 购物车功能  ...
      1. 		
      7. 						
      1. Django之天天生鲜项目
      1. 		
        准备工作 1.配置settings.py内置文件 注意: AUTH_USER_MODEL配置参数要在第一次迁移数据库之前配置,否则可能django的认证系统工作不正常 2.创建应用 3.配置主路由 一 ...
      1. 		
      10. 						
      1. CSS——制作天天生鲜登陆页面
      1. 		
        这个登陆页面主要是有一个form表单,其他的和首页差不多的. login.html: <!DOCTYPE html> <html lang="en"> &l ...
      1. 		
      13. 						
      1. django天天生鲜项目
      1. 		
        .后台admin管理天天生鲜商品信息 models里 from django.db import modelsfrom tinymce.models import HTMLField #需要pip安装 ...
      1. 		
      16. 						
      1. python 天天生鲜项目
      1. 		
        python 天天生鲜项目 django版:https://github.com/Ivy-1996/fresh flask版:https://github.com/Ivy-1996/flask-fre ...
      1. 		
      19. 						
      1. jquery——幻灯片（只动一屏）
      1. 		
        制作天天生鲜的幻灯片部分 贴了全部代码: main.html: <!DOCTYPE html> <html lang="en"> <head>  ...
      1. 		
      22. 						
      1. 前端之移动端库和框架bootstrap
      1. 		
        学习移动端场景下的js事件:制作移动端特效常用的js库:介绍移动端常用开发框架Bootstrap:介绍动态样式语言less.sass.stylus的基本使用. 移动端js事件 移动端的操作方式和PC端 ...
      1. 		
      25. 						
      1. django-配置静态页面-celery/redis/nginx
      1. 		
        celery生成静态页面 celery_tasks/tasks.py # 生成静态首页 from django.template import loader, RequestContext # tem ...
      1. 		
      28. 		
    29. 	
    30.  
    31. 随机推荐
      	
        1. 									
        1. HDU 5416——CRB and Tree——————【DFS搜树】
        1. 			
          CRB and Tree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tota ...
        1. 			
        4. 						
        1. jq实例
        1. 			
          1.导航栏 <style type="text/css"> * {padding:0;margin:0;list-style:none;} img { width:11 ...
        1. 			
        7. 						
        1. MVC execl 导入导出
        1. 			
          MVC execl 导入导出 <input id="xls" name="xls" type="file" style="w ...
        1. 			
        10. 						
        1. StringMVC入门案例
        1. 			
          1.首先要引入jar包 <!--引入beans节点--> <dependency> <groupId>org.springframework</groupId ...
        1. 			
        13. 						
        1. JavaScript  对象继承 OOP  (三)
        1. 			
            对象继承 A 对象通过继承 B 对象,就能直接拥有 B 对象的所有属性和方法.这对于代码的复用是非常有用的. JavaScript 语言的继承不通过 class (es6 中的class 不过是  ...
        1. 			
        16. 						
        1. 1064. 计算斐波那契第n项 通项公式
        1. 			
          题目描述 输入n,编写程序输出斐波那契数列的第n项.其中斐波那契数列f(n)的定义如下: f(1)=0,f(2)=1         f(n)=f(n-1)+f(n-2)(n>=2) 输入 一行 ...
        1. 			
        19. 						
        1. CommonJS 的实现原理
        1. 			
          CommonJS 使用 Node.js 的四个环境变量moduleexportsrequireglobal 只要能够提供这四个变量,浏览器就能加载 CommonJS 模块. Browserify 是目 ...
        1. 			
        22. 						
        1. IEnumerable<T> 用法
        1. 			
          //以下参考来自 http://www.cnblogs.com/wilber2013/p/4299529.html
        1. 			
        25. 						
        1. [原创]在Windows Server 2019上配置NAS
        1. 			
          序言 此教程安装的都是最新版本的.由于是当NAS让它非常稳定的运行,所以能不安装的软件尽量不要安装. 一.准备工作 [更新系统] 没啥,就他喵想用个最新的. 右键点击开始键->设置->更新 ...
        1. 			
        28. 						
        1. 计算后缀表达式的过程（C#）
        1. 			
          计算后缀表达式的过程是一个很好玩的过程,而且很简单哦!这里呢,有个计算的技巧,就是:遇到数字直接入栈,遇到运算符就计算! 后缀表达式也叫逆波兰表达式,求值过程可以用到栈来辅助存储: 假定待求值的后缀表 ...
        1. 			
        31. 			
        			
      32. 							
      33.