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

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

结构与表现相关内容简介

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样式

目录
相关文章
|
机器学习/深度学习 算法 数据挖掘
如何设计图模型结构
如何设计图模型结构
|
数据可视化 vr&ar 计算机视觉
使用标记增强技术将虚拟内容呈现到现实场景中
使用基于标记的增强现实将虚拟内容呈现到场景中。
177 0
|
存储 人工智能 弹性计算
大模型之外,阿里云对未来的真正布局是什么?
大模型之外,阿里云对未来的真正布局是什么?
453 0
|
前端开发 容器
这8张脑图几乎概括了所有的布局方案,确定不看看吗?
前端布局不管是在面试过程中还是在工作中都是非常重要的一部分,一个优秀的前端工程师可以在很快的时间内写出同一种布局的多种实现方案,练习并掌握CSS布局方案可以提高我们的页面开发速度。
143 0
|
前端开发 JavaScript API
渲染性能优化的全局视角,教你做的比别人好
遇到性能优化的问题,大抵都会从两个方向入手:行业标准优化手段、实际性能瓶颈问题。既能够从先进的模式、方法、套路吸收借鉴,又能够结合实际性能情况设计应对方案,已然是高质量工作的路径了,但是,路上还充斥着各种判断和选择,稍有不慎还是会泥足深陷,走上“要你命 3000 ”的道路。
渲染性能优化的全局视角,教你做的比别人好
文字处理技术:试图通过多次布局解决布局问题的思路是否可以避免?
文字处理技术:试图通过多次布局解决布局问题的思路是否可以避免?
114 0
|
XML 缓存 视频直播
02.视频播放器整体结构
02.视频播放器整体结构
1018 0
02.视频播放器整体结构
|
前端开发 定位技术
如何给网页划分结构
  如何给网页划分结构,学习前端第一步:划分网页结构,网页的结构的划分应该遵循哪些原则,如何去划分网页的结构呢?   对于一个前端初学者,第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图,你需要根据这张图做出一个符合标准的页面,这里所说的标准,即w3c标准,参考w3school在线教程。
762 0
自然框架的定位
  首先从软件定义的角度来看,然后再从项目开发的几个阶段来看。     软件:是一系列按照特定顺序组织的计算机数据和指令的集合。一般来讲软件被划分为编程语言、系统软件、应用软件和介于这两者之间的中间件。
720 0