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

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

10、相对布置

没有多少人在他们的设计中用到它。不像绝对布置和固定布置,相对布置的元素仍然是页面流中的一部分,不过在最后一刻,就在元素被显示之前,浏览器偏移它的位置。浏览器先把相对元素流到页面上,然后才把它偏移到要显示的地方。不过,不像绝对布置,相对布置被定义为相对于元素实际位置的偏移,而不是与最近包含的块绝对地平行。

无论你如何调整补白和边界,你还是不能把一个图像放到它所在盒子的外边。但用两行CSS就可以达到更好的效果。你可以用相对布置来让一个元素在流中越过自己的盒子,以便很好地显示,用补白和边界就做不到这点。

11、总结:流动布局是:当你扩大浏览器窗口时,页面内容也随之扩大来填满页面。

冻结布局是:内容的宽度是固定的,不随浏览器窗口的变化而扩大或缩小。这有一个优点是你可以更好地控制你的设计,但代价是不能有效地利用浏览器宽度。

凝胶物布局好似:内容区的宽度是固定的,但边界随着浏览器窗口的变化扩大或缩小。凝胶物布局通常用来把内容放在页面的中间。它跟冻结的布局有一样的优点,但总是要更引人注目一点。

相关文章
|
12天前
|
XML 前端开发 JavaScript
jQuery HTML / CSS 方法
jQuery HTML / CSS 方法
9 2
|
14天前
|
JavaScript 前端开发
JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS
17 4
|
11天前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
13天前
用CSS+JavaScript打造网页中的选项卡
用CSS+JavaScript打造网页中的选项卡
|
14天前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
57 1
|
16天前
|
JavaScript 前端开发
JS配合CSS3实现动画和拖动小星星小Demo
本文通过代码示例展示了如何使用JavaScript和CSS3实现动画效果和拖动小星星的交互效果,包括文字掉落动画和鼠标拖动产生小星星动画的实现方法。
30 0
JS配合CSS3实现动画和拖动小星星小Demo
|
22天前
|
前端开发 JavaScript
uniapp动态修改css样式(通过js来修改css样式)
uniapp动态修改css样式(通过js来修改css样式)
|
13天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
|
14天前
|
移动开发 前端开发 JavaScript
使用html-to-image代替html2canvas,结合jspdf实现下载pdf(下载截图下载前端dom元素)
本文介绍了在前端项目中,当使用`html2canvas`遇到问题时,如何使用`html-to-image`库作为替代方案,结合`jspdf`实现将DOM元素生成为PDF文件并提供下载。文章首先讨论了`html2canvas`可能遇到的问题,并提供了该库的使用示例代码。随后,详细介绍了`html-to-image`库的安装和使用方法,展示了如何将DOM元素转换为Canvas,再利用`jspdf`生成PDF文件。最后,文章通过示例代码说明了整个转换和下载的过程,并展示了效果截图。
13 0
|
JavaScript 前端开发 UED
9款设计独特的jQuery/CSS3插件
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单、jQuery焦点图、jQuery表单、jQuery图片特效等。下面大家一起来看看吧。
171 0
9款设计独特的jQuery/CSS3插件