仿京东商城

最新推荐文章于 2023-02-23 08:53:34 发布

友人C君~

最新推荐文章于 2023-02-23 08:53:34 发布

阅读量1.1k

点赞数 3

分类专栏： web项目

本文链接：https://blog.csdn.net/CWH0908/article/details/89358783

版权

web项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前后花了快一个星期，虽然只是做的静态页面，但是京东首页设计到的布局还是很有参考价值的，其中很多小的板块布局各有特点，可以通过过一个个小的板块来练习自己的html+css能力。

内容简介：

html：

标签语义化，如使用header、footer等
头部meta标签的元信息的TDK书写要利于SEO
css文件在头部引入，js文件在body底部引入
元素嵌套不宜过深
不同板块注释要清晰

css：

为公共样式创建一个base.css文件，不同的大板块各自创建一个css文件
使用normalize.css初始化样式
选择器的权重问题
伪类（nth-type和nth-of-type中对标签和类的选择）
行内元素和块级元素的区别（宽高是否可设置，margin-top传递给父元素，margin合并问题等）
transition过渡效果中，display无法生效的原因及解决方案（visibility+opacity解决）
flex布局缩短开发时间
慎用！important

js：

事件委托优化性能

原生轮播图

使用定时器时注意清除定时器避免内存泄漏（使用setTimeout()递归来代替setInterval()）

事件绑定中mouseover，mouseout和mouseenter，mouseleave的区别

来看看我的京东商城：

接下来来整理一下编写流程、注意的点以及一些坑:

首先肯定是打开京东商城官网先仔细地看一下啦，然后先了解它的结构大体是如何的：黑>红>蓝>黄

html文件编写：

没有什么特别重要的地方，就是要注意层次间的标签嵌套要清晰，不能嵌套太深，导致结构混乱（多写注释= ^ =）

将页面分为头图-头部导航-主体（左侧导航栏-中间轮播图栏-右侧登录栏）-底部信息，然后进行N个div的组合编写页面...

css文件编写：

注意样式取名要清晰，便于自己开发和维护= - =。
然后百度normalize.css，下载这个样式文件来对css进行初始化（至于作用嘛。。。初始化啊，很多标签属性默认有很无语的边距什么的，无力吐槽...），别以为用了这个样式文件你就不用再初始化了，它只是做一些很基础的初始化，如果你平常对标签有什么使用习惯的话，建议还是自己在基础样式中再初始化一次（不建议*{padding:0px;}这样一股脑的初始化，很多样式的属性自有存在的道理，只需要把你要用到的进行合理的初始化就行了）。
注意把一些京东商城常用的标签样式提取出来，如给a一个hover的poiter样式，可以在样式文件最上方统一设定一个，如果有些a不需要这个hover样式的，也可以给需要的a标签增大权重覆盖这个hover样式
将一些常用样式单独写成一个class样式类，方便在便签中添加和删除，如.fl { float: left; } .fr { float: right; } .colorRed{ color: #FF0000 }
注意position：absolute是相对于父元素中第一个非默认流（static）的绝对定位
一般设置ul的宽高和li的宽高，便于li的悬浮显示更换背景效果
height和line-height的关系不简单，height=line-height时候文字垂直居中，还有其他情况，戳我
不得不说nth-child和nth-of-type的坑 nth-child的坑、nth-child和nth-of-type的坑
z-index只适用于已经定位的元素（即position:relative/absolute/fixed）。 z-index层叠规则
margin、padding的简便写法。 简便写法
实现渐隐渐显效果，transition:display 1s;一起使用没有过渡效果，这是因为过渡效果只能使存在的属性进行过渡，如width，color，而display只有存在或者不存在这两个状态，所以无法实现由存在到不存在的过渡，解决方案：可以使用visibility：hidden,opacity：0，来代替display:none；然后transition:opacity 1s;当触发事件时，只要visibility:visble,opacity:1即可实现渐隐渐显效果。
使用别的字体：然后使用这个useFontFamily样式即可设置字体

/*声明字体*/
@font-face {
  font-family: 'icomoon';/*字体名*/
  src:  url('../fonts/icomoon.eot?fcdq5i');
  src:  url('../fonts/icomoon.eot?fcdq5i#iefix') format('embedded-opentype'),
    url('../fonts/icomoon.ttf?fcdq5i') format('truetype'),
    url('../fonts/icomoon.woff?fcdq5i') format('woff'),
    url('../fonts/icomoon.svg?fcdq5i#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

.useFontFamily{ font-family: icomoon;     }

清除浮动
当你觉得设定了width之后，padding和border在变的时候（加了个border让你的布局变得面目全非。。）计算麻烦，可以使用box-sizing：border-box;(将width=content改为width=content+padding*2+border*2)
简单轮播图的布局：设定一个外边框大div，设定属性overflow:hidden; position:relative;(为轮播图按钮的绝对定位做准备)。然后里面嵌套轮播图div，width：99999px;(很大，足够装下所有轮播图)，设定为绝对定位，left：0px; top:0px; 然后设定轮播图片向左浮动，这样所有图片都在一行显示，父级div超出部分隐藏。（js中只要修改left值便可以实现左滑动轮播的效果）。
实现垂直居中的几种方式
flex布局

js文件编写：

实现该效果，鼠标悬浮在“我的京东”，显示隐藏的div

将“我的京东”和隐藏的div放在同一个大的div下，使用绝对定位，将隐藏div移动到边界一致的地方，通过给外层大div绑定mouseover事件和mouseout事件来控制里面div的显隐。

一个倒计时函数

function killTime(){
	var hour=12,minute=30,second=40;
	computeTime(hour,minute,second);
}

//计时器
function computeTime(hour,minute,second){
	var timer=null;
	timer=setInterval(function(){
		if(hour>0){
			second--;
			if(second==0){
				second=59;
				minute--;
				if(minute==0){
					second=0;
					hour--;		
				}
			}
			if(second<10){second="0"+second};
			if(minute<10){minute="0"+minute};
			if(hour<10){hour="0"+hour};
			console.log(hour+":"+minute+":"+second);
		}				
		else{
			clearInterval(timer);//清除计时器
		}
	},1000);
}

好了，这个项目就介绍到这里，至于用到的图片素材嘛，自己去京东商城看咯，

有需要源码的说一声