float布局
练习：导航栏
- 效果图
- html程序
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header class="clearfix">
<div class="logo">
<img src="https://xiedaimala.com/packs/_/assets/images/logos/red-logo-3f8db9041e6c15d4ae7ed7e4087c4b98.png" alt="">
</div>
<ul class="clearfix nav">
<li>首页</li>
<li>课程</li>
<li>优惠</li>
<li>关于</li>
</ul>
</header>
<div class="content clearfix">
<aside>一行有6个字</aside>
<main></main>
<div class="ad"></div>
</div>
<div class="imagelist">
<div class="x clearfix">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</body>
</html>
- CSS程序
*{margin:0;padding:0;box-sizing: border-box;}
ul,ol{
list-style: none;
}
img{max-width: 100%;}
.clearfix:after{
content: '';
display: block;
clear: both;
}
.logo{
display: inline-block;
float: left;
margin-top: 8px;/*(文字高度-图片高度)/2*/
margin-left: 10px;
}
.nav{
float: left;
}
.logo>img{
height: 26px;
vertical-align: top;/*可以去掉图片下面的背景色（如果发现图片下有多余的东西就写va:t）*/
}
ul > li{
float: left;
padding: 4px 0.5em;
/*四个参数：分别代表：上、右、下、左四个边框的边距值
三个参数：分别代表：上：10px、左右各20px、下：30px
两个参数：分别代表：上下各10px、左右各20px
一个参数：代表上下左右边距值都是10px*/
line-height: 32px;
}
ul{
display: inline-block;
}
header{
background: white;
color: red;
}
.content{
width: 600px;
margin-left: auto;/*块级元素且宽度固定，使用此居中*/
margin-right: auto;/*块级元素且宽度固定，使用此居中*/
}
.content>aside{
width: 190px;
height: 300px;
float: left;
background: #999;
}
.content>main{
height: 300px;
width: 300px;
float: left;
background: #ccc;
}
.content>.ad{
height: 300px;
width: 110px;
float: left;
background: #000;
}
.imagelist{
outline: 1px solid green;
width: 600px;
margin-left: auto;
margin-right: auto;
}
.imagelist > .x > .image{
width: 141px;
height: 141px;
border: 1px solid red;
background: black;
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 12px;
}
.imagelist > .x{
margin-right: -12px;/*x使用负margin消除右边最后一个image的margin，平均布局需要用到*/
}
flex布局
将一个元素变成flex容器
.container{
display: flex;/*缩写：d:f*/
display: inline-flex;/*缩写：d:if*/
}
重点
.container{
- display: flex;
- flex-direction: row/column（改变主轴items流动方向）
- flex-wrap: wrap（改变折行）
- justify-content: center/space-between(主轴对齐，默认横轴)
- align-items: center(次轴对齐，默认纵轴) }
练习：导航栏
- 效果图
- html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<header class="header">
<div class="logo">
<img src="https://xiedaimala.com/packs/_/assets/images/logos/red-logo-3f8db9041e6c15d4ae7ed7e4087c4b98.png" alt="">
</div>
<ul class>
<li>首页</li>
<li>课程</li>
<li>优惠</li>
<li>关于</li>
</ul>
</header>
<div class="content">
<aside>一行有6个字</aside>
<main></main>
<div class="ad"></div>
</div>
<div class="imagelist">
<div class="x">
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
<div class="image"></div>
</div>
</div>
</body>
</html>
- CSS代码
*{margin:0;padding:0;box-sizing: border-box;}
ul,ol{
list-style: none;
}
img{max-width: 100%;}
.logo{
display: flex;
align-items: center;
}
.logo>img{
height: 26px;
vertical-align: middle;/*可以去掉图片下面的背景色（如果发现图片下有多余的东西就写va:t）*/
}
.header{
display: flex;
justify-content: space-between;/*或者在子元素中加margin-left: auto;（推荐）*/
padding: 4px 0;
}
ul{
display: flex;
border: 1px solid green;
}
ul>li{
line-height: 32px;
padding: 4px;
}
.content{
display: flex;
min-width: 800px;
margin-left: auto;
margin-right: auto;
}
.content > aside{
background: #000;
width: 200px;
}
.content > main{
background: #666;
height: 400px;
flex-grow: 1;
}
.content > .ad{
background: #999;
width: 100px;
}
.imagelist{
outline: 1px solid green;
min-width: 800px;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
}
.imagelist > .x{
display: flex;
flex-wrap: wrap;
margin-right: -12px;
}
.imagelist > .x > .image{
width: 191px;
height: 191px;
border: 1px solid red;
background: black;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 12px;
}
flex青蛙小游戏
Grid布局
二位布局用Grid，一维布局用Flex 将一个元素变成Grid容器
.container{
display: grid;
display: inline-grid;
}
重点
.container{
-
display: grid;
-
gird-template-columns: 40px 50px auto 50px 40px;(设置各列及其宽度)
-
gird-template-rows: 40px 50px auto;(设置各行及其宽度)
-
gird-template-columns: 1fr 50px 2fr 1fr;(free space)
-
grid-column/row-gap: 10px（空隙）
-
grid-template-areas:（分区）
"header header header header"
"main main .(空) sidebar"
"footer footer footer footer" }
-
.item-a{
grid-area: header
}（设置分区）
-
.item-a{
grid-column/row-start: 2; grid-column/row-end: 5;
}（设置行列起始点，分区的另一种办法）
