盒子模型划分网页模块--音乐盒

音乐盒

  • <div>标签 分割为独立的部分 实现页面的规划和布局
  • 盒子模型有 内容,宽高(width  height:),内边距(margin),边框(border),外边框(padding)组成
  • 边框样式

Solid单实线

Dashed虚线

Dotted点线

Double双实线

实例

程序代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>音乐盒</title>

       <style>

              *{margin:0px;padding: 0px}

             

              .all{

                     width: 220px;

                     height: 260px;

                     padding: 5px;

                     text-align: center;

                     border:#B9B0B0 solid ;

                     margin:50px auto ;

              }

              h2{

                     height: 50px;

                     line-height: 50px;

                     border-bottom:#B9B0B0 dotted;

              }

              p{

                     color:#DBD4D4;

              }

       </style>

</head>

<body>

       <div class="all">

       <div>

              <h2>毕业季|再见青春</h2>

           <p>36557人收听</p>

       </div>

       <div>

              <img src="music.jpg"/>

       </div>

       </div>

</body>

</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

不止代码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值