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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
中级制作者方法好快都没怎么听懂
思路好,但是实际运用的时候添加的东西不仅仅那么少
第三种思路不错,但是不太利于扩展。如果后期给图片区域添加其他内容,就会很麻烦。
太赞了 看完发现结构和表现分开的思维来布局 代码真的减少好多。
这个老师脑洞好大
这有点坑啊 屏幕一放大就呵呵了 优化不是这么来的吧……
感觉这个老师好牛逼的样子。。。。思路清晰 工具什么的也用的得心应手的!
然而这个办法只适用于固定布局,尤其单位竟然还是px。。。自适应布局。。。若em/百分比之类的单位不管用就。。。糗大了。。。
也就是说,结构越符合内容组织越高级,不要为了看起来的结果而影响结构?
img{width:95px;height:95px;padding:1px 20px 37px 30px;
margin-right:10px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); }
学到结构表现分离的思想
一般遵循原则: 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
重要的是思想,很nice~!

最新回答 / echo_kinchao
小写X为行内元素的基准先  向上移肯定是负数啊 下是正数   基准线是0

最赞回答 / 定点攻击
盒子分为5个层,第一层是边框border,第二层是内容,第三层是padding内边距,第四层是背景图,第五层是背景色,当你没有设置padding时,内容的大小就是盒子的大小,背景图在不设置大小时,填满盒子的,如果图片不够大就会重复,直到填满为止,当设置了padding时,盒子的大小就是内容加上padding的面积,背景填满,自然就看见了,你可以设置一下内边距为padding:1px 20px 200px 30px;下内边距变大 ,图片重复填满。
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消