网页简单布局之结构与表现原则分享

简介: 网页简单布局之结构与表现原则分享

结构与表现相关内容简介

html结构 css表现 javascrip行为 网页布局要考虑到结构,表现,行为分离原则,首先重点放在结构和语义化上面,再考虑CSS,JS等,便于后期维护和分析……

结构与表现相分离的思想

初级的开发人员思路及制作方法:div层层嵌套;
中级的开发人员思路及制造方法:去掉多余的div,进行简化;
高级的开发人员思路及制造方法:最大化的简化html的结构,然后用css进行设置,减少html与css的契合度。
步骤:
先按结构和语义编写代码
然后进行css样式设置
减少HTML与CSS契合度
overflow:
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

text-indent文本缩进到目标位置,可以不要给文本再另外套标签。减少冗余代码

拿到一个网页设计图的时候,首先关注网页的文字内容以及内容模块间的关系。
把重点放在编写语义化的html代码上,而不要过多考虑设计图上的样式,
等到html按内容编写完成之后,再考虑样式的实现。
在不改变现有结构的基础上,完成设计图要求的视觉效果
margin可以是负值,通过负值,可以使该内容进行移动!实现四个方向的移动。
在结构(HTML)和样式(css)中,可以先把内容通过HTML写出来,再利用margin移动位置,实现排版,降低样式和结构的耦合,并且减少代码

网页换肤及总结

尽量减少html对css的依赖

网页换肤:相同的html结构,不同的css样式

目录
相关文章
|
JavaScript 安全 Windows
NPM包的安装、更新、卸载
NPM包的安装、更新、卸载
|
Linux KVM 虚拟化
如何恢复故障KVM虚拟机qcow2磁盘镜像文件LVM分区中的数据
如何恢复故障KVM虚拟机qcow2磁盘镜像文件LVM分区中的数据
839 0
如何恢复故障KVM虚拟机qcow2磁盘镜像文件LVM分区中的数据
|
11月前
|
前端开发 JavaScript
如何使用 Promise 处理异步并发操作?
通过使用 `Promise.all()` 和 `Promise.race()` 方法,可以灵活地处理各种异步并发操作,根据不同的业务需求选择合适的方法来提高代码的性能和效率,同时也使异步代码的逻辑更加清晰和易于维护。
|
11月前
|
存储 前端开发
除了 Promise.all(),还有哪些方法可以处理异步并发操作?
在上述示例中,`concurrentPromises` 函数接受一个Promise数组和最大并发数作为参数,通过手动控制并发执行的Promise数量,实现了对异步操作的并发控制,并在所有Promise完成后返回结果数组。
|
11月前
|
API
车牌号归属地查询免费API接口教程
本接口用于根据车牌号查询社会车辆的归属地,不支持军车、使馆等特殊车牌。请求地址为 `https://cn.apihz.cn/api/other/chepai.php`,支持 POST 和 GET 请求。请求参数包括 `id`、`key` 和 `words`,返回数据包含车牌归属地信息。示例请求:`https://cn.apihz.cn/api/other/chepai.php?id=88888888&key=88888888&words=川B1234`。
493 21
|
11月前
|
机器学习/深度学习 边缘计算 人工智能
第二届边缘计算与并行、分布式计算国际学术会议(ECPDC 2025) 2025 2nd international Conference on Edge Computing, Parallel and Distributed Computing
第二届边缘计算与并行、分布式计算国际学术会议(ECPDC 2025) 2025 2nd international Conference on Edge Computing, Parallel and Distributed Computing 机器学习 计算学习理论 数据挖掘 科学计算 计算应用 数字图像处理 人工智能
233 6
|
11月前
|
存储 算法
后序遍历的递归和非递归实现有何区别?
后序遍历的递归实现和非递归实现各有优缺点,在实际应用中需要根据具体的问题需求、二叉树的特点以及性能和空间的限制等因素来选择合适的实现方式。
278 56
|
10月前
|
SQL 关系型数据库 MySQL
数据库数据恢复—Mysql数据库表记录丢失的数据恢复方案
Mysql数据库故障: Mysql数据库表记录丢失。 Mysql数据库故障表现: 1、Mysql数据库表中无任何数据或只有部分数据。 2、客户端无法查询到完整的信息。
|
缓存 Nacos 数据库
nacos常见问题之日志一直报403如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
|
11月前
|
SQL 缓存 监控
大厂面试高频:4 大性能优化策略(数据库、SQL、JVM等)
本文详细解析了数据库、缓存、异步处理和Web性能优化四大策略,系统性能优化必知必备,大厂面试高频。关注【mikechen的互联网架构】,10年+BAT架构经验倾囊相授。
大厂面试高频:4 大性能优化策略(数据库、SQL、JVM等)