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设置居中,具体代码: