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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰

已采纳回答 / javdroider
这种做法用专业的话讲叫“定宽”。当浏览器大小变化时,页面各个元素的高度宽度不变,也就是说无法在缩小的浏览器里面看到整个网页,需要使用滚动条去拖拽。这种做法的缺点是,跨终端显示体验不佳,如果放到手机上,就需要用户自己去拖拽才能看到整个网页,比如12306
img{width:95px; height:95px; padding:1px 20px 37px 30px; margin-right:10px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); }
慕课里的爱米老师讲切图,可讲了好多PS基础~~
厉害了我的哥
后面几个完全听不懂
?????不懂
一般遵循原则: 先考虑设计图中的文字内容和内容模块之间的关系,重点放在编写html结构和语义化,然后考虑布局和表现形式。
一群SB,text-indent是可以设定父元素宽度的百分比的,不懂别叫唤
╮(╯▽╰)╭,看完觉得自己真的太年轻。。。。
img{width:95px;height:95px;
padding:1px 20px 37px 30px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
margin-right;10px;}
记住给设置div{overflow:hidden;}
_Vampire 答案的margin需要修改为margin-right:10px;
老师的讲解非常棒,给了我新的灵感

已采纳回答 / wyc2410
盒子模型是分层的, padding 是 在 background-image 的上一层, 不设置 padding就被挡住了。
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消