小兔鲜web项目展示
一、源代码
代码放到git上面了 有需要的小伙伴可以去看看哦🤩🤩🤩
点击这里直接跳转哦🎀🎀
二、页面展示
三、代码展示
在这里就先只展示一部分代码🐶🐶🐶
轮播图
轮播图使用的是js 需要注意的是轮播的图片命名要简洁并且连续哦
html部分
<!-- 轮播图 -->
<div id="xtx-lunbo">
<img src="images/0.jpg" id="pic" style="width: 100%;height: 100%">
<ul id="list">
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
<li class="li"></li>
</ul>
<div id="left" class="choose"><</div>
<div id="right" class="choose">></div>
</div>
js部分
//首页轮播图
var jsDiv=document.getElementById("xtx-lunbo");
var jsImg=document.getElementById("pic");
var jsLeft=document.getElementById("left");
var jsRight=document.getElementById("right");
var jsUL=document.getElementById("list");
var jsLis=document.getElementsByClassName("li");
jsLis[0].style.backgroundColor="white";
var currentPage=0;
var td=4000;
var timer=setInterval(func,td);
function func() {
currentPage++;
changePic();
}
function changePic() {
if (currentPage===8)currentPage=0;
if (currentPage===-1)currentPage=7;
jsImg.src="images/"+currentPage+".jpg";
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor="#aaa";
}
jsLis[currentPage].style.backgroundColor="white";
}
jsDiv.addEventListener("mouseover",func1,false);
function func1() {
clearInterval(timer);
jsLeft.style.display="block";
jsRight.style.display="block";
}
jsDiv.addEventListener("mouseout",func2,false);
function func2(){
timer=setInterval(func,td);
jsLeft.style.display="none";
jsRight.style.display="none";
}
jsLeft.addEventListener("click",func3,false);
function func3() {
currentPage--;
changePic();
}
jsRight.addEventListener("click",func4,false);
function func4() {
currentPage++;
changePic();
}
jsLeft.onmouseover=function () {
this.style.backgroundColor="rgba(0,0,0,0.6)";
}
jsRight.onmouseover=function () {
this.style.backgroundColor="rgba(0,0,0,0.6)";
}
jsLeft.onmouseout=function () {
this.style.backgroundColor="rgba(0,0,0,0.2)";
}
jsRight.onmouseout=function () {
this.style.backgroundColor="rgba(0,0,0,0.2)";
}
for (var j = 0; j < jsLis.length; j++) {
jsLis[j].onclick = function() {
currentPage = parseInt(this.innerHTML) - 1;
changePic();
};
}
滚动图
滚动图也是使用了js 大家可以根据自己的需要改动
html部分
<!-- 滚动图片展示 -->
<div class="box">
<div class="scroll-img">
<ul style="left: 0" id="scul">
<li>
<a href=""><img src="images/brand_goods_1.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_3.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_4.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_5.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_6.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_1.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_2.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_3.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_4.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_5.jpg" alt=""></a>
</li>
<li>
<a href=""><img src="images/brand_goods_6.jpg" alt=""></a>
</li>
</ul>
</div>
</div>
js部分
//首页滚动图
move();
function move(){
var oSC = document.getElementById("scul");
var L=parseInt(oSC.style.left);
L=L-2;//表示每次向左移动2px
if (L<=-1000){
L=0;
}
oSC.style.left=L+"px";
}
var ITV;
ITV=setInterval(move,50);
// 50ms调用一次move方法
document.getElementById("scul").addEventListener("mouseover",function () {
clearInterval(ITV);
})
document.getElementById("scul").addEventListener("mouseout",function () {
ITV=setInterval(move,50);
})
四、项目说明
1、项目介绍
仿照小兔鲜儿电商平台、综合品类平台写的一个网页设计，其中也加入了一些自己的设计观念。
2、功能介绍
一共分为了三个模块
首页模块：顶部快捷栏，顶部导航，广告插图，左侧分类，轮播图，新鲜好物，人气推荐，潮流好物，分类商品推荐，网站底部。
登录模块：顶部快捷栏，登录设置，网站底部。
个人模块：顶部快捷栏，我的收藏好物，我的评价好物，我的收藏店铺，网站底部。
3、设计思路
在开头三个模块都添加了三个标签
title：网页标题标签
description：网页描述标签
keywords：网页关键词标签
设置了小图标，使打开网页时上部有个小图标。
设置了一个基础css样式：去除常见标签默认的 margin 和 padding。去列表默认样式、去除默认倾斜效果、去除a标签默认下划线、并设置默认文字颜色、以及鼠标移入改变字体颜色、左浮动右浮动、去除input默认样式以及双伪元素清除法。
3.1、首页模块：
类似于头部、身体、底部，网站首页也划分为三大部分。
（1）头部模块：由顶部快捷栏和主导航构成。
顶部快捷栏：由ul标签包含a标签组成，fr设置右浮动
主导航：每个部分都用盒子装起来。小图标、nav导航（ul+li+a组合）、search、cart 都左浮动，使其排成一行
小图标都是用精灵图，精灵图的标签都用行内标签。项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图，可以减少服务器发送次数，减轻服务器的压力，提高页面加载速度
使用精灵图的步骤：首先创建一个盒子并设置盒子大小为小图片大，然后设置精灵图为盒子的背景图片，最后将小图片左上角坐标，取负值，设置给盒子的background-position：x
y
（2）身体模块：由五部分组成
第一部分为：左边广告、菜单栏、轮播图
左边广告是一个隐藏模式，当鼠标移入则显示完整广告部分，也是使用css的position以及其他的强大功能。
菜单栏需要使用定位position，使其定位在轮播图的左上角
轮播图使用了JavaScript使其展现动画效果。鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮，点击右按钮依次，图片往左播放一张，依次类推，左按钮同理。图片播放的时候，下面的小圆圈跟着一起变化，点击小圆圈，可以播放相应图片。设置定时器，鼠标不经过轮播图，轮播图也会自动播放图片
第二部分和第三部分类似：都是两个盒子组成，分别为写标题和放图片展示的盒子
标题盒子为左浮动使其出现在左上角。
图片展示盒子是一个ul里面包含了四个li，每个li里面又设有a，a里包括i、img、h3、p.并且每个li都要设置成左浮动，使其并排。每个图片用css设置了图片移入之后有放大效果。
第三部分为：滚动图
上面盒子写标题，下面盒子放滚动的图片。设置一个ul+li+a。li都是左浮动。里面包含两次所有滚动图片。也是使用JavaScript使其滚动展示效果。所选择的图片排成行自动滚动播放，当鼠标移入时停止滚动。
第四部分为：导航栏、图片展示
上边盒子有放左边的大标题和设置了右浮动的ul+li+a导航
下边盒子是分为左浮动的大图片盒子跟右浮动的多个图片展示盒子
每个图片用css设置在鼠标移入时会从该图片底部出现找相似物品的图标
（3）尾部模块：宣传服务、版权信息
宣传服务模块是ul+li组成，并且分为三个盒子都设置为左浮动使其排成一排。
版权信息直接就是默认独占一行的p标签，并且使用了超链接。
3.2、登录模块：
采用了首页模块的顶部快捷栏和底部。中间部分用css样式设置了图片背景，然后设置登录框使其右浮动位于图片右侧。填写账号密码框用了form表单、input、button。
3.3、个人模块：
采用了首页模块的顶部快捷栏、小图标和底部。中间部分分为三块儿，右边盒子右浮动，设置多个article标签来存放每条店铺信息。左边整体也是采用article标签，然后展示图片用css设置了鼠标移入放大效果。所有字体借助css表现为鼠标移入变换颜色。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
