用表格制作商品购买页面--(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. ...
随机推荐
- ServletConfig对象的使用
作用: * 获取Servlet的配置信息 * 获取ServletContext对象 *主要是用于加载servlet的初始化参数.在一个web应用可以存在多个ServletConfig对象(一个Serv ...
- osgViewer应用基础
#ifdef _WIN32#include <windows.h>#endif#include <osgViewer/Viewer>#include <osgDB/Rea ...
- 阶段5 3.微服务项目【学成在线】_day04 页面静态化_07-freemarker基础-if指令
<td <#if stu.name=="小明">style="background-color:cornflowerblue"</#if ...
- [Scikit-learn] 1.1 Generalized Linear Models - Bayesian Ridge Regression
1.1.10. Bayesian Ridge Regression 首先了解一些背景知识:from: https://www.r-bloggers.com/the-bayesian-approach- ...
- Spring分页实现PageImpl<T>类
Spring框架中PageImpl<T>类的源码如下: /* * Copyright 2008-2013 the original author or authors. * * Lice ...
- centos下如何关闭xdebug扩展
因为只要加载XDEBUG都会导致系统太慢,所以只有在需要调试系统程序的时候才加载XDEBUG扩展.平时一定要把它给注释掉. 只需要在php.ini文件中注释掉xdebug即可. 即: 前面加一个分号即 ...
- 客户端热更新框架之UI热更框架设计(下)
上一篇笔者介绍了关于什么是热更新,为什么需要热更新的技术文章.本篇就专门针对UI框架的热更新功能实现部分展开讨论,讨论的重点是热更新如何与UI框架进行结合? 现在笔者把设计“UI热更新框架”的整体设计 ...
- Leetcode之并查集专题-765. 情侣牵手(Couples Holding Hands)
Leetcode之并查集专题-765. 情侣牵手(Couples Holding Hands) N 对情侣坐在连续排列的 2N 个座位上,想要牵到对方的手. 计算最少交换座位的次数,以便每对情侣可以并 ...
- 建立自己的数据类型——C结构体归纳
一.建立结构体类型 1.申明结构体类型 struct 结构体名 { 成员表列(类型名 成员名:); }: 例如: struct Person { char name; int age; char se ...
- 第35课.函数对象分析("()"重载)
1.编写一个函数 a.函数可以获得斐波那契数列 b.每调一次返回一个值 c.函数可以根据需要重复使用 2.函数数对象 a.使用具体的类对象取代函数 b.改类的对象具备函数调用的行为 c.构造函数指具体 ...