前端学习--电商网站开发实战

[转]来自于慕课网学习整理。

一、首页制作

1、准备工作：

新建文件夹ds,文件夹内有文件夹：images,js,style。

新建HTML文件在ds文件夹下，CSS文件在style文件夹下。

关联HTML和CSS：

CSS文件内，reset操作：

2.顶部结构

1）  

收藏慕课：用a标签，设置背景图片，且设置padding-left

设置左右浮动。

2）   

log设置左浮动  

3）

search_box设置左浮动； 

search_box:  search_text(360px*35px),search_btn(70px*35px)

search_text要设置padding:0 5px,所以其width:360-2*5=350px

遇到的问题，IE6不支持部分功能：

（1）input search_text仍然有边框。解决: background设为none,

（2）input内文字不垂直居中。解决1：重新设置height,padding,line-height:

高度=height+padding-top+padding-bottom

解决方法2：

CSShack的目的就是使你的CSS代码兼容不同的浏览器。当然，我们也可以反过来利用CSShack为不同版本的浏览器定制编写不同的CSS效果。

4）

ShopCar设置右浮动；

span是一个行内元素，行内元素浮动了就变成块级元素了，可以设置宽高等等了

技巧：解决shopText/shopNum添加完背景图像之后，让文字移动到想要的位置：

a.设置padding,并且同时width减去padding的设置数值

b.设置text-indent

这里shopText用的b方法，shopNum用的a方法

--->

5）

小三角在文字右边的i标签内，折让方便定位。

6）

7）

    

 如何控制两行的间距？

通过height/line-height

此例子，上一行是dt,下一行是dd,是不同的，所以可以控制dt的height。

8）

关键知识点：如何控制两行的间距？对于同样是dd标签的内部有两行，设置合适的行高。

9）

当点击左侧列表第二项时，展开右侧列表，同时左侧第二项的样式改变。

为第二项加一个类，并且为此类设置相应样式。样式设置好之后，可以把此类去掉，可在JS中加入动态的添加类。

10）此列表当不点击相应列表时时隐藏状态，添加类hide.

       在CSS中公共部分，设置类hide与show

 

11）

准备好所有的banner图，譬如说两张；

设置图片的包裹div:I'mBox的width=imgWidth*Banner张数；

设置图片的包裹div的包裹div:banner_bar的width=imgWidth,并且overflow:hidden;

如下：

banner图片下面的指示图像链接：

如何显示第二张?

改变banner包裹层的left.

12）

13）

 <--   

可以由右侧部分的HTML代码改编而来。如何改造？

发现两个banner，只有width和height的属性不同。可以把横向的banner中的宽高属性拿出来放到

一个类banner_big中；然后设置banner_sm类，设置竖向banner的宽高。

分别为两个banner_bar添加类banner_big/banner_sm

复制右侧部分的代码，

14）

  

右侧总共的距离为1000px-bannerW(190)=810px,810/4=202.5px,可以取整数203px

右侧每个块分到的距离203px=202px(width)+1px(border)

最后，第四个块掉下去了，因为宽度不够了：203*4-808px=4px,少了4px,所以右侧的整体div 设置margin-right:-4px;

 

为描述文字设置距离：注意line-heigh,padding,margin

   

最外层的div的padding-top(如图中蓝色方框所示)

右侧是text的div的总高度为阴影区域，红色宽方框所示为text的padding-top(注意line-heiht占据的位置)

line-height的高度为红色细方块。

15）

===============================================================

出现的bug:

1.缩小窗口之后出现的问题

此页的结构是Header部分为和网页可视等宽的值，其父元素body也是；

下面的部分的宽度都为固定宽度：1000px;

当窗口缩小到>1000px时，是正常的。

当窗口缩小到<1000px时，出现滚动条，当滚动到最右边时，上边header部分出现白色背景。

解释，如：

<div class=”parent” style=”width: 100%; background-color: #f00;”>

    <div class=”child” style=”width: 1000px; background: url() no-repeat;”>

        ….省略若干层

    </div>

</div>

     想实现一个和浏览器等宽的div，parent；在该div里实现一个固定宽度为1000像素的div，child ；当浏览器窗口宽度大于1000px时，显示很正常；但是当浏览器宽度小于1000px时，出现了水平滚动条，拖动滚动条发现，右侧的parent居然变成了白色，为什么会这样呢？

可能你会说，我不是设置parent宽度和浏览器等宽了么，为什么还会出现这种问题，其实由于你设置了child的宽度为固定值1000px，当浏览器的宽度小于这个值时，实际parent元素并未撑到1000px，而是按照自己设置的浏览器可视宽度和min-width属性中的最大值进行设置，此时计算的结果就会出现偏差，也就是你看到的为什么parent的宽度是当前可视窗口的宽度，拖动滚动条右侧全部变白了，那么怎么修改呢？很简单

<div class="parent" style="min-width: 1000px; background-color: #f00;">

    <div class="child" style="width: 1000px; background: url() no-repeat;">

        ....省略若干层

    </div>

</div>

如果你body下有很多层，你不妨可以将body设置一下min-width。

最终解决方法：添加body CSS样式：body{min-width:1000px;}

或者可以不让滚动条出现：body{overflow:hidden;}
 

二、产品分类页制作

1）

   

2）

 

解释：因为products中一共四列item,所以item的item设置为25%.

============================================================

IE6中的bug:

1) 

问题：标题h3下的两个border没有重合。

是因为h3是子元素，其父元素的要包裹子元素，所以父元素的boder包裹了h3的border；

解决：

2)

有一列没了。通过删除其他项，只留4项发现，有一项掉到第二行了。

查找方法由大范围逐渐缩小：未数码影像的整体添加background,发现与chrome没什么区别。

其实是ie6里计算width的%数值，计算得不好。

解决：width缩小百分比，写法*width这种写法只针对ie浏览器

三、产品筛选页制作

1）改造左侧产品分类

<--  

......

2）

四、详细内容页制作

五、商品评价页制作

六、购物车页面制作

七、登录、注册页制作

 

转载于:https://my.oschina.net/u/3176241/blog/840094