代码!DOCTYPE html !DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title盒子模型基础/title style #text1{ border: rgb(20, 104, 41) solid 4px; background-color: rgb(113, 115, 115); width: 500px; margin-top:30px ; } #text2{ border: rgb(42, 32, 179) solid 4px; background-color: rgb(113, 115, 115); width: 550px; margin-top:30px ; padding-left: 20px; } .body{ display: flex; gap: 20px; } #text3{ border: rgb(189, 9, 9) solid 2px; background-color: rgb(113, 115, 115); width: 80px; height: 80px; padding:20px ; margin-top: 350px; margin-left: 10px; border-radius: 10px; display:flex; } #text4{ border: rgb(189, 9, 9) solid 2px; background-color: rgb(113, 115, 115); width: 150px; height: 150px; display: flex; margin-top: 280px; padding:20px ; border-radius: 10px 40px 10px 10px; } #text4 img{ border-radius:0px 30px 0px 0px; max-width: 100%; max-height: 100%; display: block; } #text5{ border: rgb(189, 9, 9) solid 2px; background-color: rgb(113, 115, 115); width: 300px; height: 300px; display: flex; margin-top: 130px; padding:20px ; border-radius: 70px 10px 70px 10px; } #text5 img{ border-radius:70px 0px 70px 0px; max-width: 100%; max-height: 100%; display: block; } /style /head body div idtext1b这个课堂练习禁止使用br和hr标签加粗文本/b/div div idtext2u这个课堂练习禁止使用br和hr标签下划线文本/u/div div classbody div idtext3img srcE:/前端/img_src/photo2.jpg/div div idtext4img srcE:/前端/img_src/photo2.jpg/div div idtext5 img srcE:/前端/img_src/photo2.jpg/div /div /body /html效果图
