技术交流QQ群:1027579432，欢迎你的加入！

1.确定版心

  • 这个页面的版心是1200px，每个版心都要水平居中对齐，可以定义版心为公共类： 
    .w {
    width: 1200px;
    height: auto;
}

2.头部制作

页面头部制作.png
  • 1号是版心盒子header1200*42的盒子，水平居中对齐，上下给一个margin值；
  • 版心盒子里面包含2号盒子logo；
  • 版心盒子里面包含3号盒子nav导航栏；
    • 实际开发中，不会直接用链接a，而是用li包含链接(li+a)的做法。
      • li+a语义更清晰，一看就是有条理的列表型内容；
      • 如果直接使用a，搜索引擎容易辨识为有堆砌关键字嫌疑(故意堆砌关键字，容易被搜索引擎有降权的风险)，从而影响网站的排名。
  • 版心盒子里面包含4号盒子search搜索框；
  • 版心盒子里面包含5号盒子user个人信息；
  • 注意：要求里面的4个盒子必须是浮动的！
2.1 logo区域设计
  • 使用PS中的Cutterman工具对学成网首页.psd文件进行切图，提取出logo.png图片。
2.2 导航栏nav的设计
  • 实际开发中，不会直接用链接a，而是用li包含链接(li+a)的做法。
  • 让导航栏一行显示，给li加浮动，因为li是块级元素，需要一行显示。
  • 这个nav导航栏可以不给宽度，将来可以继续添加其余文字；
  • 因为导航栏中的文字不一样多，所以最好给链接a左右padding撑开盒子，而不是指定宽度。
2.3 搜索search模块

  • search搜索框：一个search大盒子，里面包含2个表单。


    search搜索框.png
2.4 用户user模块

3.banner制作

banner制作.png
  • 1号盒子是通栏的大盒子banner，不给宽度，给高度，给一个蓝色背景；
  • 2号盒子是版心，要水平居中对齐；
  • 3号盒子版心内，左对齐subnav侧导航栏；
  • 4号盒子版心内，右对齐course课程；
3.1 subnav侧导航栏
  • 实际开发中，不会直接用链接a，而是用li包含链接(li+a)的做法。
  • a里面再加入一个span标签，然后再输入>后右浮动；
3.2 course模块

  • course模块是一个大盒子，里面再包含上下放置的两个小盒子。


    course模块.png

4.精品推荐模块

精品推荐模块.png
  • 大盒子水平居中goods精品，注意此处有个盒子阴影；
  • 1号盒子是标题h3左侧浮动；
  • 2号盒子里面放链接左侧浮动，goods-item距离可以控制链接的左右外边距(注意行内元素只给左右内外边距)；
  • 3号盒子右浮动mod修改；

5.box核心内容模块

box核心内容模块.png
  • 1号盒子为最大的盒子，box版心水平居中对齐；
  • 2号盒子为上面部分box-hd，里面左侧标题h3左浮动，右侧链接a右浮动；
  • 3号盒子为低下部分box-bd，里面是无序列表，有10个小li组成；
  • 小li外边距的问题，这里有个小技巧是：给box-hd宽度为1215就可以一行装5个li。

6.footer底部模块

底部模块.png
  • 1号盒子是通栏大盒子，底部footer给高度，底色是白色；
  • 2号盒子版心水平居中；
  • 3号盒子版权copyright左对齐；
  • 4号盒子链接组links右对齐；

7.资料下载

本节完整代码，欢迎star,follow,fork......