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

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

7、分栏

总结几种两栏布局的技术,其中没有一种是完美的,都有一些折衷。

(1)漂移布局

用float属性,配合clear属性。漂移元素必须设置一个明确的宽度值,不能是默认的。唯一的问题是这种解决方法会导致内容放置顺序的改变,如果你的用户使用另一种浏览器,比如大声给用户读内容的屏幕读取器,它们也许不会喜欢这种顺序。

(2)凝胶物布局

首先通过把页面中所有的内容用固定大小的

包围来创建一个冻结布局,然后通过用“auto”属性值让边界扩展来做成凝胶物布局。网上许多页面都用这种设计,这也解决了内容顺序的问题。这种方法的缺点是内容不会随着浏览器窗口的变化而扩展。

(3)绝对布局

我们的任务时创建一个流动布局,同时内容顺序是我们想要的。我们用了绝对布置达到了我们的目标。不过,还是有个缺点,因为绝对元素不能用clear属性,浏览器变宽时页脚蔓延到了sidebar下面。

总结:对于你想让你的布局成为流动的还是冻结的还是凝胶物的,这其实是一个决定哪种最有利于你的页面工作的问题。一旦决定了,你还要指出哪种方法创建你的页面(漂移?绝对?结合几种?)你已经学习了基础,现在是开始探索的时候了,因为还有许多其他方法,而且每天都有新的被创造出来,以上技术通常作为比较复杂的设计的基础。多栏布局中用漂移被认为是最灵活的解决方法。谨记,你必须小心内容的顺序,它取决于设计。

8、你该知道的关于绝对布置的另外一件事

当你放置一个元素时,你就把它指定为跟最近放置的祖先元素相关的位置。

1


2

3 As Seen on TV
4

... ...
1 #tv{
2 position:absolute;
3 top:100px;
4 left:100px;
5 width:100px;
6 }
如果我们绝对放置“tv”
,它的最近放置的祖先是sidebar
.所以它的位置就会跟sidebar相对,而不是页面。

下次讨论“最近放置的祖先”,只须说“最近放置的包含块元素的元素”,这是专家用的术语。

注意,如果你把元素放置为与元素相对,bottom属性可能就不会如你所愿。你也许认为“bottom”是网页本身的底部,但是元素实际上把它定义为浏览器窗口的底部。所以,如果你想把一个元素从页面底部绝对布置,而不是浏览器窗口,你需要把元素放进一个延伸到页面底部放置的元素中。实现它的一个方法是把元素放进一个相对布置在页面底部的元素中。

9、固定布置

使用固定布置指定元素的位置和你使用绝对布置一样,不过这个位置是相对于浏览器窗口(叫做视口)边缘的偏移,而不是页面。一旦用固定布置放置了内容,它就呆在你放置的地方,再也不懂了,即使你滚动页面。

如果设为负值,例如left:-90px;就是告诉浏览器把图像放到视口边缘的左侧90像素处,这样就只能看到保留在屏幕上的那部分图像了。

注意,IE6.0(以及更早的)版本并不支持固定布置。

相关文章
|
4月前
|
机器学习/深度学习 移动开发 JavaScript
介绍一下HTML5的新技能:神经网络
介绍一下HTML5的新技能:神经网络
59 5
|
4月前
|
Web App开发 移动开发 UED
介绍一下HTML5的新技能:多媒体支持
介绍一下HTML5的新技能:多媒体支持
184 2
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
移动开发 前端开发 搜索推荐
《前端技术基础》第01章 HTML基础【合集】
超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
95 25
|
3月前
|
人工智能 前端开发 JavaScript
前端基础之HTML
Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
前端基础之HTML
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
5月前
|
XML JavaScript 前端开发
JavaScript控制台:提升Web开发技能的秘密武器
作为Web开发人员,掌握JavaScript控制台中的各种方法至关重要。本文介绍了22种实用的console方法,从基本的log()到高级的profile()和memory,每种方法都配有示例和说明,帮助开发者更高效地调试和记录信息。通过了解这些工具,您可以优化代码、提高开发速度,减少错误,使编码过程更加顺畅愉快。
67 1
JavaScript控制台:提升Web开发技能的秘密武器
|
4月前
|
JSON 缓存 前端开发
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
个人练习前端技术使用Bootstrap、JQuery、thymeleaf
61 3
|
4月前
|
JavaScript 前端开发 数据安全/隐私保护
Web开发者必看:手把手教你如何轻松播放m3u8流地址,解锁视频播放新技能,让你的项目更上一层楼!
【10月更文挑战第23天】随着互联网技术的发展,m3u8格式因良好的兼容性和高压缩率被广泛用于网络流媒体传输。本文介绍如何在Web端播放m3u8流地址,包括引入视频播放器(如Video.js)、创建播放器容器、初始化播放器及播放m3u8流的具体步骤。此外,还涉及处理加密m3u8流的示例。
866 1
|
5月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js

热门文章

最新文章