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

相关文章
|
8天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML和CSS之旅
【9月更文挑战第32天】在这个数字化的时代,拥有一个个人博客不仅是展示自我的平台,也是技术交流的桥梁。本文将引导初学者理解并实现一个简单的个人博客网站的搭建,涵盖HTML的基础结构、CSS样式的美化技巧以及如何将两者结合来制作一个完整的网页。通过这篇文章,你将学会如何从零开始构建自己的网络空间,并在互联网世界留下你的足迹。
|
3天前
|
前端开发 JavaScript 微服务
拥抱微前端架构:构建未来Web应用的新思路
随着互联网技术的发展,Web应用日益复杂,传统单体架构已难以满足需求。微前端架构将大型应用拆分为独立模块,便于管理和迭代。其核心优势包括技术栈无关性、独立部署、团队协作及易于扩展。实施时需定义边界、选用框架(如Single-spa)、管理状态通信,并解决样式隔离和安全性等问题。尽管存在挑战,微前端架构凭借灵活性和高效性,有望成为未来Web开发的主流趋势。
|
8天前
|
前端开发 JavaScript 搜索推荐
打造个人博客网站:从零开始的HTML与CSS之旅
【9月更文挑战第31天】在这个数字时代,拥有一个个人博客网站是展示自我、分享知识和连接世界的重要方式。本文将引导你通过简单的HTML和CSS知识,一步步构建起你的在线空间。无论你是编程新手还是希望通过实践加深理解,这篇文章都将是你的理想指南。我们将探索基本概念,实现页面布局,并点缀以个性化样式,最终将静态页面转变为动态交互式网站。准备好了吗?让我们开始吧!
|
12天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
12天前
|
前端开发 数据安全/隐私保护 容器
HTML+CSS 水滴登录页
该代码实现了一个创意的水滴登录页面,包含一个水滴形状的登录框与两个按钮(忘记密码和注册)。登录框包括用户名、密码输入框及登录按钮。页面设计独特,采用渐变色与动态效果,增强了交互性和视觉美感。以下为关键实现步骤: - 重置默认样式。 - 设置页面背景颜色和尺寸。 - 定义登录表单容器的布局、位置和尺寸。 - 设置登录表单内容样式,包括3D效果和过渡动画。 - 创建伪元素增强水滴效果。 - 设定输入框容器和输入框样式。 - 为提交按钮、忘记密码和注册按钮设定特定样式,并添加悬停效果。
|
2天前
|
缓存 前端开发 JavaScript
前端技术探索:构建高效、响应式Web应用的秘诀
前端技术探索:构建高效、响应式Web应用的秘诀
12 0
|
JavaScript 前端开发 区块链
|
2月前
|
前端开发
2s 利用 HTML+css动画实现企业官网效果
2s 利用 HTML+css动画实现企业官网效果
HTML+CSS 实现通用的企业官网页面(记得收藏)
HTML+CSS 实现通用的企业官网页面(记得收藏)
|
1月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)