01浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.father{
border: 1px solid blue;
overflow: hidden;
}
.son{
width: 100px;
height: 100px;
border: 1px solid red;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
</div>
</body>
</html>
01浮动_flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1</title>
<style type="text/css">
.father{
border: 1px solid blue;
/* 把父盒子设置成伸缩盒布局
子元素默认水平排列
*/
display: flex;
/* 项目的排列方向 */
flex-direction: row;
}
.son{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
<div class="son">2</div>
<div class="son">3</div>
</div>
</body>
</html>
效果：
02盒子垂直居中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1</title>
<style type="text/css">
.father{
border: 1px solid blue;
width: 500px;
height: 500px;
position: relative;
}
.son{
width: 100px;
height: 100px;
border: 1px solid red;
position: absolute;
left: 50%;
top: 50%;
/* margin-top: -50px;
margin-left: -50px; */
transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
</div>
</body>
</html>
02盒子垂直居中_flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1</title>
<style type="text/css">
.father{
border: 1px solid blue;
width: 500px;
height: 500px;
/* flex 垂直居中*/
display: flex;
justify-content: center;
align-items: center;
}
.son{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="father">
<div class="son">1</div>
</div>
</body>
</html>
效果图：
03flex伸缩盒换行排列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.wrap{
border: 1px solid blue;
width: 750px;
height: 1000px;
margin: auto;
}
.nave{
display: flex;
/* 伸缩盒换行 */
flex-wrap: wrap;
}
.item{
width: 20%;
height: 100px;
border: 1px solid red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="wrap">
<div class="nave">
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
<div class="item">1</div>
</div>
</div>
</body>
</html>
效果图：
04手机端页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.slider img{
width: 100%;
}
.index-nav li{
border: 1px solid #ccc;
width: 33.3333%;
height: 100px;
text-align: center;
float: left;
box-sizing:border-box ;
}
.index-nav li img{
width: 40px;
margin-top: 17px;
}
.index-nav li p{
font-size: 14px;
color: #333;
}
a{
text-decoration: none;
}
.enter{
height: 200px;
background-color: antiquewhite;
}
.index-nav ul{
/* 清除浮动 */
overflow: hidden;
}
</style>
</head>
<body>
<div class="slider">
<img src="assets/images/banner-01.png" alt="a"/>
</div>
<div class="index-nav">
<ul>
<li>
<a href="#">
<img src="assets/icons/grid-01.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-02(1).png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-03.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-04.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-05.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-06.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-07.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-08.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-09.png" alt="" >
<p>美食</p>
</a>
</li>
</ul>
</div>
<div class="enter">
首页入口
</div>
</body>
</html>
04手机端页面布局_flex
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>1</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
.slider img{
width: 100%;
}
.index-nav ul{
/* 给当前父元素设置成伸缩盒模式 */
display: flex;
/* 设置子元素换行排列 */
flex-wrap: wrap;
}
.index-nav li{
border: 1px solid #ccc;
width: 33.3333%;
box-sizing: border-box;
}
.index-nav li a{
height: 100px;
/* 给当前父元素设置成伸缩盒模式 */
display: flex;
/* 设置垂直排列 */
flex-direction:column ;
/* 设置主轴居中 */
justify-content: center;
/* 设置交叉轴居中 */
align-items: center;
}
.index-nav li img{
width: 40px;
}
.index-nav li p{
font-size: 14px;
color: #333;
}
a{
text-decoration: none;
}
.enter{
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="slider">
<img src="assets/images/banner-01.png" alt="a"/>
</div>
<div class="index-nav">
<ul>
<li>
<a href="#">
<img src="assets/icons/grid-01.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-02(1).png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-03.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-04.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-05.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-06.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-07.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-08.png" alt="" >
<p>美食</p>
</a>
</li>
<li>
<a href="#">
<img src="assets/icons/grid-09.png" alt="" >
<p>美食</p>
</a>
</li>
</ul>
</div>
<div class="enter">
首页入口
</div>
</body>
</html>效果图：
323
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
