CSS外边距margin，小米广告、品优购案例165

最新推荐文章于 2024-09-05 11:30:24 发布

IE吃饭

最新推荐文章于 2024-09-05 11:30:24 发布

阅读量163

点赞数

文章标签： css

本文链接：https://blog.csdn.net/luojunjie1999/article/details/107287896

版权

盒子外边距margin
使用方法与内边距padding类似
在这里插入图片描述
水平居中方法盒子

行内元素和行内块元素居中方法

居中综合案例

    <style>
      .header{
        width: 200px;
        height: 200px;
        background-color:pink;
        margin: 20px auto;
        text-align: center;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <span>文字</span>
    </div>
  </body>

嵌套块元素塌陷问题
在这里插入图片描述

        border: 1px solid transparent;
        padding: 2px;
        overflow: hidden;

清除内外边距

      *{
        margin: 0;
        padding: 0;
      }

使用PS的基础操作

在这里插入图片描述

小米广告小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body{
      background-color: #ededed;
    }
    .box1{
      width: 234px;
      height: 300px;
      margin: 100px auto;
      background-color:#fff;
    }
    .box1 .quwendai{
      width: 160px;
      height: 160px;
      padding: 0 37px;
      margin-top: 20px;
    }
    .box1 .name{
      height: 25px;
      padding: 0 55px;
      margin-top: 5px;
      text-align: center;
      font-size: 14px;
    }
    .box1 .introduce{
      font-size: 12px;
      color: #c2c2c2;
      padding: 0 80px;
      margin-top: 2px;
    }
    .box1 .price {
      font-size: 14px;
      padding: 0 75px;
      margin-top: 15px;
    }
    .box1 .price .cupr{
      color: #ff6e0b;
    }
    .box1 .price .bfpr{
      color: #b0b0b0;
      /* 文字下划线 */
      text-decoration:line-through;
    }
  </style>
</head>
<body>
  <div class="box1">
    <img src="垃圾袋.webp" alt="" class="quwendai">
    <p class="name">3卷装抽绳式垃圾袋</p>
    <p class="introduce">让清洁更简单</p>
    <div class="price">
      <span class="cupr">9.9元</span>
      <span class="bfpr">14.9元</span>
    </div>
  </div>
</body>
</html>

在这里插入图片描述

品优购物案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    .pingyougou{
      width: 250px;
      height: 200px;
      margin: 100px auto;
      border: 2px solid #cccccc;
    }
    .title{
      width: 250px;
      height: 35px;
      border-bottom: 2px dotted #cccccc;
      color: #666666;
    }
    .title .name{
      display:inline-block;
      padding: 0 112px 0 15px;
      margin: 10px;
    }
    .title .more{
      text-decoration: none;
    }
    .content {
      padding:0 0 0 20px;
      margin-top: 15px;
    }
    .contentbox li{
      list-style: none;
      margin-bottom: 12px;
    }
    .contentbox li a{
      text-decoration: none;
      color: #666666;
    }
  </style>
</head>
<body>
  <div class="pingyougou">
    <div class="title">
    <h4 class="name">品优购快报</h4>
    <a href="http://www.boyuanwl.com/#" class="more">更多</a>
  </div>
  <div class="content">
    <ur class="contentbox">
      <li class="content1">
        <a href="http://www.boyuanwl.com/#" >【特惠】爆款耳机5折秒！</a>
      </li>
      <li class="content2">      
        <a href="http://www.boyuanwl.com/#" ">【特惠】母情节，健康好礼低至5折！</a>
      </li>
      <li class="content3"> 
        <a href="http://www.boyuanwl.com/#" ">【特惠】爆款耳机5折秒！</a>
      </li>
      <li class="content4">
        <a href="http://www.boyuanwl.com/#" >【特惠】9.9元洗十张照片！</a>
      </li>
      <li class="content5">
        <a href="http://www.boyuanwl.com/#" >【特惠】长虹智能空调立省1000元！</a>
      </li>
    </ur>
  </div>
  </div>
</body>
</html>

在这里插入图片描述

IE吃饭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS外边距margin，小米广告、品优购案例165

盒子外边距margin使用方法与内边距padding类似水平居中方法盒子行内元素和行内块元素居中方法居中综合案例 <style> .header{ width: 200px; height: 200px; background-color:pink; margin: 20px auto; text-align: center; } </style>
复制链接

扫一扫