PC端天天生鲜页面实现

最新推荐文章于 2022-09-18 15:54:54 发布

V-Sugar

最新推荐文章于 2022-09-18 15:54:54 发布

阅读量629

点赞数

分类专栏：前端文章标签： html js css

本文链接：https://blog.csdn.net/weixin_43844838/article/details/107449851

版权

该项目展示了PC端天天生鲜页面的实现过程，包括效果图、项目目录结构、准备工作、详细代码（css、js、html）、json数据以及使用js搭建的服务器。在实施中需要注意js和css的引入顺序，以及需在服务器环境下运行，通过node server.js启动服务器。

摘要由CSDN通过智能技术生成

项目的效果图

在这里插入图片描述

项目目录

│  index.html
│  server.js
│
├─css
│      main.css
│      reset.css
│
├─images
│  │  adv01.jpg
│  │  adv02.jpg
│  │  banner01.jpg
│  │  banner02.jpg
│  │  banner03.jpg
│  │  banner04.jpg
│  │  banner05.jpg
│  │  banner06.jpg
│  │  icons.png
│  │  logo.png
│  │  slide.jpg
│  │  slide02.jpg
│  │  slide03.jpg
│  │  slide04.jpg
│  │
│  └─goods
│          goods001.jpg
│          goods002.jpg
│          goods003.jpg
│          goods004.jpg
│          goods005.jpg
│          goods006.jpg
│          goods007.jpg
│          goods008.jpg
│          goods009.jpg
│          goods010.jpg
│          goods011.jpg
│          goods012.jpg
│          goods013.jpg
│          goods014.jpg
│          goods015.jpg
│          goods016.jpg
│          goods017.jpg
│          goods018.jpg
│          goods019.jpg
│          goods020.jpg
│          goods021.jpg
│
└─js
        date.js
        date.json
        jquery-1.12.4.js
        jquery-1.12.4.min.js
        slide.js

项目的准备

要有服务器的环境来做ajax
slide.js:做幻灯片用的

项目代码

css

main.css

body{
     
	font-family: "Microsoft Yahei"
	font-size:14px;
}


/* 页面顶部的样式 */
.header_con{
     
	/*块标签默认为父级的宽度*/
	height:29px;
	background-color: #f7f7f7;
	border-bottom: 1px solid #ddd;
}


/* 内容*/
.header{
     
	width:1200px;
	height: 29px;
	margin:0px auto;
	/*background-color: gold;*/
	/*margin:0px auto;*/
}


.welcome{
     
	font-size:12px;
	color:#666;
	line-height: 29px;
}


.user_con{
     
	/*background-color: gold;*/
}


/*默认将欢迎信息隐藏*/
.user_info{
     
	display: none;
	font-size:12px;
	line-height:29px;
	color: #666;
}


.user_info em{
     
	color:#f80;
}


.login_btns li, .user_btns li{
     
	float:left;
	height: 29px;
}


.login_btns li a, .login_btns span, .user_btns a, .user_btns span{
     
	display: block;
	line-height:29px;
	font-size:12px;
	color:#666;
}


.login_btns span, .user_btns span{
     
	color:#cecece;
	margin:0px 10px;
}


/*响应事件*/
.login_btns a:hover, .user_btns a:hover{
     
	color:#ff8800;
}





/* 
	logo 搜索框  购物车 样式
*/
.center_con{
     
	width:1200px;
	height:115px;
	margin:0px auto;
	/*background-color: gold;*/
}


/* logo */
.logo{
     
	margin:29px 0px 0px 17px;
}


/*搜索框*/
.search_con{
     
	width:616px;
	height:38px;
	/*background-color: gold;*/
	margin:34px 0px 0px 124px;
	border:1px solid #37ab40;
	background: url(../images/icons.png) 10px 6px no-repeat;
}


/*input输入框*/
.search_con .input_txt{
     
	margin-left: 36px;
	width:480px;
	height: 38px;
	border:0px;
	/* 
		去掉input获取焦点时的框线
	*/
	outline: none;
}


/*搜索文字*/
.search_con .input_sub{
     
	width:100px;
	height:38px;
	background-color:#37ab40;
	border:0px;  /*不要input的边框*/
	font-size:14px;
	color:#fff;
	cursor:pointer;  /*设置鼠标形状*/
	outline: none;
}

.search_con .input_sub:hover{
     
	color:#000;
}


/*购物车*/
.chart_con{
     
	width:200px;
	height:40px;
	/*background-color: green;*/
	margin-top:34px;
}


.chart_link{
     
	width:158px;
	height:38px;
	border:1px solid #ddd;
	background:url(../images/icons.png) 15px -42px #f7f7f7 no-repeat;
	line-height: 38px;
	text-indent: 48px;
	color:#37ab40;

}


.chart_num{
     
	width:40px;
	height: 40px;
	background-color: #f80;
	text-align: center;
	line-height: 40px;
	color:#fff;
	font:bold 18px/40px "Microsoft Yahei";
}





/*主菜单*/
.main_menu_con{
     
	height:40px;
	border-bottom: 2px solid #39a93e;
}


/*菜单*/
.center_con02{
     
	width:1200px;
	height: 40px;
	/*background-color: gold;*/
	margin:0px auto;
	/*font-size:12px;*/
}


.center_con02 ul{
     
	/*帮助去掉首页左边的线*/
	float: left;  
	overflow: hidden;
}


/*商品分类*/
.center_con02 h2{
     
	float:left;
	width:200px;
	height: 40px;
	background-color: #39a93e;
	text-align: center;
	font:normal 14px/40px "Microsoft Yahei";
	color:#fff;
}


/*首页 手机生鲜 抽奖*/
.center_con02 li{
     
	height: 40px;
	float: left;
}


/*字*/
.center_con02 li a{
     
	display: block;  /*支持宽高*/
	height:14px;
	line-height: 14px;
	padding: 0px 20px;
	border-left: 1px solid #666;
	margin-top:13px;
	color:#666;
	margin-left: -1px; /*去掉首页左边的线*/
}

/* 字的响应事件*/
.center_con02 li a:hover{
     
	color: #f80;
}





/*主菜单下面的幻灯片和二级菜单和广告*/
.center_con03{
     
	width:1200px;
	height:270px;
	/*background-color: gold;*/
	margin:0px auto;
}


/*菜单ul*/
.sub_menu_con{
     
	width:200px;
	height:270px;
	/*background-color: green;*/
}

/*菜单列表*/
.sub_menu_con li{
     
	width:198px;
	height:44px;
	border:1px solid #eeeeee;
	border-top:0px;
	background:url(../images/icons.png) 175px -385px no-repeat ;
}


.sub_menu_con li a{
     
	display: block;
	height:44px;
	line-height: 44px;
	text-indent: 71px;
	/*font-size: 14px;  可以省略*/
	color:#333;
	background:url(../images/icons.png) 35px -90px no-repeat ;
}

.sub_menu_con li .icon02{
     
	background-position:35px -136px;

}

.sub_menu_con li .icon03{
     
	background-position:35px -186px;

}

.sub_menu_con li .icon04{
     
	background-position:35px -239px;

}

.sub_menu_con li .icon05{
     
	background-position:35px -288px;

}

.sub_menu_con li .icon06{
     
	background-position:35px -335px;

}

.sub_menu_con li a:hover{
     
	color:#f80;
}


.slide_con{
     
	width:760px;
	height:270px;
	/*background-color: pink;*/
	position: relative;   /* 相对定位*/
	overflow: hidden;  /*裁切超出的部分*/
}

.slide_con .slide_list{
     
	position: absolute;  /*绝对定位*/
	width:4560px;
	height:270px;
	left:0;    /*动起来的效果是用程序控制这里的left的值*/
	top:0;
}

.slide_con .slide_list li{
     
	position: absolute;
	float:left;
}

/*箭头*/
.prev, .next{
     
	position: absolute;  /*绝对定位*/
	width: 15px;
	height: 24px;
	background:url(../images/icons.png) left -450px no-repeat;
	left:0;
	top:123px;

	cursor:pointer;  /*设置鼠标形状 变成手*/
}

.prev{
     
	left:11px;
}

.next{
     
	left:736px;
	background-position: left -500px;
}

/*点*/
.points{
     
	/*定位后就没有width=100%的属性了*/
	position: absolute;
	width: 100%;
	/*background-color: green;*/
	height:11px;
	left:0;
	bottom:9px;
	font-size:0;
	text-align: center;
}

.points li{
     
	/*行内块有间隙  要用父级font-size来改*/
	display: inline-block;
	width:11px;
	height:11px;
	background-color: #9f9f9f;
	margin:0 5px;
	border-radius: 50%;   /*变圆*/
	cursor:pointer;
}

.points .active{
     
	background-color: #cecece;
}


.advs{
     
	width:240px;
	height:270px;
	background-color: lightgreen;
}

/*
	有的浏览器中图片会出现3px间隔的bug  
	解决方法: 将img转成block
*/
.advs img{
     
	display: block;
}





/*食品展示区*/
/*水果*/
.common_model{
     
	width:1200px;
	height:337px;
	margin:20px auto 0;
	/*background-color: gold;*/
}


.common_title_con{
     
	height: 35px;
	border-bottom: 2px solid #42ad46;
	/*background-color: green;*/
}

.common_title_con h3{
     
	float: left;
	font:bold 16px/35px "Microsoft Yahei";
	color:#37ab40;

}

.common_title_con ul{
     
	float:left;
	height:12px;
	border-left:1px solid #666;
	margin:12px 0 0 20px;
}

.common_title_con li{
     
	float:left;
	line-height: 12px;
	margin-left: 15px