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

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

5、流动和冻结设计

以上的设计都叫做流动布局,因为无论我们把浏览器调整到多大,它们都会扩展到填满浏览器为止。这些布局很有用,因为通过扩展,它们把现有的空间填满了,并且允许用户充分利用屏幕空间。不过有时把布局锁定很重要,以便当用户调整屏幕时,你的设计看起来还跟原来一样。有几个布局是这样工作的,我们先从冻结布局开始。

(1)冻结布局

冻结布局把元素锁住,冻结到页面上,所以它们根本不能移动,因此我们避免了许多窗口扩展带来的问题。

冻结布局的方法:在你的XHTML中添加一个

,命个id如allcontent,这个
要包围页面中的所有内容。添加CSS规则,将这个
中的内容限制为固定宽度。(即width设为固定值,同时加些其他样式如padding、背景色等)这样,甚至当浏览器重新被调整时也是这个固定宽度,所以我们有效地把
以及它包含的所有内容都冻结到页面上了。

(2)凝胶物布局

冻结布局有几个好处,但当你把浏览器调宽时外观明显变差(因为所有空的空间都在右面)。不过我们有一个解决方法,它是一个你能在网站上看到的很普通的设计。这种设计在冻结的和流动的之间,它有一个相应的名字叫凝胶物。凝胶物布局锁定了页面中内容区的宽度,但把它放到浏览器中央。

布局方式:不是把allcontent

的左右边界固定,而是把边界设置成“auto”.把边界设置成“auto”,浏览器会计算出合适的边界是多少,并且保证左右边界相等,以使内容居中。

6、绝对布置:用CSS在页面上精确地放置元素

当一个元素被绝对放置了,浏览器做的第一件事是把它从流中完全移走。接着浏览器把元素放置在top和right指明的位置(或bottom和left)。(注意,top指的是离页面顶部的距离,其他类似,都是相对页面边缘的)

1 #sidebar {
2 width:280px;
3 position:absolute;
4 top:128px;
5 right:200px;
6 }
因为sidebar现在是绝对布置的,它就被移出了流,然后根据所有指定的top、left、right、bottom属性来放置。因为sidebar不在流中了,其他的元素甚至不知道它在那儿,就完全把它忽略了。流中的元素甚至不把它们的行内容包围在绝对布置的元素周围。它们完全被遗忘在页面上了。(注意,这跟漂移元素稍有不同,因为流中的元素要调整它们的行内容还要考虑到漂移元素的边界。但绝对布置的元素对其他元素没有任何影响)

绝对布置的元素可以互相层叠放置。谁在谁上面?每个布置的元素有一个叫做z-index的属性,用来指定它的层叠位置。哪个元素有较大的z-index值就在上面。例如我们可以给某个绝对布置的元素的z-index属性设一个很大的值99,,这个元素就位于其他的上面。

(1)默认的position属性值是什么?是static。static布局把元素放置在正常的文档流中,并且不用你布置——浏览器决定哪个元素放哪儿。你可以用float属性把一个元素从流中拿出来,可以决定它应该漂移向左边还是右边,不过最终还是浏览器决定它放置的位置。与之相对的是position的属性值absolute,用绝对布置,你告诉浏览器放置元素的精确位置。

(2)你可以布置任何元素,无论死块元素还是内联元素。只是记住当绝对放置一个元素时,就把它从正常的页面流中移走了。

(3)position属性值有四个:static、absolute、fixed和relative。fixed把一个元素放置在跟浏览器窗口(而不是页面)有关的位置,所以fixed元素不移动。relative取出一个元素并让它正常地流到页面上,然后在页面显示之前让它偏移。relative多用于比较高级的布局和特殊的效果。

(4)如果你没指定绝对元素的宽度,块元素默认状态下会占据整个浏览器的宽度,减去你指定的左边或右边的偏移。

(5)除了用像素指定位置之外,还有另外一种常用的布置元素的方法,即百分数。如果你用百分数,元素的位置会随着浏览器宽度的改变而改变。例如,如果浏览器窗口宽度是800像素,元素的左位置设置成10%,那么就离浏览器窗口的左边80像素。百分数的另一个常用的用途是指定宽度。如果不需要元素或边界具体的宽度,那么可以用百分数把主内容区和sidebar的大小设置得灵活一些。你会发现在两栏或三栏布局中这种用法贡献很大。

(6)但是浏览器很宽时,sidebar可能向下盖过了页脚。但是绝对布置就不能用clear了,因为流元素忽略了绝对布置元素的存在。

总结:用绝对布置可以把元素放在页面的任何位置,默认状态下,绝对布置相对于页面边放置元素。如果把一个绝对布置嵌入另一个布置过的元素中,那么它的位置就是相对于布置过的那个包含它的元素。

left、right、top、bottom属性用来放置绝对、固定和相对布置的元素;用相对布置时,left、right、top、bottom涉及到与元素在正常流中的位置相对的偏移量。

通常使用漂移元素或绝对布置的元素可以完成同样的设计。

相关文章
|
6天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
19 6
|
13天前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
29 4
|
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)手写【网易游戏】页面特效
|
29天前
|
缓存 监控 前端开发
CSS 提高性能的方法
【10月更文挑战第24天】在实际应用中,还需要根据具体项目的特点和需求,灵活选择和组合这些方法,不断进行优化和改进。同时,随着技术的不断发展,也需要持续关注新的性能优化技巧和最佳实践,以保持在性能优化方面的领先地位。你对 CSS 性能优化还有哪些深入的思考和经验呢?欢迎进一步交流和分享。
|
28天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
40 1
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
94 6
|
29天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
25 1
|
1月前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
30 1