为了账号安全,请及时绑定邮箱和手机立即绑定

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
第三种结构太扯,扩展性太差不说,后期修改维护的麻烦死了,网站重构严格来说,第二种比较符合。
学习了,赞一个
老师好棒!虽然简单,但却是最容易忽视的细节与基础。
不认同这种思路 。扩展性太差。
有很大的启发性,
不同的思路,
不同的做法。
完全是为了省代码,而不考虑结构的合理性和可读性,像这种产品列表,实际开发很少会用这种方法做。

不过好的地方是,多了一种解决思路。
正确写法:
img{padding: 1px 20px 37px 30px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); margin-right: 10px;}
不错,很有启发性。
看最后的例子的html代码,貌似感觉有道理啊。
第3种方式虽然减少了代码量,但是我并不赞同这种写法。第一是这样写结构不清晰,跟全用绝对定位没区别。第二是不利于扩展,如果我以后要在图片下添加说明文字,我是不是得在写一个p往左溢出?

最赞回答 / 顾忌
.demo01后面要是在加一个.left的话,那么必须是.demo01 .left    这里面必须要加一个空格才可以,不信你去试一试
C先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
涨知识了 我每次做的时候 都有div套div
好多细节知识,get!!!
Had learnt tons of useful things from this single class! Thank you.
Nice! Structure + Style + Action
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消