6、常用网页布局方式
2019-03-16 本文已影响0人
Rebirth_914
一、表格布局
- 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--为了确保在所有设备上能够正确渲染并支持触控缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" >
<title>表格布局实例</title>
<style type="text/css">
.container{
width: 90%;
margin: 0 auto;
}
td{
width: 300px;
height: 220px;
border-radius: 10px;
border: 1px solid #EEEEEE;
}
.img-circle{
border-radius: 10px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>表格布局实例</h2>
<div class="container">
<table border="0" cellspacing="10" cellpadding="10">
<tr>
<td><img src="img/01.jpg" class="img-circle"/></td>
<td><img src="img/02.jpg" class="img-circle"/></td>
<td><img src="img/03.jpg" class="img-circle"/></td>
</tr>
<tr>
<td><img src="img/04.jpg" class="img-circle"/></td>
<td><img src="img/05.jpg" class="img-circle"/></td>
<td><img src="img/06.jpg" class="img-circle"/></td>
</tr>
</table>
</div>
</body>
</html>
-
运行结果
表格布局
二、DIV+CSS布局
- 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--为了确保在所有设备上能够正确渲染并支持触控缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" >
<title>div+css布局实例</title>
<style type="text/css">
.container{
width: 80%;
margin: 0 auto;
}
.box{
float: left;
width: 300px;
height: 220px;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px 10px 10px 10px;
border-radius:10px ;
border: 1px solid #EEEEEE;
}
.img-circle{
border-radius: 10px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>DIV+CSS布局实例</h2>
<div class="container">
<div class="box">
<img src="img/01.jpg" class="img-circle" />
</div>
<div class="box">
<img src="img/02.jpg" class="img-circle" />
</div>
<div class="box">
<img src="img/03.jpg" class="img-circle" />
</div>
<div class="box">
<img src="img/04.jpg" class="img-circle" />
</div>
<div class="box">
<img src="img/05.jpg" class="img-circle" />
</div>
<div class="box">
<img src="img/06.jpg" class="img-circle" />
</div>
</div>
</body>
</html>
-
运行结果
Snipaste_2019-03-16_21-27-12.png
三、flex布局
注：flex布局是一维的，默认横向
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!--为了确保在所有设备上能够正确渲染并支持触控缩放-->
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" >
<title>flex布局实例</title>
<style type="text/css">
.container{
width: 90%;
margin: 0 auto;
}
.row{
display: flex;
}
.box{
float: left;
width: 300px;
height: 220px;
margin-left: 10px;
margin-bottom: 10px;
padding: 10px 10px 10px 10px;
border-radius:10px ;
border: 1px solid #EEEEEE;
}
.img-circle{
border-radius: 10px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>flex布局实例</h2>
<div class="container">
<div class="row">
<div class="box"><img src="img/01.jpg" class="img-circle"></div>
<div class="box"><img src="img/02.jpg" class="img-circle"></div>
<div class="box"><img src="img/03.jpg" class="img-circle"></div>
</div>
<div class="row">
<div class="box"><img src="img/04.jpg" class="img-circle"></div>
<div class="box"><img src="img/05.jpg" class="img-circle"></div>
<div class="box"><img src="img/06.jpg" class="img-circle"></div>
</div>
</div>
</body>
</html>
若要用flex布局，可在css中添加display：flex；
纵向的需添加flex-description:column;
-
运行结果
Snipaste_2019-03-16_20-14-59.png
四、grid布局
- 完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
<title>练习</title>
<style type="text/css">
.container{
width: 90%;
margin: 0 auto;
display: grid;
grid-template-columns: 333px 333px 333px 333px;
grid-template-rows:230px 230px 230px;
}
.box{
margin-left: 10px;
margin-bottom: 10px;
padding: 10px 10px 10px 10px;
border-radius: 10px;
border: 1px solid #EEEEEE;
}
.box1{
grid-column-start: 1;
grid-column-end: 5;
}
.box2{
grid-column-start: 1;
grid-column-end: 3;
}
.box4{
grid-column-start: 1;
grid-column-end: 5;
}
.box3{
float: left;
width: 300px;
height: 200px;
padding: 3px 10px 3px 10px;
}
.row{
display: flex;
}
.img-circle{
border-radius: 10px;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="box box1">
<div class="row">
<div class="box3"><img src="img/01.jpg" class="img-circle" /></div>
<div class="box3"><img src="img/07.jpg" class="img-circle" /></div>
<div class="box3"><img src="img/08.jpg" class="img-circle" /></div>
<div class="box3"><img src="img/09.jpg" class="img-circle" /></div>
</div>
</div>
<div class="box box2">
<img src="img/02.jpg" class="img-circle" />
</div>
<div class="box ">
</div>
<div class="box ">
<img src="img/03.jpg" class="img-circle" />
</div>
<div class="box box4">
<img src="img/04.jpg" class="img-circle" />
</div>
</div>
</body>
</html>
-
运行结果
Snipaste_2019-03-16_20-14-59.png
