网页简单布局之结构与表现原则
来源:互联网 发布:天子星软件 编辑:程序博客网 时间:2024/06/02 01:16
- 结构与表现相关内容简介
- 结构与表现相分离的思想
- 网页换肤及总结
结构与表现相关内容简介
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样式
0 0
- 网页简单布局之结构与表现原则
- 网页简单布局之结构与表现原则
- 网页布局之结构与表现原则
- 第 3 章 网页简单布局之结构与表现原则
- 网页简单布局之结构与表现原则(慕课网笔记整理)
- 页面简单布局之结构与表现原则
- 【学习笔记+实践】网页简单布局之结构与表现分离
- 第五步:网页主要框架之外的附加结构的布局与表现
- 第五步:网页主要框架之外的附加结构的布局与表现
- 网页制作的结构、表现
- 网页设计布局原则
- 【HTML/CSS】网页布局之结构
- 嵌套DIV布局似乎与“布局结构与内容相分离”的原则冲突!
- 浅论Web界面表现之布局架构
- 网页简单布局-混合布局
- 简单的网页布局
- 结构与表现分离: HTML/CSS
- 简单的网页布局实战(表格与HTML框架)
- 【leetcode题解】[E][52]303. Range Sum Query - Immutable
- 黑马程序员——集合中并发修改异常ConcurrentModificationException
- web前端收藏夹
- Java Socket编程
- SQL数据库有关备份和恢复的语句及操作
- 网页简单布局之结构与表现原则
- c#中this的作用
- 脚踏实地 志存高远——我的码农之路
- thinkphp中使用ajax实现无刷新分页
- 关于回调函数理解(Java语言)
- AJAX入门
- 【C语言】处女作,学籍管理_v1.0
- Xcode模拟器上,网络正常,高德地图只显示方格,这是为什么呢?本人遇到的是如下情况.....
- 黑马程序员——IO流