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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
不喜欢层层嵌套的div,看着就不好改。高级编程的思想虽然对我来说可能只是听听,知道有这么种方法,自己去写还是按照初级编程的思路来,但想逐步的改变,写一种简单整洁的页面

已采纳回答 / 可惜没如果_呵呵
举个例子:<div class="box" style="width: 200px;height: 200px;border:1px solid red;position: relative;"> <div class="hh" style="width: 100px;height: 100px;background:green;position: absolute;top:10px;left:10px;"> <div class="aa" style="width...
我的答案:
img{padding:1px 20px 37px 30px; margin-right:10px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);}
我还是比较赞同 下面说 思路方式的, 毕竟做法不是唯一,思路才是比较重要,适合不适合 看个人实际应用罢了。
真的很棒哦。从3个层次 去讲解制作方法 学习到了。从思路上出发, 很棒
这个原理就是通过内边距padding将img中的图片内容撑大
我觉得高级那个边界填充太难调了,也不符合语义化
听完课后简单的理解就是能少用div则少用。
需要学习的还很多
div{background:#460E29;width:700px;padding:20px}
img{width:95px;padding:1px 20px 37px 30px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
margin-right:10px;}
惊了!还能这样!受教了!代码减少的不是字符,是流量,是钱啊!
img{height:95px; width:95; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px; margin-right:10px;}
看了评论区前几条,觉得无语,这门课明显是让大家学会运用结构与表现分离的这样一种思想,遇到可以简化的就试着简化,然后再来考虑是否简化得当,而不是说一定要用text-indent这样的属性。。。
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消