网页简单布局之结构与表现原则_技术问答

首页免费课网页简单布局之结构与表现原则问答

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

全部评论问答未解决精华

为何代码一样，显示的却不一样呢？？

最新回答 / 狼獨华

demo1的最外面的盒子你没有设置定位所以时间跑后面了.demo01 .left.img{margin-left:10px;} 错了 demo01 .left img img前面没有点。。demo3的 .demo03 img{ float:left; margin:-20px 0 0 -100px; } 你把-100px 改改我是该成-110px就ok了

1 回答 1267 浏览 2-1 微博用户发言信息列表制作

2016-04-06

波子_

img{
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg); width:95px;height:95px;
padding:1px 20px 37px 30px;margin-right:10p;
}

1 3-3 编程挑战

2016-04-06

一仁

老师这样讲并不是说最后就是定下了来这个样子，而是最开始的想法，先用HTML做出来然后在用样式一步一步来优化精简

0 2-3 排行榜制作

2016-04-04

Alice菲

拿到设计图，总的原则是根据内容划分逻辑块，
先粗分：上中下，
再细分：左中右，
然后再根据具体的内容划分一个一个的小块，
（感觉嵌套三层足矣；）

然后再由HTML的内容，根据语义化选择合适的标签填充（标签越少越好，极简主义），
然后再设置样式，通过样式排版，真正做到结构和表现相分离。
[ 收起全文 ]

0 3-3 编程挑战

2016-04-03

末口糖

padding的作用是把盒子内容区域扩大以正常的显示背景图片，如果内容只有一个img，那背景图片就被挡住了看不见。毕竟盒子的大小是根据内容来的，背景又只位于内容的下方，是无法撑开盒子的。

4 3-3 编程挑战

2016-04-03

缄默蜀黍ONE

img{
width:95px;
height:95px;
background:url(http://img1.sycdn.imooc.com//5385ac820001905201440133.jpg);
padding:1px 20px 37px 30px;
margin-right:10px;
}

0 3-3 编程挑战

2016-04-03

缄默蜀黍ONE

精辟！精辟！精辟！

0 2-1 微博用户发言信息列表制作

2016-04-02

qq_夜未央_7

努力学习，看完课程

0 1-1 内容简介

2016-04-01

Jack_1992

demo03 nice!大道至简。

0 2-1 微博用户发言信息列表制作

2016-03-31

慕容1297620

为什么我做浮动，一只不成功，float设置和教程一样的，我试了两次，都没成功

2016-03-31

智轩

看着激动人心，看完之后还是不会做

4 3-1 网页换肤及总结

2016-03-30

qq_那个猫_0

切换亮瞎了怎么弄

0 3-1 网页换肤及总结

2016-03-30

风_起

话都让你们说了，还让不让我发评论了。不能愉快的玩耍了！
补充一点：老师似乎一直再贯彻一个原则：相同的功能用最少的代码实现，那就是最佳实践！这个原则在实战中是否还适用，仁者见仁智者见智吧。

2 3-3 编程挑战

2016-03-29

风_起

话都让你们说了，还让不让我发评论了。不能愉快的玩耍了！

0 2-4 练习题

2016-03-29

风_起

老师讲归讲，一种容易授课的方式，至于设计方面的问题，靠个人咯。

1 2-3 排行榜制作

2016-03-29

风_起

这个方法不推荐：建议用相对定位，因为只要是定值的东西，都会涉及到“跨平台问题”问题，如上面的585px，在不同分辨率下，长度是不一样的。

16 2-2 电话号码布局制作

2016-03-29

首页上一页 43 44 45 46 47 48 49 下一页尾页

该课程已下架

课程须知: 1.html+css简单的基础知识 2.有网页制作实战经验

老师告诉你能学到什么？: 1.根据效果图能正确分解结构和表现 2. 能够深入理解网页结构与表现分离的思想

微信扫码，参与3人拼团

热搜

最近搜索清空

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

为何代码一样，显示的却不一样呢？？