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

时间:2020-03-24
本文章向大家介绍百度前端任务(3)(4)(5)——巧谈前端基础html,css布局,主要包括百度前端任务(3)(4)(5)——巧谈前端基础html,css布局使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
经过了百度前端技术学院任务三和四五,在这里总结一下前端布局的一些个人见解,很多前端新手就是没有理解怎么布局而一直学不好

先说一下,我个人理解的前端布局的思想吧。
在前端布局的时候,
先不要设计太多什么margin,padding什么的
首先,你要清楚的是,你要的布局是什么
例如,我这里拿百度前端技术学院的任务(5)
作为例子讲解一下吧

附:百度前端技术学院的任务(5)

首先,根据题意,我们很容易得知,这是由一个头尾和内容的布局,布局采用的是类似淘宝双飞翼布局做成的CSS实现右侧固定宽度,左侧宽度自适应(点击链接即可知道具体怎么实现)

不过这不是这一篇的重点,重点是上中下布局。怎么实现呢?这里附上html和css代码

<!--首部-->
<div id="top"></div>
<!--内容-->
<div id="content"></div>
<!--尾部-->
<div id="footer"></div>
#top{
    height: 50px;
    background: black;
}

#content{
    height: 550px;
    background: gray;
}

#footer{
    height: 50px;
    background: blueviolet;
}

形成了上中下结构之后,再进行其他地方的编辑,注意,其他地方,一般要用class不要滥用id(虽然两者用起来都差不多)。接下来我,来示范一下CSS实现右侧固定宽度,左侧宽度自适应的做法吧。

附代码

<div id="content">
    <div class="left"></div>
    <div class="right"></div>
</div>
#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.cnblogs.com/homehtml/p/12558960.html