购物车页面布局新手级别理解和解析

在经过简单的前端学习后,迎来了本次的作业,于是打算记录一下。

1.前端视图

由于一张截图截不下,于是分成两张截

购物车页面布局新手级别理解和解析_第1张图片

购物车页面布局新手级别理解和解析_第2张图片

2.大致分析

首先大致分析导航栏部分内容。

可以按照排版分析它的块分布,每个人分块不同无所谓,能大致实现模仿即可。

这次作业我将导航栏分为三行,大图片分为一行,表单标题分一行,购物车列表每件一行,结算一行,如下图。

购物车页面布局新手级别理解和解析_第3张图片

购物车页面布局新手级别理解和解析_第4张图片

3.拆开每一级分析细节,并设置CSS样式

1>首页导航栏

分析:内部分为两块的原因是因为两块内部元素的距离相隔太远,与其慢慢控制内部样式,倒不如直接将元素分为左右两块。

左边块只有一个图标和一个超链接,只需要控制格式(居中、内外边距什么的)。

右边块里面有两个超链接元素,而且是横向排列,因此有两种选择,一种是使用一个一行两列的表格,内部放置两个超链接,第二种是使用无序列表。使用无序列表的话就需要通过弹性盒子去控制内部元素横向排列。

购物车页面布局新手级别理解和解析_第5张图片购物车页面布局新手级别理解和解析_第6张图片

购物车页面布局新手级别理解和解析_第7张图片购物车页面布局新手级别理解和解析_第8张图片

 

2>搜索框

分析:按照距离可知需要第二行的内部需要分为左右两块。

左边是一张图片,有两种方式,第一种是定义一个块,里面放一张图片,第二种是定义一个块,使用这张图片作为背景。

右边是一个搜索框加一个图标,且搜索框和图标为横向排列,方式有很多,这里就使用一行一列的table来实现(哈哈,感觉有点多余,暂且就这样用吧)

因为存在相同的样式,上面注释了三遍,下面再出现相同的样式就不另外做注释了。

购物车页面布局新手级别理解和解析_第9张图片购物车页面布局新手级别理解和解析_第10张图片购物车页面布局新手级别理解和解析_第11张图片

3>超链接跳转

分析:第三行中的结果比较简单,主要是将内容聚集在左下角,于是我使用一个无序列表的弹性盒子,设置它的宽度(不选择大div的宽度而定义小一点,够用就行)

购物车页面布局新手级别理解和解析_第12张图片

购物车页面布局新手级别理解和解析_第13张图片购物车页面布局新手级别理解和解析_第14张图片购物车页面布局新手级别理解和解析_第15张图片

4>大图片

分析:首先从格式可以看到,上下是有空白的,于是可以在大块中定义小块实现效果(根据需要实现的效果控制小块的宽高即可),里面的两行字是不同的效果,实现的方式很多,可以使用span各自定义,在此第一行文字使用了一个小div放置一个p元素,另外一个p元素就放在小div之外控制样式。

购物车页面布局新手级别理解和解析_第16张图片

购物车页面布局新手级别理解和解析_第17张图片购物车页面布局新手级别理解和解析_第18张图片购物车页面布局新手级别理解和解析_第19张图片

5>商品列表表格标题

分析:第五行实现效果的方式很多,弹性盒子也行,使用table也行,我在此使用table。

购物车页面布局新手级别理解和解析_第20张图片

购物车页面布局新手级别理解和解析_第21张图片

6>商品列表行

分析:商品列表信息这一栏可以使用table实现,但是内部调整需要很精确,不然会改动所有内容,会复杂一点。我使用的无序列表,因为列表中可以使用的东西比较多,配合弹性盒子就可以实现横向排列,控制li标签格式就能实现想要的效果。使用列表的话,只用对内容元素较多的li标签进行精细一点的样式配置即可。

因为第二个子标签中有图片有文字,因此最好配合一个div来使用,同理第四个子标签也是。

购物车页面布局新手级别理解和解析_第22张图片

购物车页面布局新手级别理解和解析_第23张图片购物车页面布局新手级别理解和解析_第24张图片

购物车页面布局新手级别理解和解析_第25张图片购物车页面布局新手级别理解和解析_第26张图片

购物车页面布局新手级别理解和解析_第27张图片购物车页面布局新手级别理解和解析_第28张图片

购物车页面布局新手级别理解和解析_第29张图片购物车页面布局新手级别理解和解析_第30张图片

购物车页面布局新手级别理解和解析_第31张图片购物车页面布局新手级别理解和解析_第32张图片

购物车页面布局新手级别理解和解析_第33张图片购物车页面布局新手级别理解和解析_第34张图片购物车页面布局新手级别理解和解析_第35张图片

7>结算栏

分析:其实每种效果实现的方式很多,不同的样式配合起来就能实现效果,这里接不多解释了。

购物车页面布局新手级别理解和解析_第36张图片

购物车页面布局新手级别理解和解析_第37张图片购物车页面布局新手级别理解和解析_第38张图片购物车页面布局新手级别理解和解析_第39张图片购物车页面布局新手级别理解和解析_第40张图片

4.功能实现

除开界面,里面还有一小部分需要js实现的功能:全选、反选、件数计数、数量加减、小件计价、总价计价、删除和批量删除。

思路:

全选:先判断全选框的状态,然后将全选框(".select_all")的状态(checked)赋值给每个复选框(".goodsId")。

反选:遍历所有复选框的状态,当出现有为false状态的复选框时,就将全选框的状态改为false。

件数计数:遍历所有复选框的状态,为true的话就自增,但是需要在每次触发复选框状态时判断,因此建议定义为函数,方便调用。

数量加减:给加减号绑定单击事件。

小件计价:当触发数量加减的单击时间时,小件计价功能应该同步实现,因此需要通过单击位置找到单价和数量的值(找兄弟关系的内容),相乘产生价格并在小计的位置显示出来。

总价计价:在触发复选框状态的时候,需要将复选框状态为true的小计价格加起来。

删除:通过给删除绑定单击事件,找到商品列表中的一整条商品的div,然后删除(remove)。

批量删除:绑定单击事件,当触发单击事件时,判断复选框状态,将复选框状态为true的元素删除(方法同删除)。

$(function() {

	//减号
	$(".line2-sub").click(function() {
		if (Number($(this).next().val()) <= 1) {
			$(this).next().val(1);
		} else {
			$(this).next().val(Number($(this).next().val()) - 1);
		}
		// alert(Number($(this).parent().children(".price").val()*Number($(this).parent().children(".line2-num").val())));
		console.info($(this).parent().parent().parent().children(".price").text());
		console.info($(this).parent().children(".line2-num").val());
		console.info(Number($(this).parent().parent().parent().children(".price").text()) * Number($(this).parent().children(
			".line2-num").val()));
		// console.info($(this).parent().parent().parent().children(".colPrice").text());/
		$(this).parent().parent().parent().children().children(".colPrice").html(Number($(this).parent().parent().parent()
			.children(".price").text()) * Number($(this).parent().children(".line2-num").val()));
		// colPrice();
		spendSum();
	});

	// 加号
	$(".line2-add").click(function() {
		$(this).prev().val(Number($(this).prev().val()) + 1);
		// colPrice();
		console.info($(this).parent().parent().parent().children(".price").text());
		console.info($(this).parent().children(".line2-num").val());
		console.info(Number($(this).parent().parent().parent().children(".price").text()) * Number($(this).parent().children(
			".line2-num").val()));
		$(this).parent().parent().parent().children().children(".colPrice").html(Number($(this).parent().parent().parent()
			.children(".price").text()) * Number($(this).parent().children(".line2-num").val()));
		spendSum();
	});

	//全选
	$("#select_all").click(function() {
		// alert("hello");
		$("input[name='goodsId']").prop("checked", $(this).prop("checked"));
		//查询到bottomCheckbox内的span,将结果填充进去
		// $(".goodsNumSum").html(toltoNum);
		toltoNum();
		var sum = 0;
		$("input[name='goodsId']:checked").each(function() {
			sum += Number($(this).val());
		});
		$(this).parent().parent().parent().parent().children(".result").children(".result-right").children().children().children(
			".colPrice").html(sum);
		spendSum();
	});


	//反选
	$("input[name='goodsId']").click(function() {
		// alert("hello");

		//标记输入框状态,一旦为false则表示有复选框未被选中
		var state = true;
		//获取列表信息
		var goodsList = $("input[name]");
		//遍历输入框状态
		for (var i = 0; i < goodsList.length; i++) {
			if (!goodsList[i].checked) {
				//如果存在有输入框的状态为false,则改变全选框的状态
				state = false;
				break;
			}
		}
		$("#select_all").prop("checked", state);
		//找到goodsNumSum(span标签)对象
		// alert($("input[name='goodsId']:checked"));
		toltoNum();
	});


	//总计件数
	function toltoNum() {
		// var sum=0;
		// //获取商品列表为true的数量和
		// var goodsIdArr=("input[name=goodsId]");
		// for(var i=0;i

 

你可能感兴趣的:(css,html)