2021.5.31.20:47

  今天是星期一,有点累,不过还好。

背景图片和精灵图

<style>
        /* 
            1.background-image: url(背景图片的资源路径)
            2.background-size: 设置背景图片的大小 
                两个参数: 宽 高
                取值:可以是绝对值 px, 也可以是百分比(基数参照容器的宽高值)
                auto: 表示根据 宽/高 的缩放比例 ,计算 宽/高 的尺寸
                cover/contain
                cover: 覆盖 可以在等比例缩放图片的基础上,将容器填充满(不一定会把图片显示完整)
                contain: 包容 可以在等比例缩放图片的基础上,完整的显示图片(不一定会把容器填充满)

            3.background-repeat: 背景平铺
                默认值:repeat
                no-repeat 不平铺
                repeat-x 只沿x轴平铺
                repeat-y 只沿y轴平铺
            4.background-position: 背景图片定位
                两个参数: x轴的偏移量   y轴方向的偏移量
                取值:绝对值 px;
                     方位名词: top  bottom  left  right center
                     百分比: 计算背景图实际的偏移量 = (容器的宽/高 - 背景图的宽/高) * 百分比
         */
        .box1{
            width: 200px;
            height: 200px;
            background-image: url(./images/bg.png);
            /* background-size: 200px 200px; */
            background-size: 200px auto;

        }
        .box2{
            width: 1000px;
            height: 1400px;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
            border: 1px solid #333;
            background-size: 100% 100%;
        }
        .box3{
            width: 300px;
            height: 240px;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
            /* background-position: -50px -104px; */
            background-size: 400px auto;
            background-position: 50% bottom;
        }
        .box4{
            width: 800px;
            height: 700px;
            border: 1px solid #333;
            background-image: url(./images/bg.png);
            background-repeat: no-repeat;
            background-size: contain;
        }
    </style>
</head>
<body>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->
    <div class="box3"></div>
    <div class="box4"></div>
</body>

代码使用的精灵图 放在对应的文件夹中

2021.5.31.20:47

精灵图的制作

使用工具为CssSprite.exe(百度一下即可下载)

 

<style>
      .img {
        background: url(./images/img.png) no-repeat;
      }
      .send-gift {
        height: 42px;
        width: 129px;
        background-position: 0 0;
      }
      .send-gift-hover {
        height: 42px;
        width: 129px;
        background-position: 0 -42px;
      }
      .share-score-hover {
        height: 42px;
        width: 129px;
        background-position: 0 -84px;
      }
      .btn-share {
        height: 42px;
        width: 129px;
        background-position: 0 -126px;
      }
      .btn-replay-hover {
        height: 42px;
        width: 129px;
        background-position: 0 -168px;
      }
      .btn-replay {
        height: 42px;
        width: 129px;
        background-position: 0 -210px;
      }
      .btn-retry {
        height: 28px;
        width: 129px;
        background-position: 0 -252px;
      }
      .score-bar {
        height: 59px;
        width: 131px;
        background-position: 0 -280px;
      }
      .icon1:hover{
        background-position: 0 -168px;
      }
    </style>
  </head>
  <body>
      <div class="btn-replay img icon1"></div>
  </body>

背景颜色及颜色取值

<style>
        .box1{
            width: 200px;
            height: 200px;
            font-size: 24px;
            font-weight: 700;
            /* 设置背景颜色 */
            background-color: transparent;

            /* 颜色取值:
                1. 别名: 比如red blue transparent(透明色)等  
                2. 16进制数:#6位数字 0-9a-f  
                3. rgb(red,green,blue) 三元色 取值范围:0-255
                4. rgba(red,green,blue,alpha) alpha:透明度 取值范围:0-1
             */
            
            /* opacity: 透明度 */
            /* 当一个元素定义了opacity属性,并且值小于1时,那么它的子元素也会同样拥有相同的透明度 */
            /* opacity: 0.5; */
        }
        
    </style>
</head>
<body>
    <div class="box1">
        <p>hello</p>
    </div>
</body>

利用边框制作三角形和箭头

 1 <style>
 2         /* 观察原理 利用边框生成等腰直角三角形 */
 3         .tip1{
 4             width: 0;
 5             height: 0;
 6             border-top: 20px solid red;
 7             border-right: 20px solid green;
 8             border-bottom: 20px solid blue;
 9             border-left: 20px solid yellow;
10         }
11         .tip2{
12             width: 0;
13             height: 0;
14             /* border-top: 20px solid red;
15             border-right: 20px solid transparent;
16             border-bottom: 20px solid transparent;
17             border-left: 20px solid transparent; */
18 
19             /* 等腰直角三角形 */
20             border: 20px solid transparent;
21             border-top-color: red;
22         }
23         .tip3{
24             width: 0;
25             height: 0;
26             /* 观察原理: 直角三角行 */
27             border-top: 40px solid red;
28             border-right: 20px solid green;
29             border-bottom: 40px solid blue;
30             border-left: 20px solid yellow;
31         }
32 
33         /* 利用 边框+旋转 形成箭头 */
34         .arrow{
35             width: 30px;
36             height: 30px;
37             border-left: 3px solid #333;
38             border-bottom: 3px solid #333;
39             /* 旋转 */
40             transform: rotate(-45deg);
41         }
42     </style>
43 </head>
44 <body>
45     <div class="tip1"></div>
46     <div class="tip2"></div>
47     <div class="tip3"></div>
48     <div class="arrow"></div>
49 </body>

轮廓线

 1 <style>
 2         #txt:focus{
 3             /* outline-color: tomato;
 4             outline-style: dotted;
 5             outline-width: 3px; */
 6             outline: solid 3px red;
 7             /* 轮廓线 与 边框的区别: 轮廓线部分上右下左四个方向 */
 8             /* 初始化样式时,一般会去除 input ,button这些元素的轮廓线 */
 9         }
10         .box{
11             width: 100px;
12             height: 100px;
13             outline: solid 3px red
14         }
15     </style>
16 </head>
17 <body>
18     <input type="text" id="txt">
19     <input type="button" value="按钮1">
20     <button>按钮2</button>
21     <div class="box"></div>
22 </body>

 

上外边距穿透问题

 1 <style>
 2         *{
 3             margin: 0;
 4             padding: 0;
 5         }
 6         /* 解决方式: */
 7         .parent{
 8             width: 300px;
 9             height: 300px;
10             background-color: skyblue;
11             /* 1. 给父元素设置 overflow:hidden*/
12             /* overflow: hidden; */
13 
14             /* 2. 给父元素添加上边框 */
15             /* border-top: 1px solid transparent; */
16 
17             /* 3. 给父元素添加上内边距 */
18             /* padding-top: 1px; */
19         }
20         .child{
21             width: 100px;
22             height: 100px;
23             background-color: pink;
24             margin-top: 100px;
25 
26             /* 4. 让子元素浮动 或者 绝对定位、固定定位 */
27             /* float: left; */
28             position: absolute;
29         }
30     </style>
31 </head>
32 <body>
33     <div class="parent">
34         <div class="child"></div>
35     </div>
36 </body>

行元素与行内块元素之间的间隙问题

 <style>
        .box1 span{
            background-color: violet;
        }
        .box2{ 
            /* 2. 设置父元素的font: size 0; 再重新设置子元素的font-size */
            /* font-size: 0; */
        }
        .box2 span{
            background-color: turquoise;
            /* font-size: 20px; */

            /* 3. 设置子元素浮动 */
            /* float: left; */

            /* 4. 利用 margin-left,让元素左移 */
            margin-left: -5px;
        }
    </style>
</head>
<body>
    <!-- 产生间隙的原因: 换行符 -->
    <div class="box1">
        <!-- 1. 元素与元素之间不加换行符 -->
        <span>item1</span><span>item2</span>
    </div>
    <div class="box2">
        <span>item1</span>
        <span>item2</span>
        <span>item3</span>
        <span>item4</span>
        <span>item5</span>
        <span>item6</span>
        <span>item7</span>
        <span>item8</span>
        <span>item9</span>
        <span>item10</span>
    </div>
</body>

 

上一篇:剑指 Offer 47. 礼物的最大价值


下一篇:(47)FPGA面试技能提升篇(Aurora协议/接口)