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

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

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

最新回答 / qq_经6吴素文_03163701
img{background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);width:95px;height:95px;padding:1px;20px;37px;30px;margin-right:10px;}

最新回答 / 猫语大师
background:颜色; 点击颜色就会出现颜色取值器<...图片...><...图片...>

最新回答 / wuli香香公举
div是一个大盒子,整个img看成一个小盒子,包含白色的花枝背景和指甲油图片,外边距就是img与div之间的间距

最新回答 / 一一欧尼
哈哈哈哈 我也是,其实是因为  .demo01 跟.left之前是有空格的,你再试一下吧。

+ 我来回答 回答最高可+2积分

最新回答 / 你好再见2333
可以看看这节课http://www.imooc.com/learn/20

最新回答 / 全栈港
只能说我刚开始也是,刚开始接触时,拿着设计稿,先是根据样式来的,一边写HTML代码,一边写css,对各部分的分块也是无头绪,但是你这方面的视频是有案例的,你就会学到的,比如,先把页面分别为上中下三个结构,这是网页最基本的结构,然后再将这三个部分划分;再有,将大部分的小块根据功能来划分比如菜单栏,导航栏,排名,公告栏,内容等等。这节课的内容如果要领会,你必须有实践基础的,真实案例制作才会让你真正领悟这些思想。但是别忘了,基础一定要牢固啊~

最新回答 / 一只特立独行的doge
我觉着如果电话号码下面那层属于背景图的话,那就把电话号码用一个div装起来,相对背景图的div进行绝对定位吧!不过这样一来又是上一节视频里面说的新手思维了,代码不够简洁。

最赞回答 / 前端小鸟
.demo03 .userPic{ float:left; margin:-20px 0 0 -100px}首先不加这段代码只加浮动可以看到是浮动到了离demo3(demo3此时是包含框)上20px左20px的位置,因为设置了padding:20px;然后magin也就是以这个为基准偏移了。那么也可以看作目前这个位置的坐标为(0,0)。设置-100px是什么意思呢?100px=30px(图片目标位置的右边框距离demo03的距离)+20px(内填充)+50px(图片自身宽度),-20px也就很好理解了,上...

最新回答 / 全栈港
我感觉position方便一些,使用绝对定位时,该元素已经脱离了文档流(不占位),设置偏移量时,若有定位祖先元素,会依据其最近的已定位独显元素为偏移量。对demo01设置position:relative;对偏移元素span设置position:absolute;right:20px;top:10px;如果用float,时间最好排在用户名那/*初级*/<...code...>但这种方式语义化不是很好,先显示时间

最新回答 / echo_kinchao
不会的 分离只是内容分离 但是引入之后 代码没错就不会有问题

最新回答 / zeroweb
换行就意味着两个图片间有了一个字符 就像是一个空格占位符 如果你给img定义float属性的话就没有间隙了

最新回答 / echo_kinchao
慕课 有时候有这方面的BUG

最赞回答 / 慕男婶
不是的。margin是外边距,就是盒子与盒子之间的距离。padding是内边距,根据盒子模型可知,盒子的宽高也算上内边距,而背景图是从padding开始渲染的,所以你能看到背景。
课程须知
1.html+css简单的基础知识 2.有网页制作实战经验
老师告诉你能学到什么?
1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码,参与3人拼团

微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

友情提示:

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消