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

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

江老实 Web前端工程师
难度初级
时长22分
学习人数
综合评分9.67
1416人评价 查看评价
9.8 内容实用
9.7 简洁易懂
9.5 逻辑清晰
老师讲的让人眼前一亮 ,原来还可以这么写 !
我觉得老师说的意思是,减少HTML和css的契合度,也就是说样式都放在css中去完成,而不是在HTML中添加无语义的div。只是个例子,抛砖引玉而已
其实感觉img标签也可以往后放,放在微博内容p标签的后面,对SEO来说重要 对内容应该放在前面,而图片对于内容来说应该属于次要内容。
呵呵哒,text-indent是可以设百分比的,响应式完全没问题。评论区几个人自己没学好就瞎叫唤。老师这么多年的经验,还不如你这个刚学的?
img{width:95px;height:95px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); padding:1px 20px 37px 30px;margin:0 10px 0 0;}

最赞回答 / 龚小样
要想弄清这个问题  你首先回顾一下盒子模型   第一层是边框  第二层是内边距加内容  第三层是背景图片 第四层是背景颜色  最后一层是外边距  如果不设置内边距的话,仅仅显示内容也就是我们看的的那几张香水图片  背景图片层是在第三层,因为背景图片比香水图片大,要想看到他,就必须把第二层的内边距扩大,你才能看的到第三层的东西。而你说的外边距在最下层,不会影响背景图片。欢迎访问我的博客 gelory.me  我也是小白
看到高级之后,好强!内容和修饰的分离!
减少 HTML 与 CSS 的契合度,结构与表现的分离。

已采纳回答 / 慕虎9205161
body{ margin:0;}div{background:#460E29;width:700px;padding:20px}img{padding:1px 20px 37px 30px; background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); margin-right:10px;}
非常好,感谢老师!
不需要清除浮动。。
感谢老师。

已采纳回答 / 给我一杯咖啡
       您的网页如果是如下图的情况,有可能是因为第一个demo1大盒子没有清除浮动,导致下面的内容会紧密排列在后面。<...图片...>     在demo1的样式中加入清除浮动,盒子后面的内容就可以不受浮动塌陷的影响辣。
哈哈 ,我的思路就是初学者的思路,哎呀,什么时候可以变成高级者的思路。。。
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消