小米页面实战

1.分析网页需求 ：

上面的部分是网页导航栏，左边有网页导航，右边是个人信息和购物车信息，还有登录注册等按钮。

2.难点：

解决浮动带来的边界塌陷。因为左边的网页导航向左浮动，右边的信息向右浮动，然后要解决这两个浮动造成的边界塌陷问题。

3.方案：

通过伪元素解决。

解决前：

解决后： 

代码：

二、加入超链接：多个加入可以选择编辑栏，然后选择最后一行，同时操作。

三、实现页面滚动：给body加上高度就OK

四、实现购物车的功能：设置为块元素，文本居中，设置块元素的高度和字体的高度。

效果：

file:///E:/%E5%B0%8F%E7%B1%B3%E9%97%AA%E8%B4%AD/index.html

 五、菜单栏做好了！下面的导航栏流程：

左边有小米商城的LOGO，右边是一些分类的服务。首先设置一个DIV包裹所有的背景，控制这一层的高度和宽度，里面嵌套一个DIV保证所有的内容处于居中的位置，设置三个DIV分类包裹左边的LOGO，中间的选项服务，右边的搜索框。

第一个DIV控制页面的高度，第二个DIV设置居中，具体代码：