【CSS+DIV】(3)——网上购物网站

本文通过实例介绍了如何利用CSS和DIV构建一个网上花店,包括设计分析、排版框架和代码实现,强调了实践与用户体验的重要性。
摘要由CSDN通过智能技术生成

背景:CSS学习已经完成了,这部分内容比较好玩,后面还分析制作了各种小例子,UI的内容做的十分绚丽多彩,如果加上后台内容就会更加完美了。目前网络上的购物网站已经越来越多了,淘宝、京东、当当等大型购物网站以及经营各种小生意的网站层出不穷。张罗网上的商店甚至成了很多人的工作。本文以网上的花店为例,介绍如何构建小型的网上商店。进一步熟练CSS构建网站的方法。



一、设计分析



    该网站的文字内容并不是很多,主要页面都是商品的展示,包括各式各样的鲜花图片以及售价。另外考虑到具体购买的情况,因此网站必须配备登陆系统。左侧放置导航,将鲜花进行各方面的分类,便于顾客的分类查询。

    页面整体上使用粉红色调,图片的边框都使用红色系,各个小标题偶尔配上些亮绿色作为点缀,别有一番风味。主体部分的内容大体又分为本站推荐商品、鲜花的报价、新品上市和鲜花的导购等,各个栏目都采用白色背景,让页面在红火的色调下不失高雅、整洁与大方。

    左侧的登陆系统和鲜花导购的文字主要采用黑色,目的在于清晰,让顾客能够迅速找到想要购买的商品。



二、排版框架




    上图中的各个部分直接采用了HTML代码中各个<div>块对应的id。其中的#banner块对应页面上部的Banner图片,#globallink则是网站的导航菜单栏,#left包含登陆系统以及鲜花的分类信息,#main块则主要包括本站快讯、鲜花推荐、新品上市和鲜花导购等。其中#left与#main是页面的主体块。其子块关系如图:





三、代码分析


评论 18
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值