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
征信报告修改器,征信报告生成器,制作软件无痕修改软件【js+html+css】
本项目为信用评分模拟器教学工具,采用HTML5实现,仅供学习参考。核心功能通过JavaScript构建,包含虚拟数据生成、权重分配及信用因素分析(如还款记录、信用使用率等)。
|
4月前
|
前端开发 JavaScript
个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
|
4月前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
4月前
|
前端开发
个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
|
4月前
|
前端开发 JavaScript 容器
制作b超单生成器, 假怀孕b超单图片制作, p图医院证明【css+html+js装逼恶搞神器】
本资源提供一个适合用于熟人之间恶搞的工具,效果逼真,仅供学习参考与娱乐。包含前端技术学习要点:语义化布局、响应式设计、Flexbox、图片自适应
|
4月前
|
前端开发
医院检查单子p图软件,在线制作仿真病历,js+css+html装逼神器
本示例展示如何用HTML/CSS创建医疗信息页面,内容仅供学习参考。页面模拟“阳光医院体检中心”场景,提供预约功能验证(如姓名、手机号、日期)。所有数据仅用于演示
|
3天前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
42 4
|
4月前
|
缓存 JavaScript 前端开发
鸿蒙5开发宝藏案例分享---Web开发优化案例分享
本文深入解读鸿蒙官方文档中的 `ArkWeb` 性能优化技巧,从预启动进程到预渲染,涵盖预下载、预连接、预取POST等八大优化策略。通过代码示例详解如何提升Web页面加载速度,助你打造流畅的HarmonyOS应用体验。内容实用,按需选用,让H5页面快到飞起!
|
4月前
|
JavaScript 前端开发 API
鸿蒙5开发宝藏案例分享---Web加载时延优化解析
本文深入解析了鸿蒙开发中Web加载完成时延的优化技巧,结合官方案例与实际代码,助你提升性能。核心内容包括:使用DevEco Profiler和DevTools定位瓶颈、四大优化方向(资源合并、接口预取、图片懒加载、任务拆解)及高频手段总结。同时提供性能优化黄金准则,如首屏资源控制在300KB内、关键接口响应≤200ms等,帮助开发者实现丝般流畅体验。
|
前端开发 JavaScript Shell
鸿蒙5开发宝藏案例分享---Web页面内点击响应时延分析
本文为鸿蒙开发者整理了Web性能优化的实战案例解析,结合官方文档深度扩展。内容涵盖点击响应时延核心指标(≤100ms)、性能分析工具链(如DevTools时间线、ArkUI Trace抓取)以及高频优化场景,包括递归函数优化、网络请求阻塞解决方案和setTimeout滥用问题等。同时提供进阶技巧,如首帧加速、透明动画陷阱规避及Web组件初始化加速,并通过优化前后Trace对比展示成果。最后总结了快速定位问题的方法与开发建议,助力开发者提升Web应用性能。