2018 May 14 布局

布局总结3

题目：上中下三部分屏幕宽，上下定高，中间高度自适应，且中间部分由左右两部分组成，宽度占比为3:7

思路：上下绝对定位，中间绝对定位。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上中下</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .top,.footer{
        position: absolute;
        background: pink;
        height:100px;
        width:100%;
    }
    .top{
        top:0;
        left:0;
    }
    .footer{
        bottom:0;
        left:0;
    }
    .middle{
        position: absolute;
        top:100px;
        bottom:100px;
        left:0;
        background: orange;
        width:100%;
    }
    .left{
        width:30%;
        height:100%;
        background:red;
        float:left;
    }
    .right{
        width:70%;
        height:100%;
        float:left;
        background:blue;
    }
</style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="middle">
           <div class="left"></div>
           <div class="right"></div>
        </div>
        <div class="footer"></div>
    </div>
</body>
</html> 

一道笔试题

请用HTML5/CSS3写一个双栏布局，顶部有导航栏，底部有网站简介。

要求如下：

PC端：侧边栏在左侧，定宽；主内容在右侧，宽度自适应，内容区域高度不定。

手机上：所有竖排，依次是内容、导航、侧边栏、底部。（假定宽度低于480px的是手机）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,user-scalable=no">
	<title>Document</title>
	<style>
		header,footer{
			height:100px;
			background: pink;
		}
		aside{
			width:200px;
			background: red;
			float: left;
		}
		div{
			margin-left: 200px;
			background: yellow;
		}

		@media screen and (max-width:480px){
			body{
				display: flex;
				flex-direction:column;
				justify-content:flex-start; 
			}
			aside,div{
				width:100%;
				margin-left: 0;
			}
			div{
				order:-1;  /*调整顺序*/
			}
		}
	</style>
</head>
<body>
	<header>header</header>
	<aside>aside</aside>
	<div>main</div>
	<footer>footer</footer>
</body>
</html>