html5 流式布局 弹式布局 flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 网站导航</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
/* 流式布局
header{
height:300px;
width:80%;
margin:0 auto;}
section{
float:left;
height:300px;
width:33.333%;}
section:first-child{
}
section:last-child{
}
*/
/* flex 弹式布局
display:flex;
*/
header{
height:300px;
width:80%;
margin:0 auto;
display:-webkit-flex;}
section{
float:left;
height:300px;
-webkit-flex:1;}
section:first-child{
-webkit-flex:2
}
section:last-child{
-webkit-flex:1;}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<header>
<section></section>
<section></section>
<section></section>
</header>
<script>
$(document).ready(function(e) {
});
</script>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习 网站导航</title>
<style>
*{
margin:0;
padding:0;
list-style:none;}
/* 流式布局
header{
height:300px;
width:80%;
margin:0 auto;}
section{
float:left;
height:300px;
width:33.333%;}
section:first-child{
}
section:last-child{
}
*/
/* flex 弹式布局
display:flex;
*/
header{
height:300px;
width:80%;
margin:0 auto;
display:-webkit-flex;}
section{
float:left;
height:300px;
-webkit-flex:1;}
section:first-child{
-webkit-flex:2
}
section:last-child{
-webkit-flex:1;}
</style>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<header>
<section></section>
<section></section>
<section></section>
</header>
<script>
$(document).ready(function(e) {
});
</script>
</body>
</html>
