practice

　　　　

<html>

<meta charset="utf-8">
<style>
.フロント{position:fixed;
top:40px;
left:12px;
height:330px;
width:1068px;
background-color:#eeeeee;
border:2px solid black;
border-radius:4px;}
.パネル_123{position:absolute;
top:4px;
left:4px;
height:208px;
width:1058px;
background-color:#ffffff;
border:1px solid blue;
overflow:hidden;
border-radius:4px;}
.パネル_123 .コンポーネント_A{float:left;
height:200px;
width:656px;
background-color:#fffddd;
border:1px solid #000000;
padding:4px;
box-sizing:border-box;
margin-top:4px;
margin-right:0;
margin-left:4px;
margin-bottom:0;}
.パネル_123 .コンポーネント_B{float:left;
height:200px;
width:98px;
background-color:#effffd;
border:1px solid #000000;
padding:4px;
box-sizing:border-box;
margin-top:4px;
margin-right:0;
margin-left:4px;
margin-bottom:0;}
.パネル_123 .コンポーネント_C{float:left;
height:200px;
width:288px;
background-color:#ffffff;
border:1px solid #000000;
padding:4px;
box-sizing:border-box;
margin-top:4px;
margin-right:0;
margin-left:4px;
margin-bottom:0;}
.パネル_4{position:absolute;
top:220px;
left:4px;
background-color:#ffffff;
border:1px dotted green;
overflow:hidden;
border-radius:4px;
margin-bottom:4px;}
.パネル_4 .コンポーネント_D{float:left;
height:98px;
width:1048px;;
background-color:#fceffd;
border:1px solid #000000;
padding:4px;
box-sizing:border-box;
margin-top:4px;
margin-right:4px;
margin-left:6px;
margin-bottom:4px;}
</style>

<div class="フロント">
<div class="パネル_123">
<div class="コンポーネント_A">front_panel-1</div>
<div class="コンポーネント_B">front_panel-2</div>
<div class="コンポーネント_C">front_panel-3</div>
</div>
<div class="パネル_4">
<div class="コンポーネント_D">front_panel-4</div>
</div>
</div>
<img src="front_panel.jpg"style="position:fixed;
top:400px;
left:12px;
height:334px;
width:1072px;">

</html>