222wan

导航

< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

html18

复制代码

<!
DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>另一种</title> <style> * { margin: 0; padding:0; } .box { width: 1226px; height: 615px; background-color: cornflowerblue; margin: 100px auto; } .left { width:234px ; height: 615px; float: left; background-color: darkgoldenrod; } .right { width: 992px; height: 615px; background-color: darkolivegreen; float: right; } li { list-style: none;/*去除小li的圆点形式*/ } .right ul li { width: 234px; height: 300px; background-color:rgb(146, 146, 175) ; float: left; margin-left: 14px;/*这里我们为什么要只设置左侧外边距,观察我们案例的图片可以看到在 在右盒子的每一个小盒子都距离左边有一个外边距,这一点要细心观察, 如果说我们像上一个例子一样给所有加上外边距那最后一个盒子就要涉及到取消外边距比较麻烦 */ margin-bottom: 14px;/*这里也是同理我们要多观察案例中的图片找到最合适的方法去写*/ } </style> </head> <body> <div class="box"> <div class="left">就放一张图片就行</div> <div class="right"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> </div> </div> </body> </html>
复制代码

今天是另一种盒子模型的案例:

只做出大体框架内容不加填充,

代码中的注释大家要多看

 

posted on   角落的蘑菇  阅读(12)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
点击右上角即可分享
微信分享提示