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

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

结构与表现相关内容简介

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

目录
相关文章
|
7月前
|
开发者 UED 容器
与传统的块级和行内布局相比,Flexbox为Web开发者提供了更加灵活、高效的布局方式
【6月更文挑战第10天】Flexbox是CSS3的弹性盒子布局,提供灵活、高效的网页布局解决方案。其特点包括灵活性、响应式和易理解,能适应不同屏幕尺寸和设备。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性处理伸缩,order调整顺序。通过响应式设计和兼容性考虑,Flexbox助力创建优质、适应性强的Web界面。
43 0
|
8月前
|
前端开发 搜索推荐 JavaScript
探析单页应用(SPA)与多页应用(MPA):从技术角度选择合适的应用形式
随着Web应用的快速发展,单页应用(SPA)和多页应用(MPA)成为了开发者们在构建Web应用时常遇到的两种选择。本文将从技术角度出发,深入比较单页应用和多页应用的特点和优势,帮助读者更好地选择适合自己项目的应用形式。
100 0
|
前端开发
几种布局方式与各自优点
几种布局方式与各自优点
65 0
项目实战典型案例14——代码结构混乱 逻辑边界不清晰 页面美观设计不足
项目实战典型案例14——代码结构混乱 逻辑边界不清晰 页面美观设计不足
131 0
|
数据可视化 vr&ar 计算机视觉
使用标记增强技术将虚拟内容呈现到现实场景中
使用基于标记的增强现实将虚拟内容呈现到场景中。
179 0
|
存储 人工智能 弹性计算
大模型之外,阿里云对未来的真正布局是什么?
大模型之外,阿里云对未来的真正布局是什么?
457 0
|
前端开发 容器
这8张脑图几乎概括了所有的布局方案,确定不看看吗?
前端布局不管是在面试过程中还是在工作中都是非常重要的一部分,一个优秀的前端工程师可以在很快的时间内写出同一种布局的多种实现方案,练习并掌握CSS布局方案可以提高我们的页面开发速度。
151 0
文字处理技术:试图通过多次布局解决布局问题的思路是否可以避免?
文字处理技术:试图通过多次布局解决布局问题的思路是否可以避免?
116 0
|
前端开发 定位技术
如何给网页划分结构
  如何给网页划分结构,学习前端第一步:划分网页结构,网页的结构的划分应该遵循哪些原则,如何去划分网页的结构呢?   对于一个前端初学者,第一步就是要学会如何划分一个网页的结构。当设计师给到你一张设计图,你需要根据这张图做出一个符合标准的页面,这里所说的标准,即w3c标准,参考w3school在线教程。
765 0