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

/*中级*/ .demo2 .fr{ width:488px; float: right; border: 1px solid #ccc; position: relative; padding: 5px; } .demo2 .fr span{ position: absolute; right:18px; top: 5px; } .demo2 img{ margin-left: 20px; padding: 10px; border: 1px solid #ccc; }

=>高级制作者css：先按照结构和语义编写代码，然后再进行css样式设置，减少了css与html的契合度（文档移动，图像移出，定位属性）

/*高级*/ .demo3{ border: 1px solid #ccc; width: 488px; margin-left: 100px; padding: 5px; position: relative; } .demo3 img{ float: left; margin:-6px 0 0 -86px; padding: 10px; border: 1px solid #CCCCCC; } .demo3 span{ position: absolute; top: 10px; right: 20px; }

结论：拿到一张网页设计图的时候，首先要观察文字和内容模块之间的关系，重点放在编写语义化html代码上，而不要过多地考虑设计间的布局样式，等到html代码编辑完成，再考虑如何实现，力求在不改变现有页面结构的基础上完成设计图稿要求呈现的视觉效果!(点击下载完整网页简单布局之结构与表现原则代码)  

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!