用表格制作商品购买页面--(table)
实现效果如图:
首先来看布局,头部图片,内容从左到右分为四个部分 勾选+商品图片+商品名/买家+价格,
所以需要将头部用<td>包括起来,并且设置<td colspan="4">,意思是将内容设置四个列,
来看看不设置的效果:
将所有内容都挤出去了,在表格中这一标签是很重要的,
设置勾选:
<td>
<input type="checkbox" />
</td>
如下:
设置商品图片:
<td align="center">
<img src="img/235.jpg" />
</td>
设置商品名/买家:
这里因为有三层,所以其中需要建立一个表格包裹起来:
<td>
<table>
<tr>
<td>推荐商品区</td>
</tr>
<tr>
<td>买家:ZWL</td>
</tr>
<tr>
<td>
<img src="img/buy.gif"/>
<img src="img/fav1.gif" />
</td>
</tr>
</table>
</td>
设置价格:
<td>
一口价
<br />
293.56
</td>
四个部分都完成,如下所有部分都是这样。
要注意的是表格的标签用法:
<table>
<tr> ————独占一行
<td></td> ———常用来添加图片以及文字
<th></th> ———独占一些位置,自动将字体加粗,可设置样式
</tr>
<table>
用表格制作商品购买页面--(table)的更多相关文章
- table表格制作
分享一个简单的表格,代码如下: <table border=3 bordercolor=blue align=center cellspacing=3 cellpadding=6> < ...
- JS组件系列——表格组件神器:bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS组件系列——表格组件神器:bootstrap table(二:父子表和行列调序)
前言:上篇 JS组件系列——表格组件神器:bootstrap table 简单介绍了下Bootstrap Table的基础用法,没想到讨论还挺热烈的.有园友在评论中提到了父子表的用法,今天就结合Boo ...
- JS组件系列——表格组件神器:bootstrap table(三:终结篇,最后的干货福利)
前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...
- [转]JS组件系列——表格组件神器:bootstrap table
原文地址:https://www.cnblogs.com/landeanfen/p/4976838.html 前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉 ...
- JS组件系列——表格组件神器:bootstrap table 包含了js对象的定义和对象成员函数的定义
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
- JS实现页面table鼠标移动改变tr行颜色,单击tr选中复选框功能
JS源代码: //需要设置tr背景颜色 var highlightcolor='#bfecfc'; //设置背景颜色 function changeto(index){ var tr1 = docum ...
- 第04项目:淘淘商城(SpringMVC+Spring+Mybatis)【第九天】(商品详情页面实现)
https://pan.baidu.com/s/1bptYGAb#list/path=%2F&parentPath=%2Fsharelink389619878-229862621083040 ...
- 商品购买 & 收银台订单优化测试点疑问归纳梳理
摘要 更新内容 更新人 更新时间 初版内容 Young 2020.11.20 16:40 贾轩审查确认 Harry 2020.11.20 17:00 和林森沟通问题答疑 参与人:林森.Harry. ...
随机推荐
- jmeter-显示log的方法,和脚本通用的语法
beanshell log日志设置.log日志输出 步骤: 1.从选项-勾选Log Viewer,打开调试窗口 2.选择显示log的等级 3.在脚本中加入要打引的log 如: log.info(‘日 ...
- scikit-learn机器学习(二)逻辑回归进行二分类(垃圾邮件分类),二分类性能指标,画ROC曲线,计算acc,recall,presicion,f1
数据来自UCI机器学习仓库中的垃圾信息数据集 数据可从http://archive.ics.uci.edu/ml/datasets/sms+spam+collection下载 转成csv载入数据 im ...
- SaaS领域如何分析收入增长?
SaaS领域如何分析收入增长? 今天我们试着将其模式运用到收入增长上进行分析.这对常规收入的计算会极有帮助,例如企业级应用软件(SaaS)或消费者订阅业务. 列举某公司通过月度订阅获得营收为例,为了更 ...
- JAVA 基础编程练习题48 【程序 48 加密】
48 [程序 48 加密] 题目:某个公司采用公用电话传递数据,数据是四位的整数,在传递过程中是加密的,加密 规则如下:每位数字都加上 5,然后用和除以 10 的余数代替该数字,再将第一位和第四位交 ...
- 初始Hibernate框架
首先我们需要先创建一个案例 构建一个Student 的实体类 private String name; private Integer age; private Integer id; 在SRC根目录 ...
- vulstudy
vulstudy是专门收集当下流行的漏洞学习平台,并将其制作成docker镜像,方便大家快速搭建环境,节省搭建时间,专注于的漏洞学习上.目前vulstudy包含以下漏洞学习平台: 序号 漏洞平台 包含 ...
- $.ajax 中的contentType类型
参考链接:https://www.jianshu.com/p/f4d92b3d387d
- ESXi 虚拟机 提示 无法打开本地虚拟机的 xxx.vmx 的本地管道的 问题解决.
1. 今天同事与我联系, 说一个虚拟机出现连不上, vcenter控制台关闭虚拟机之后 再次打开报错: 2. 自己最开始的解决方法 移除虚拟机, 进入服务器的datastore 重新注册, 结果发现问 ...
- 小菜鸟之oracle触发器
1.触发器说明 触发器是一种在事件发生时隐式地自动执行的PL/SQL块,不能接受参数,不能被显式调用 2.触发器类型 根据触发器所创建的语句及所影响的对象的不同,将触发器分为以下3类 (1)DML触发 ...
- SQLite进阶-19.常用函数
目录 SQLite常用函数 SQLite常用函数 SQLite 有许多内置函数用于处理字符串或数字数据. 序号 函数 & 描述 1 SQLite COUNT 函数SQLite COUNT 聚集 ...