0

I'm fairly new to stylesheet so this maybe a very simple question. I noticed that Amazon's website has 2 really cool features that I would like to replicate.

  1. At the middle of the page, there is a grid that lay out icons horizontally for their recommendations and other stuff. Depending on the width of the page, it shows either 4 or 5, or 6 up to 8 icons/items horizontally. They do this without refreshing the page. I tried to read the source, but it looks like a bunch of stylesheet trick that is making this happen.

  2. The "Shop by Department" on the left is also very interesting. If your page is narrow, it disappears, but it shows up when you mouseover. If the page is wide, then it shows up.

If anyone can point me to the right direction or some sample code, it would be great. Thanks

4

1 回答 1

0

问题一：

这不仅仅是CSS。

使用表格在每一行中存储您想要的任意数量的元素，然后为整个表格设置一般宽度。

使用 javascript/jquery 根据该表大小计算每个元素的宽度。

问题 2： http ://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/ 你可能想看看那个。据我在亚马逊网站上看到的，侧边栏永远不会消失。

编辑：

1.假设你有一个 1000px 宽度的页面。2.为侧边栏设置左侧的前 200 像素。3.使用jQuery检查当前页面宽度。4.如果pageWidth<1000px, sidebar{display:none;}

但实际上，这些代码在网络上无处不在。

于 2012-05-18T02:58:14.763 回答