网页购物首页设计 第1篇
该区域内容的整体结构也是分为上下结构，上部分是区域的标题头header，该标题头的内容实际上就是插入一张图片，而下部分是展示内容content的主体。在content区域中实际上又划分为左右两部分。在content左边的第一、三、四图实际上知识图片，只需要用一个div容器包装即可，第二个方框不是图片，内含一些文字设计和一个list内容。content的右半区域设计也很简单，也都是单纯地在div区域中嵌入图片即可。过渡效果也是当鼠标悬浮在某块内容上，整体向上位移而且边框底部颜色变绿，和“明星机型”中的设计类似。
html结构代码：
网页购物首页设计 第2篇
该区域的设计也相对简单明晰，主要是用的就是ul和li标签去控制布局，和明显这些样式类似，因此我们就可以使用列表标签元素，但要注意元素与元素之间的边距设置，保持美观的效果。如何控制边距的设置可以在浏览器中打开后端控制台进行查看元素（审查元素），可以在浏览器中对元素的css属性进行调节（但是这个调节只是帮助我们了解如何设置元素属性，但是页面的源代码仍未改变，因此在获取到合适的元素属性之后仍然要返回源代码中去修改CSS样式）。 html代码：
网页购物首页设计 第3篇
欧珀区域的整体设计仍然也是上下结构，上部分结构是一个图片格式的区域标题，只需要使用div套住图片并且居中果显示即可。下部分content内容分成左右两块区域，该区域的属性也要设置float属性，左半部分为left浮动，右半部分为right浮动。content左部分实际上是一个list列表，每个列表中存在div标签，然后往div标签中嵌套img标签以加入图片。content右半部分是一个列表，由于此处使用了图文混排格式，因此我们在此处考虑使用dt和dd标签来替换ul和li标签（但实际上ul和li也能达到这个效果），我们将图片放入dt标签中，对图片内容的解释文字放入在dd标签中。dd和dt是一对自定义列表的组合标签。
html代码：