百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

CoyPan 发布于2019-08-30 15:52 / 1429人阅读

摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。

经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好

先说一下，我个人理解的前端布局的思想吧。
在前端布局的时候，
先不要设计太多什么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

百度前端任务(3)(4)(5)——巧谈前端基础html,css布局

摘要：经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。经过了百度前端技术学院任务三和四五，在这里总结一下前端布局的一些个人见解，很多前端新手就是没有理解怎么布局而一直学不好先说一下，我个人理解的前端布局的思想吧。在前端布局的时候，先不要设计太多什么margin,paddin...

YacaToy 2019-08-01 16:12 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

pkwenda 2019-08-29 12:35 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

ky0ncheng 2019-08-20 16:28 评论0 收藏0
百度前端技术学院2017学习总结

摘要：向已被访问的链接添加样式。让背景图片大小水平方向扩大一倍，这样才有移动与变化的空间。不足及改进总结来看，自己做得不够，虽然也花了时间，不过能看出有敷衍的成分在。一、前言百度的前端技术学院IFE，2016年就听说了，当时自己也报名，还组成队伍了，不过自己一个任务也没完成就结束了，遗憾... 关注了IFE，知道2017年2月有新的一期培训，于是一直在等着报名，然后开始做里面发布的任务（...

Jingbin_ 2019-08-01 16:49 评论0 收藏0
前端资源系列（4）-前端学习资源分享&前端面试资源汇总

摘要：特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。特意对前端学习资源做一个汇总，方便自己学习查阅参考，和好友们共同进步。本以为自己收藏的站点多，可以很快搞定，没想到一入汇总深似海。还有很多不足&遗漏的地方，欢迎补充。有错误的地方，还请斧正... 托管: welcome to git，欢迎交流，感谢star 有好友反应和斧正，会及时更新，平时业务工作时也会不定期更...

princekin 2019-08-20 11:28 评论0 收藏0