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涉及到与元素在正常流中的位置相对的偏移量。

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

相关文章
|
5天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
24 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
28天前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
114 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
26天前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
52 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
25天前
css3 svg制作404页面动画效果HTML源码
css3 svg制作404页面动画效果HTML源码
63 34
|
29天前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
77 33
|
2月前
一个好看的小时钟html+js+css源码
一个好看的小时钟html+js+css源码
116 24
|
3月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
85 5
|
4月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
302 14
|
4月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
83 0
|
4月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。

热门文章

最新文章