hello everybody，许久不见，甚是想念，关于我为什么四天没更新博客的原因就是本次文章的标题，没错，我们老师布置了项目设计，而我这个大怨种选择了淘宝首页这个页面内容多的，以至于我这个小白敲了四天才完成，那么，今天就来给大家分享一下我完成这个项目的过程吧（事先声明我的作品还原度并没有百分之百达到，做的不好请大家勿喷（QAQ）），下面先给大家做一个最终结果展示： 最终成果展示效果图：
下面我会从头来说一下我的全局布局思路以及如何用代码实现这个界面。
1.结构布局： 结构布局是做一个项目开始非常重要的一点，我们要具有整体思想，由整划分小部分，这样才方便我们后期的制作和修改。
以上为淘宝官网截图，观察整体结构后我把它分为三块，分别是顶部的导航栏，导航栏下方的搜索框栏和下面商品的详情栏三个大部分，在代码中这三个部分就是三个大盒子，里面都是被包裹的内容。
然后我们从这三个大盒子入手，一个一个去解决. 1.1 导航栏布局：
为什么把导航栏单独作为一个大盒子编写的原因，是因为导航栏其中的内容也是有下拉菜单的，所以这个下拉菜单又要包裹在导航栏的文字里面，于是为了方便我将整个导航栏当做一个大盒子，在内部进行操作，然后把左右两边得文字再分成两个中盒子，最后将下拉菜单作为小盒子包裹在中盒子里面。
1.2 搜索栏布局：
导航栏部分我当做一个大盒子，里面包含了三个中盒子包裹中间三部分内容，然后中间一个中盒子的内部再用两个小盒子包裹，之后进行内容填入以及布局。
1.3 内容栏布局：
内容栏里面的内容丰富且繁杂，所以布局在这里就尤为重要，布局不好会导致后期内容编写的时候麻烦不断，首先我将内容区部分作为一个大盒子，内部包裹的内容分为上下两个中盒子，下面中盒子就用来包含详细商品，上面这个中盒子内部包含两个小盒子，然后右边这个小盒子里面包含三个更小的盒子用来存放内容以及一个轮播图。
2.代码实现： tg布局完成以后，我们就需要用代码来实现每个部分的详细内容以及内容的表达样式，这是一个繁琐的过程，要耐心且细心，专心且专注。
2.1 导航栏代码 导航栏部分我用header命名，然后用的是两个ul列表标签包裹，li里面包裹文字，然后下拉菜单用div盒子包裹并分别命名，代码如下所示：