编程练习打卡

来源：4-11 编程练习

张小毛

2020-09-14 18:35:02

外部样式表：

#div{
    width:808px;
    height:383.6px; 
    padding:20px;
    box-sizing:border-box; 
    border:1px dotted #d0d0d0;  
    /*float:left;*/
    margin:0px auto;
    margin-top: 50px;
}
#div11,#div12{
    border:1px solid #d0d0d0;
    margin-right:20px;
    margin-bottom:20px;
    float:left;
}
#div13{
    border:1px solid #d0d0d0;    
    margin-bottom:20px;
    float:left;
}
#div21,#div22{
    border:1px solid #d0d0d0;
    margin-right:20px;
    float:left;
}
#div22{ 
    border:1px solid #d0d0d0;
    margin-right:20px;
    float:left;
}
#div23{
    border:1px solid #d0d0d0;
   
    float:left;
}
p{
    margin:0px;
}

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="4_11.css">
</head>
<body>

<div id="div">
<div id="div11">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习知识！</p>
</div>
<div id="div12">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习知识！</p>

</div>
<div id="div13">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习知识！</p>
</div>


<div id="div21">
<img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg">
<p>欢迎来到慕课网学习知识！</p>
</div>
<div id="div22">
<img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg">
<p>欢迎来到慕课网学习知识！</p>
</div>
<div id="div23">
<img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg">
<p>欢迎来到慕课网学习知识！</p>
</div>
</div>


</body>
</html>

写回答

1回答