摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。
经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好
先说一下，我个人理解的前端布局的思想吧。 在前端布局的时候， 先不要设计太多什么margin,padding什么的 首先，你要清楚的是，你要的布局是什么 例如，我这里拿百度前端技术学院的任务(5) 作为例子讲解一下吧
附：百度前端技术学院的任务(5)
首先，根据题意，我们很容易得知，这是由一个头尾和内容的布局，布局采用的是类似淘宝双飞翼布局做成的CSS实现右侧固定宽度，左侧宽度自适应（点击链接即可知道具体怎么实现）
不过这不是这一篇的重点，重点是上中下布局。怎么实现呢？这里附上html和css代码
#top{
height: 50px;
background: black;
}
#content{
height: 550px;
background: gray;
}
#footer{
height: 50px;
background: blueviolet;
}
形成了上中下结构之后，再进行其他地方的编辑，注意，其他地方，一般要用class不要滥用id(虽然两者用起来都差不多)。接下来我，来示范一下CSS实现右侧固定宽度，左侧宽度自适应的做法吧。
附代码
#content{
height: 550px;
width: 100%;
background: gray;
}
.left{
height: 500px;
width: 100%;
margin-left: -200px;
float: left;
background: yellow;
}
.right{
position: absolute;
top: 0;
right: 0;
height: 200px;
width: 200px;
background: red;
}
这样就用绝对布局实现了一个比较简单的右侧固定宽度，左侧宽度自适应的做法。
然后再在各个板块上加上各自的margin,padding属性就比较很好看了。
但是，可能有很多新手还不是很清楚margin,padding和width属性到底具体指什么，这里我用一张图说明一下吧。
具体如果还不知道怎么做，可以留言，我会细心帮你解答。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116410.html
摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。 经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好 先说一下，我个人理解的前端布局的思想吧。 在前端布局的时候， 先不要设计太多什么margin,paddin...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。 一、前言 百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...
摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。 本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...
阅读 3454·2021-11-17 09:33
阅读 1804·2021-10-26 09:51
阅读 1367·2021-09-29 09:44
阅读 1458·2019-08-30 15:55
阅读 1324·2019-08-30 15:52
阅读 2204·2019-08-30 15:43
阅读 3338·2019-08-29 17:00
阅读 2198·2019-08-29 16:23
