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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
相同的html结构,不同的css样式
先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
学习了这篇才有一个新的思路
老师的第三种方法不适合全局布局,代码多了,不利于扩展,但是他的那种想法确实值得借鉴!
初学者思维。。。。。第二种get起来,好像第三种不是很好的样子
img{width:95px;height:95px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;margin-right:10px;}
第3种方式虽然减少了代码量,但是这是断章取义。第一这样写结构不清晰,图片和内容没有div包裹,在一个小demo看不出来,但是全局布局的时候就会文档错乱。第二是不利于扩展,如果我以后要在图片下添加说明文字,我是不是得在写一个p往左溢出?还有我在这个留言框外添加内容,布局就无法更好的定义了
自己嵌套的div确实太多了。。。。。。。。。。。。。
真的很受益,点赞!
img{width:95px;height:95px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);margin-right:10px;padding:1px 20px 37px 30px;}
真的很受益,点赞!
真的很受益,大赞
其实可以用Margin的吧?不过又要设Div。。。这算是优化代码吧
再复杂的页面也是由小模块组合而来的。
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消