前端CSS(1)之两列布局和三列布局

  网页布局就是将网页根据不一样的内容进行划分,这样作不只能够美化网页外观,还能够让用户对你的网页功能一目了然,提高用户体验。
  两列布局和三列布局是咱们最多见的两种布局,我今天总结一下实现这两种布局的多种方式。本文代码没有考虑兼容性。css

两列布局

  侧栏宽度固定,左边内容部分宽度自适应。header和footer高度固定。html

利用浮动来布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #aside { height: calc(100% - 100px); width: 200px; text-align: center; background-color: aquamarine; float: left; } #main { height: calc(100% - 100px); width: calc(100% - 200px); background-color: #eee; text-align: center; overflow: hidden; //使其成为BFC,清除浮动,由于浮动也是一个BFC,两个BFC不会重叠 } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

利用绝对定位来布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { position: relative; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #footer { position: absolute; bottom: 0; width: 100% } #aside { /* height: calc(100% - 100px); */ width: 200px; text-align: center; background-color: aquamarine; position: absolute; left: 0; bottom: 50px; top: 50px; } #main { /* height: calc(100% - 100px); */ width: calc(100% - 200px); background-color: #eee; text-align: center; position: absolute; right: 0; bottom: 50px; top: 50px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

利用伸缩盒flex来布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { display: flex; flex-wrap: wrap; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; flex-basis: 100%; } #aside { width: 200px; height: calc(100% - 100px); text-align: center; background-color: aquamarine; } #main { height: calc(100% - 100px); width: calc(100% - 200px); background-color: #eee; text-align: center; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

利用网格grid来布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { display: grid; grid-template-columns: 200px auto; grid-template-rows: 50px auto 50px; grid-template-areas: "header header" "aside main" "footer footer" } #header, #footer { background-color: burlywood; text-align: center; line-height: 50px; } #header { grid-area: header; } #footer { grid-area: footer } #aside { grid-area: aside; } #main { grid-area: main; } #aside { text-align: center; background-color: aquamarine; } #main { background-color: #eee; text-align: center; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

三列布局

  两边侧栏宽度固定,中间内容部分宽度自适应。header和footer高度固定。app

利用浮动float来布局

float元素是有浮动范围的,在它的包含块中,若是它以前有内容,会阻止它向上浮动,所以在不要求content元素首先渲染的状况下咱们才会用浮动布局,由于此时content元素必须位于浮动元素下方。ide

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #aside1, #aside2 { height: calc(100% - 100px); width: 200px; text-align: center; background-color: aquamarine; } #aside1 { float: left; } #aside2 { float: right; } #main { height: calc(100% - 100px); background-color: #eee; text-align: center; overflow: hidden; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <main id="main">main</main>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

利用absolute定位来实现布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #app { position: relative; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } #footer { position: absolute; bottom: 0; width: 100% } #aside1, #aside2 { /* height: calc(100% - 100px); */ width: 200px; text-align: center; background-color: aquamarine; } #aside1 { position: absolute; left: 0; bottom: 50px; top: 50px; } #aside2 { position: absolute; right: 0; bottom: 50px; top: 50px; } #main { /* height: calc(100% - 100px); */ width: calc(100% - 400px); background-color: #eee; text-align: center; position: absolute; right: 200px; bottom: 50px; top: 50px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <main id="main">main</main>
        <aside id="aside1">aside</aside>
        <aside id="aside2">aside</aside>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码

利用flex和grid布局

  它们的布局方式与两列布局时的方式大同小异,这里就很少加阐述。咱们来总结一下实际网页三列布局中会用的两种布局:圣杯布局和双飞翼布局。布局

圣杯布局和双飞翼布局

圣杯布局

  为了中间content不被遮挡,为外层section设置了padding,使得边侧栏有地方放。且利用了margin为负对浮动元素的影响。flex

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } section { padding: 0 200px; height: calc(100% - 100px); /* height: 100px; */ } #main { float: left; background-color: #eee; text-align: center; height: 100%; width: 100%; } #aside1, #aside2 { float: left; width: 200px; height: 100%; background-color: aquamarine; position: relative; text-align: center; } #aside1 { left: -200px; margin-left: -100%; } #aside2 { right: -200px; margin-left: -200px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
            <aside id="aside1">aside1</aside>
            <aside id="aside2">aside2</aside>
        </section>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
双飞翼布局
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> * { margin: 0; padding: 0; } html, body, #app { height: 100%; } #header, #footer { height: 50px; background-color: burlywood; text-align: center; line-height: 50px; } section { float: left; height: calc(100% - 100px); width: 100%; /* height: 100px; */ } #main { background-color: #eee; text-align: center; height: 100%; margin: 0 200px; } #aside1, #aside2 { float: left; width: 200px; height: calc(100% - 100px); background-color: aquamarine; text-align: center; } #aside1 { margin-left: -100%; } #aside2 { margin-left: -200px; } </style>
</head>

<body>
    <div id="app">
        <header id="header">header</header>
        <section id="section">
            <main id="main">main</main>
        </section>
        <aside id="aside1">aside1</aside>
        <aside id="aside2">aside2</aside>
        <p style="clear:both"></p>
        <footer id="footer">footer</footer>
    </div>
</body>

</html>
复制代码
相关文章
相关标签/搜索