html-06

用户409379271368
119 阅读4分钟

  1. 盒子模型-外轮廓outline

    • 不占据盒子模型的空间,盒子大小默认为内容+padding+border
    • 一般常用在取出a元素,input元素的focus轮廓效果,outline:none

  2. 盒子阴影 -box-shadow

    • offset-x : 水平方向偏移量
    • offset-y : 垂直方向偏移量
    • blur-radius : 模糊半径
    • spread-radius : 延伸半径
    • color : 阴影颜色
    • inset : 外框阴影变为内框阴影
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: #f00;
​
      box-shadow: 5px 5px 10px 10px #a00 inset;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
</body>
</html>

  3. 盒子模型-文字阴影text-shadow

    • 与盒子阴影类似,只是没有向外延伸和inset
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
    .box {
      font-size: 50px;
      font-weight: 700;
​
      text-shadow: 30px 30px 5px gray;
    }
  </style>
</head>
<body>
  
​
  <div class="box">相思视觉海非深</div>
</body>
</html>

  4. 盒子属性在行内非替换元素的特殊性 span/i....

    • width与height不生效
    • padding : 上下会被撑大但是不占据空间,左右被撑大,但是占用空间
    • border : 与padding特点一致
    • margin : 上下不生效,左右生效且占据空间

  5. 盒子模型- 盒子尺寸计算 - box-sizing

    • 标准盒子尺寸 : width/height + padding + border
    • content-box : padding,border都布局在width与height外边
    • border-box : padding, border都布局在width与height里边

  6. 案例一

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
​
​
    .item {
      color: #fff;
      width: 100px;
      height: 30px;
      border-radius: 20px;
      line-height: 30px;
      text-align: center;
    }
    .box1 {
      background-color: #f00;
    }
​
    .box2 {
      background-color: #000;
    }
  </style>
</head>
<body>
  
  <div class="box1 item">
    <a href="">新人福利</a>
  </div>
​
  <div class="box2 item">
    <a href="">PLUS会员</a>
  </div>
</body>
</html>

  7. 案例二

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
​
    body {
      background-color: #f5f5f5;
    }
​
    h3,p {
      margin: 0;
      padding: 0;
    }
    .box {
      width: 234px;
      height: 260px;
      background-color: #fff;
      box-sizing: border-box;
      padding: 20px 0;
      text-align: center;
    }
​
    img {
      width: 160px;
      height: 160px;
    }
​
    h3 {
      font-size: 14px;
      font-weight: normal;
      margin: 0 10px 2px;
    }
​
    .desc {
      font-size: 12px;
      color: #b0b0b0;
      margin: 0 10px 10px;
      /* 单行显示省略号 */
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
​
    .price {
       font-size: 14px;
       color: #ff6700;
    }
​
    .price .del {
      color: #b0b0b0;
      text-decoration: line-through;
​
      margin-left: 8px;
    }
​
    .box:hover {
      box-shadow: 0 5px 10px 5px rgba(0,0,0,.2) ;
    }
​
  </style>
</head>
<body>
  <div class="box">
    <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/388b13bf52ab0d6a56bc9f195b5f1dd5.jpg?thumb=1&w=200&h=200&f=webp&q=90" alt="">
    <h3>小米电视 ES55 2022款</h3>
    <p class="desc">多分区背光 | MEMC动态补偿 | 杜比视界</p>
    <p class="price">2399元<span class="del">2999元</span></p>
  </div>
</body>
</html>

  8. 案例三

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
​
    a {
      display: inline-block;
      text-decoration: none;
      color: #000
    }
    .item {
      width: 300px;
      /* height: 157.5px; */
      margin: 0 auto;
    }
​
    .item .album img {
      width: 100%;
      border-radius: 6px;
    }
​
    .item .info a {
      width: 100%;
    }
​
    .item .info p {
      margin: 0;
      padding: 0;
      font-size: 15px;
      margin-top: 8px;
​
      /* 一行 */
      /* white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; */
​
      /* 多行 */
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
​
    .item .info .anchor {
      font-size: 13px;
      color :#888;
      margin-top: 5px;
      position: relative;
      top: 3px;
    }
​
    .anchor::before {
      content: url(./widget-up.svg);
      display: inline-block;
      width: 16px;
      height: 16px;
    }
​
  </style>
</head>
<body>
  
  <div class="item">
    <div class="album">
      <a href="https://www.bilibili.com/video/BV17C4y1i7uz/?spm_id_from=333.1007.tianma.1-1-1.click">
        <img src="https://i2.hdslb.com/bfs/archive/d1580db91310c32ba745090277410e9623893bf0.jpg@672w_378h_1c_!web-home-common-cover.avif" alt="天罡传">
      </a>
    </div>
​
    <div class="info">
      <a href="https://www.bilibili.com/video/BV17C4y1i7uz/?spm_id_from=333.1007.tianma.1-1-1.click">
        <p>天罡传的终极暗线你看懂了？全网最硬核解析《天罡传》！不良帅!李星云!李茂贞!张子凡!李存勖!</p>
      </a>
      <a class="anchor" href="https://www.bilibili.com/video/BV17C4y1i7uz/?spm_id_from=333.1007.tianma.1-1-1.click">
        <span class="nickname">陈家出了个秀才</span>
        <span class="time">11-09</span>
      </a>
    </div>
  </div>
</body>
</html>

  9. CSS样式-设置背景

    • background-image

    • background-repeat

      • repeat: 平铺
      • no-repeat: 不平铺
      • repeat-x: x轴平铺
      • repeat-y: y轴平铺
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #ffff00;
​
      background-image: url(../预习代码/imgs/kobe01.jpg),url(../预习代码/imgs/kobe02.png);
​
      /* 背景是否平铺 */
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
</body>
</html>

    • background-size

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;
      background-image: url(../预习代码/imgs/kobe01.jpg);
      background-repeat: no-repeat;
​
      /* 设置背景大小 */
      /* 
      contain: 让背景图全部显示出来,不管是不是覆盖了所有的背景,等比例
      cover: 让图片全部覆盖背景区域,图片有些部分可能会被覆盖,高度拉伸
      100% 100% : 高度和宽度进行100%拉伸
      100px 100px : 设置具体的尺寸
      */
      background-size: contain;
      background-size: cover;
    }
  </style>
</head>
<body>
  
  <div class="box">
​
  </div>
</body>
</html>

    • background-position

      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
​
  <style>
    .box {
      width: 600px;
      height: 600px;
      background-color: #f00;
      background-image: url(../预习代码/imgs/kobe01.jpg);
      background-repeat: no-repeat;
      /* 调整图片位置 */
      /* 往右移动100px,往下移动100px */
      background-position: 100px 100px;
      /* 圖片移動到右下角 */
      background-position: right bottom;
      /* 图片居中显示 */
      background-position: center center;
      /* 当只设置一个值时,另一个方向默认是center */
      background-position: top;
    }
  </style>
</head>
<body>
  
  <div class="box"></div>
</body>
</html>

    • background-attachment

      • scroll: 背景不跟随滚动条移动
      • local: 背景跟随滚动条移动
      • fixed: 背景相对于浏览器的视口固定,和scroll一致,只是参照物不一样

    • background

  10. background-image与img的对比

捕获.PNG

avatar
文章
阅读
粉丝