The article contains a project written by Html, Css and JavaScript…

开发流程

原型图

效果图

跟MySQL一样，全部写开来执行更快

制作favicon图标

TDK三大标签SEO优化

首页制作

这里中间的“|”也是一个盒子，这一排都做成li

SEO优化

导航栏制作

注意，这里是给a标签padding值，不是给li

由于header和footer的版面有很多相似之处，因此我们应该跳过中间部分先做footer

Footer制作

中间体制作

注意：现在这个main里面的样式是index里面专有的，需要新的样式文件index.css

注意：focus里面放的图片是经常需要更换的，因此需要放到upload文件夹里面

要想让li不换行应该设置ul宽度再宽一点，多出部分overflow：hidden

这一块有个特点就是在导航栏里面点哪个就跳到哪里，适合放在一个大盒子里面

注意：由于产品数目不一定，因此不要把高度写死

一般情况下，a如果包含有宽度的盒子，a需要转为块级元素，不然可能有莫名其妙的错误

列表页制作

这里把list.css写在common.css下面，可以把common.css的样式给覆盖掉

出现了上面这种问题，咱们的123理应在左侧abc上面，但是实际上却不是，主要原因是因为上面导航栏高度设大了，而且设置了float，float不会压住文字

解决方法：

设置overflow：hidden

如果我们不想让盒子的hover事件使得在给盒子添加border的时候产生副作用让盒子变大，我们可以通过给盒子添加透明边框来实现：

结果发现盒子的右下边框还是没有变色：

这是因为这是一张图片，而图片超出了盒子父亲本身大小，即向右下移动了，导致盖住了红色边框线，解决方法：overflow：hidden

注册页面制作

由于隐私问题不需要SEO优化，页面越简单越好

注意重复代码的优化