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(以及更早的)版本并不支持固定布置。

相关文章
|
2月前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
3天前
纸屑飘落生日蛋糕场景js+css3动画特效
纸屑飘落生日蛋糕CSS3动画特效是一款js+css3制作的全屏纸屑飘落,生日蛋糕点亮庆祝动画特效。
16 3
|
1月前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
24天前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
24天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
103 1
|
29天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
41 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
41 4
|
1月前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
1月前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
55 0
html5+three.js公路开车小游戏源码
|
1月前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
101 6