web前端技能方法总结(css、js、jquery、html)(26)

简介: web前端技能方法总结(css、js、jquery、html)

1、表头除了常规的放在表格的上面以外也可以放在左边。只需要将表格表头元素分别放入每行来代替原先的第一行。把每个

元素放在每行的开头,那么所有的表头就在第一列了。

2、关于完全只用表格来完成页面的版面设计:在CSS出现之前,使用表格来完成版面设计是非常普遍的。坦率地说,当时没有更好的方法来做一些复杂的版面设计。不过,在今天,使用表格做版面设计却是一个糟糕的方法。如果完全只是用表格,既困难又难以维护。那种技巧已经过时了,应该学习正确的方法,也就是XHTML和CSS做版面设计。

3、要优化你的表格,有两件事情你要立刻去做:一是添加一个标题,二是添加一个摘要。

摘要就是给table标签添加summary属性。摘要不会在你的网页中显示出来。它的作用纯粹只是增加表格的可读性,起一小块文本的作用,还能使屏幕读取器能够更好地读取用户所描述的表格。

标题,默认状态下,多数浏览器将标题设置在表格上方。如果你不喜欢标题的默认位置,可以用CSS重新定位标题,有些浏览器并不完全支持重置标题的默认格式。

将标题移到表格的下部的方法是给table元素添加caption-side属性,属性值设为bottom.

4、你可以用表格指定表格式数据之间的关系,然后一般用CSS来改变表格的外观。

5、表格单元的确包含了补白和一个边框——正如你在盒模式中看到的——不过表格和盒模式在边界属性上有所不同。

单元格包含了内容、补白、边框,但是用边框间距属性来代替边界,边框间距(border-spacing)属性定义在整个表格中,也就是说,我们不能对单个的表格单元而只能对所有的单元格设置边界属性。

边框间距是相对于整个表格的,而边界只是针对于单个的元素。 IE6不支持边框间距属性。

可以在水平和垂直方向上设置不同的边框间距: border-spacing:10px 30px; 这条语句设置了10个像素的水平边框间距和30个像素的垂直边框间距。

压缩边框:除border-spacing属性之外,还有另外一种方法可以处理边框空间问题。你可以使用CSS中一个叫做border-collapse的属性来消除边框间距。使用这个属性时,浏览器将忽略设置在表格上的所有边框间距,并且将两个相邻的边框合并为一个边框。这样就将两个边框“压缩”为一个边框了。 border-collapse: collapse;

将border-spacing属性设置为0px也可以消除边框间距,不过仍存在两条线,只不过它们紧靠在一起罢了,我们得到的是双重的虚线边框。border-collapse: collapse;的方法可以得到单元格之间的单线边框。

6、实现行扩展和列扩展:在

元素中添加rowspan属性并设置行的数值可以实现多行跨越;在元素中添加colspan属性并设置列的数值可以实现多列跨越。

7、嵌套表格:将元素

8、使用CSS中的text-align和vertical-align属性可以改变表格数据的对齐方式(前者可以设置左、右或居中对齐,后者可设垂直对齐方式如设为top即为向上对齐)。使用background-color属性可以为表格添加一些颜色。背景颜色的设置可以是整个表格、一行或者单个单元格。

9、如果一个数据单元格为空,那么

元素中不放置任何内容。不管怎样,你都需要使用一个标记对维持表格的对齐方式。
相关文章
|
9天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
106 52
|
13天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
29 4
|
12天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
21 1
|
23天前
|
JavaScript 前端开发
.js方法参数argument
【10月更文挑战第26天】`arguments` 对象为JavaScript函数提供了一种灵活处理参数的方式,能够满足各种不同的参数传递和处理需求,在实际开发中具有广泛的应用价值。
36 7
|
23天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
23天前
|
移动开发 前端开发 JavaScript
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
于辰在大学期间带领团队参考网易游戏官网的部分游戏页面,开发了一系列前端实训作品。项目包括首页、2021校园招聘页面和明日之后游戏页面,涉及多种特效实现,如动态图片切换和人物聚合效果。作品源码已上传至CSDN,视频效果可在CSDN预览。
29 0
前端实训,刚入门,我用原生技术(H5、C3、JS、JQ)手写【网易游戏】页面特效
|
7月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload