html5 流式布局弹式布局 flex

最新推荐文章于 2022-06-09 16:45:15 发布

ayiewu460246

最新推荐文章于 2022-06-09 16:45:15 发布

阅读量132

点赞数

原文链接：http://www.cnblogs.com/lsongyang/p/10618219.html

版权

<!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>

转载于:https://www.cnblogs.com/lsongyang/p/10618219.html