手记

css浮动与定位

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>test</title>

<style type="text/css">

*{

margin:0 0;

padding:0 0;

}

.container{

width:100%;

height:300px;

background-color:orange;

/*position: absolute;*/

}

.container1{

width:100%;

height:300px;

background-color:yellow;

}

.subcontainer{

width:600px;

height:250px;

background-color:purple;

/*opacity: 0.6;*/

position: relative;

margin:0 auto;

}

.son{

width:500px;

height:200px;

background-color:blue;

/*opacity:0.5;*/

position: relative;

margin:0 auto;

}

.jobcontainer{

width:210px;

height:150px;

background-color:yellow;

/*opacity:0.6;*/

margin:0 auto;

/*padding:10px 0px;

box-sizing:border-box;*/


}

.job{

width:50px;

height:50px;

background-color:red;

/*opacity:0.9;*/

float:left;

margin-right:30px;

margin-bottom:20px;

}

.job1{

float:left;

width:50px;

height:50px;

background-color:green;

/*opacity:0.9;*/

}

</style>

</head>

<body>

<div class="container">

<div class="subcontainer">

<div class="son">

<div class="jobcontainer">

<div class="job"></div>

<div class="job"></div>

<div class="job1"></div>

<div class="job"></div>

<div class="job"></div>

<div class="job1"></div>

</div>

</div>

</div>

</div>

<div class="container1">

<div class="subcontainer">

<div class="son">

<div class="jobcontainer">

<div class="job"></div>

<div class="job"></div>

<div class="job1"></div>

<div class="job"></div>

<div class="job"></div>

<div class="job1"></div>

</div>

</div>

</div>

</div>

</body>

</html>


效果图


0人推荐
随时随地看视频
慕课网APP