小米商城主页面的实现（HTML+CSS）

小米商城主页面的基本实现

本篇文章将说明分析小米商城主页面如何搭建，源代码在GitHub.上，如果帮助到您，希望获得您的star~

1.小米商城主页面的基本分析

首先浏览小米商城官网整体页面，可以将它划分为以下五大部分

1. 顶部栏（topBar）：位于最顶部，用于展示相关商城信息；
2. 导航栏（header） ：位于顶部栏下面，用于展示页面主要内容；
3. 内容主页区（site-content） ：主要用于介绍商品的大致信息；
4. 内容详情区（content-desc）） ：主要用于介绍商品的简要情况；
5. 脚部（footer） ：用于展示售后服务等相关信息；

可以看到，关于文字的内容区域，都是居中显示，因此可以定义一个公共类（container）用于实现文本内容区域居中显示。官网上可以看到，这个container的宽度为1226px，因此以1226px为标准，下面每行宽加起来应不超过1226px。

2.小米商城的顶部栏（topBar）分析

可以看出，顶部栏分为三大部分，左侧的列表，最右侧的购物车以及居右的登录信息框
左侧列表（topBar-list）：可以看出左侧列表每一个都是超链接，所以用a标签包裹文字，每个列表之间有个“|”分隔
购物车（shop）：购物车也是一个超链接，在文字的左边有个图标，可以用iconfont表示
登录信息框（login）：登录信息框也是超链接
（1）顶部栏占据整一行，因此topBar设置样式宽应为100%，高度跟官网一样设为40px，背景色为*#333*
（2）设置container类，这个类实现文本区域内容居中显示的效果，查看官网可以知道，这个宽为1226px，外边距设为0 auto，高度设为100%，让里面文本高度与外层盒子高度一致。
（3）topBar-list列表区、login登录区与shop购物车一样，文本都是由a标签包裹，因此可以整体设置a标签的样式，文字颜色为#b0b0b0白，大小为12px，让行高等于高度40px，实现文本内容垂直居中显示。最后将a标签设为行内块元素，实现将a标签间分隔开。
（4）topBar-list列表区、login登录区的文本内容其实都有一个“|”隔开，我们可以让span标签包裹住这个“|”，然后设置span标签样式。查看官网可以看到它的颜色设置为#424242，外边距为0 .3em
（5）topBar-list列表区居左，因此向左浮动，shop购物车与login登录区都居右，因此都向右浮动
（6）shop购物车是个120*40的盒子，然后还要设置它的行高，实现垂直居中，tex-align：center实现文本内容水平居中，它的背景颜色与span标签包裹的“|”一样，都为#424242。文字前面是个图标，可以用iconfont表示。
（7）还要考虑鼠标移动到a标签文字上切换颜色的效果，设置a:hover，文本颜色改为#fff白

3.小米商城的导航栏（header）分析

导航栏为三大部分组成，最左侧的logo图标（site-logo），居于中心的文字列表（site-list）以及位于logo下方的侧边栏（category-list），以及最右侧的搜索输入框（site-search）。
图标（site-logo）：用于展示公司logo
列表区（site-list）：用于展示相应的导航内容
搜索框（site-search）：用于搜索相应的内容
（1）因为有container类包裹文本内容区域，因此header导航栏整个外盒子不必设置宽度，可以固定一个高度包裹导航栏内容，这个高度为100px。
（2）site-logo图标区域，也是一个超链接，因此用a标签包裹img标签。site-logo整体是居左，因此site-logo给整体一个左浮动，logo是一个5656图片，因此包裹它的a标签宽高要设为56px，并且display设置为block。为了样式好看，因此图标的外边距应设为（100-56）/2=22px，宽度根据官网相应设置为62px
（3）site-list列表区由ul li组成，第一个li为庆祝节日的gif动图，这个li下面包含着category-list侧边栏，其它的li为导航栏文字内容。site-list列表区根据所处区域不同，分为两个部分，因此选择器要使用正确，不然会有样式冲突。因为列表需要浮动，因此需要清除浮动带来的影响，设置一个公共类clearfix来清除浮动。site-list列表区需要整体左浮动，并且需要给整体一个宽度，这个宽度设为850px。site-list里面的列表区域也需要设置宽高，因此它的宽设为820px，高88px，内边距相应的设置为12px 0 0 30px，这样正好满足外盒子与内盒子宽高一致。里面的字体需要比顶部栏的大，因此设置为16px。
（4）site-list的文字是超链接，因此是由a标签包裹，a标签要变为块级才能使得浮动后的列表区域为一行显示，它的文字设置为#333白，内边距根据官网设置为26px 10px 38px，并且设置hover伪元素，当鼠标移动到文字上时变化字体颜色为#ff6700橙色。
（5）为了使居于下面的侧边栏平面高于接下来要设置的轮播图平面，要设置一个相对定位，并且z-index要设置的比轮播图的z-index大。侧边栏的整体宽高设为234px与460px，设置一个透明背景显示侧边栏，并且设置绝对定位，相应的改变top与left的值，直到整体侧边栏移动到我们想要的位置。除了文字，它还有一个类似“>”的符号，这个符号用iconfont图标表示，装在span标签里，也是通过设置绝对定位整体调整位置，如果找的图标大小不合适，通过设置font-size调整大小。
（6）site-search搜索框整体向右浮动，宽根据官网设为296px，上外边距根据调整设置。搜索框里的表单也设为296px，高度设为50px，左边的文本框宽设为223px，高为48px，向左浮动，内边距左右为10px。搜索框里的提交框设为5050的盒子，然后在这个盒子里输入搜索的图标。

4.小米商城的内容主页区（site-content）分析

内容主页区分为两大模块，轮播图以及向导。
轮播图（site-slider）：这个区域实现图片的切换，并且左侧为header导航栏的侧边栏模块，它由图片、左右按钮以及右下方小点三部分组成。
向导（content-sub）：这个向导区域分为两块，左向导为6个分区小内容，而右向导为三张图片

（1）轮播图的内容，除了左右两个按钮使用span标签包裹外，其它都是使用a标签进行包裹。首先得对轮播图设置相对定位，z-index要比上方的侧边栏小，让侧边栏显示在轮播图左边。container内容区域宽度为1226px，因此包裹轮播图照片的a标签宽度也要为1226px，高度根据照片设置为460px，并且display设置为块级。显示左右按钮的两个图标，是用雪碧图做的，因此需要使用绝对定位来设置它们相应的位置。当需要切换图片的时候，使用background-position进行切换。

（2）轮播图右下方的小点也是使用绝对定位来控制位置，它的宽高设为200px与30px，整体内容居右，让行高等于高度实现垂直居中，通过设置bottom与right来控制到合适的位置。每个小点都是一个超链接，因此使用a标签进行包裹，将它的宽高设为6px，并且设置透明的背景色，透明的边框，设置border-radius为6px实现变成小圆点效果，它们之间需要分隔开，因此设置左右外边距为5px隔开。

（3）向导图是由列表组成，它们需要浮动起来，因此需要清除浮动。首先向导图要与上面内容保持外边距，因此设置一个上外边距为18px，并且清除浮动等带来的影响，设置overflow：hidden。向导左与向导右都设置左浮动，向导左的宽度为234px，向导右的宽度为992px。向导左背景色为#5f5750黑，设置文本居中显示。然后需要将6个li平分为上下两部分，因此li需要向左浮动，宽度占据三分之一，高度为85px。文字由a标签包裹，因此需要将a标签设置为块级，设置一个透明背景色。里面的图标是由iconfont构成，因此也需要将它设为块级。向导右需要铺满整个平面，因此包裹住它们的ul需要设置宽为100%，然后每个li都是占据三分之一，虽然需要向左浮动，但文本是居右显示，同样的，包裹住图片的a标签需要设置为块级，并且它的高度要设置为图片的高度。

（4）banner图需要设置上下外边距，与上下部分分隔开，因此上外边距为10px，下外边距为30px。它是由a标签包裹的，因此需要将a标签设为块级，高度与图片高度一样都为120px。

5.小米商城的内容详情区（content-desc）分析

内容详情区主要由box-hd标题内容与box-bd图片内容两大部分组成。
标题内容（box-hd）：用于展示内容详情区的标题
图片内容（box-bd）：用于展示商品图片内容
（1）content-desc内容详情区有个上内边距为22px，并且有一个淡灰的背景色#f5f5 f5。box-hd给个固定高度58px，并且设置相对定位。左标题大小为22px，让它不加粗，并且垂直居中，字体颜色改为#333黑。右边的更多内容区域设置绝对定位，并且right与top都设为0。a标签的大小设为16px，并且让它处于垂直居中状态，字体颜色为#424242黑，右边的图标用iconfont表示，给个12*12的盒子装着，并且让它变成一个圆，并且给相应的内边距4px，左外边距8px，背景色为#b0b0b0灰。当鼠标移动到它们的时候，相应的改变颜色为#ff6700橙色。

（2）box-bd图片区域都是向左浮动，row-l宽度为234px，row-r宽度为992px。它们都需要清除浮动，因此在它们之上建立多一个div clearfix类，实现清除浮动的效果。左侧大图是用a标签包裹，因此a标签需要设为块级，并且宽高都设为100%，里面图片的大小设置为它正常的尺寸。为了避免浮动带来的影响，右侧商品描述区域的ul设置overflow：hidden。然后每个li都设置一个固定的高度，都向左浮动，拥有上下内边距20px，背景色为#fff白，它主要分为三大部分，图片，标题以及描述价格文本内容。根据需要设置好相应的样式即可。

6.小米商城的脚部（footer）分析

脚部分为两个部分，分类的服务介绍（footer-service）以及详细的服务介绍（footer-links）
服务介绍（footer-service）：用于概况售后服务内容
详细服务内容（footer-links）：用于详细介绍售后服务信息内容
（1）上部分的服务介绍（footer-service）用ul列表来写，因为要整体左浮动，因此使用clearfix类来清除浮动。首先footer-service上下有个内边距，设为27px，然后下面有边框线区分开下面的详细服务介绍。每个li设置宽度为19.8%，方便隔开，高度为25px，并且让它垂直居中、水平居中，设置字体大小为16px，每一个左边都给一个边框线，然后去除第一个li的左边框线。根据需要，设置文字前面的图标，图标用iconfont表示。

（2）下部分的footer-links由自定义列表来写，因为整体要向左浮动，因此要清除浮动，然后宽高设置跟官网一样即可，然后自行调整文字大小、外边距、背景颜色、字体颜色等相关内容。

7.小米商城主页面小结

	完成小米商城主页面搭建后，我收获颇深，更深刻明白如何搭建好一个页面。
（1）清楚整个页面的整体布局，先整体再局部，先把整体内容规划好，再自上而下的布置每一块内容。
（2）明确每个模块要实现怎样的效果，并且自外而内的设置好每个标签的样式。
（3）如果不清楚某个样式怎么设置，可以去浏览器控制台中做相应的调整，调整合适后将样式写到文件中。