CSS实践案例

案例1：视觉差（简单小案例）

图片1：1.png

图片2：2.png

如何实现（滚动窗口过程）:
因 背景固定，内容滚动，两张图在滚动过程中产生了视觉差的效果
（为了达到图片占据整个窗口大小边框为0，同时平铺效果的选择考虑）
QQ截图20230815070615.png QQ截图20230815071152.png

代码：

<!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;
    }
    div{
        height: 500px;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
    }
    .img1{
        background-image: url(img/1.png);
    }
    .img2{
        background-image: url(img/2.png);
    }
   </style>
</head>
<body>
  <div class="img1"></div>
  <div class="img2"></div>
</body>
</html>

总结

CSS样式中的background-attachment: fixed;属性将背景图像固定在视口中，使其在滚动时保持固定位置。
当页面滚动时，由于背景图像的固定属性，两张背景图像将保持固定，而内容区域将滚动。这种背景图像的固定和内容滚动的差异导致了视觉差效果。

案例2：盒子布局（滚动条实现）

通过一张图来展示一个常见滚动条效果，可以看到右边有一个显示滚动条，滚动条大小是相对于整体想要显示内容。当鼠标悬停在指定位置，通过显示效果变化达到想要的效果呈现。（当然如果想要呈现更完整的功能，可以在指定位置(店铺类)，通过添加链接实现网页跳转。）
从中达到的效果（样式的复杂化：文本间距，字体大小以及颜色和边框间距等选择）

2T97`H9V_E~Z9NI$GW)ORQT.png

实现1：滚动条效果
overflow:auto来显示滚动条。当文本超出所要显示内容范围，有溢出时溢出内容通过滚动条来显示，没有溢出滚动条不显示。（与overflow:scroll不同（有没有溢出，都有显示滚动条））。

实现2：鼠标悬停效果
鼠标停留时.info:hover属性显示，不停留不显示
当鼠标停留在info部分日期段落和价格段落的文本颜色为白色。
且类别段落的文本颜色和内部div的背景色设置为#219cea。

代码：

<!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;
    }
    #box{
        width: 565px;
        height: 260px;
        margin:0 auto;
        overflow: auto;
    }
    .info{
        width: 162px;
        height: 112px;
        border:1px solid #808080;
        float:left;
        margin-right: 20px;
        margin-bottom: 20px;
    }
    .info div{
        width: 162px;
        height: 84px;
        background:#cccccc;
        font-size: 12px;
    }
    .info .price {
        text-align: center;
        height: 63px;
        line-height: 63px;            
        color:#b5b5b5;
    }
    .info .date{
        color:#b5b5b5;
        text-align: center;
    }
    .info .category{
        background:white;
        height: 28px;
        line-height: 28px;
        color:#000000;
        text-align: center;
        font-size: 12px;
    }
    .info:hover  div{
        background:#219cea;            
    }
    .info:hover .price{
        color:white;
    }
    .info:hover .date{
        color:white;
    }
    .info:hover .category{
        color:#219cea;
    }
  </style>
</head>
<body>
   <div id="box">
      <div class="info">
          <div>
            <p class="price">$50.00圆</p>
            <p class="date">有效期至:2023-7-15</p>
          </div>
        <p class="category">[店铺类][商城类]</p>
       </div>
    <div class="info">
        <div>
            <p class="price">$60.00圆</p>
            <p class="date">有效期至:2023-7-15</p>
        </div>
        <p class="category">[店铺类][商城类]</p>
    </div>
    
    ......(中间重复部分省略)
    ......
    
    <div class="info">
        <div>
            <p class="price">$100.00圆</p>
            <p class="date">有效期至:2023-7-15</p>
        </div>
        <p class="category">[店铺类][商城类]</p>
    </div>
  </div>
 </body>
</html>

总结

悬停效果：当鼠标悬停在.info类的元素上时，该元素的子元素div的背景颜色会变成#219cea，price的文本颜色会变为白色，date的文本颜色会变为白色，category的文本颜色会变为#219cea。
滚动条实现：使用了overflow: auto样式将box元素的内容超出部分显示为滚动条，如果内容超出了box的宽度和高度，则可以通过滚动条来滚动查看内容。

案例3：二级菜单（常见应用）

例京东的一个页面的二级菜单实现一个隐藏，当鼠标悬停上面，显示隐藏列表，这种优点更加体现在隐藏功能实现。
常见的二级菜单：

$TJ}0BPNR`Y_}0DF~NHKE{{2.png$

通过一个案例来实现一个简单的二级菜单：例下面三个图所示

第一个图是原始效果。
第二个图当鼠标悬停在导航栏里，显示隐藏的菜单。
第三个图当鼠标悬停在四个列表上时，字体颜色变化。
通过以上三个图展示一个菜单栏的功能。

$X2{KNO(P$_XWD}V7LUOHC(D.png$ B3ZQ6GA1SD}4$AG0J0IY924.png

主菜单有一个列表项（li）包裹的文字"导航"，并且设置了hover效果。当鼠标悬停在主菜单上时，会显示一个三角形符号，同时显示一个二级菜单。二级菜单是通过一个嵌套的无序列表（ul）实现的以及（li）列表。在主菜单上悬停时，二级菜单会显示出来。在

设置整个页面的边距和内边距为0。以及主菜单的宽度为300px，并且居中显示。
设置鼠标悬停时主菜单和二级菜单的背景颜色。同时设置二级菜单初始不可见，鼠标悬停时才会显示，以及悬停时的字体颜色。
设置三角形符号的样式，实现悬停时的效果。

三角形符号如何实现：

width: 0; 和 height: 0;：这两个属性将span元素的宽度和高度设置为0，实际上创建了一个看不见的元素框。
display: inline-block;：将span元素设置为内联块级元素，这样它可以在一行内显示，同时具备块级元素的特性。
border: 6px solid transparent;：设置span元素的边框为6px的实线，颜色为透明，实际上创建了一个边框框架。
border-top: 6px solid rgb(227, 160, 16);：设置span元素的上边框为6px的实线，颜色为指定的黄色（rgb(227, 160, 16)），形成了一个向上的三角形。
position: relative; 和 top: 3px;：通过相对定位，将span元素在垂直方向上向下偏移3px，以便在主菜单文字的下方显示。接下来，这个span元素被嵌套在主菜单的列表项（<li>导航</li>）中，在主菜单项的右侧，因此当鼠标悬停在主菜单项上时，这个span元素的样式也会变化，从而实现了一个向下的三角形效果。

代码：

<!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;
    }
    .box{
        width: 300px;
        margin:0 auto;
    }
    ul{
        list-style: none;
    }
    .box>li{
        float:left;
        width: 148px;
        text-align: center;
        border:1px solid rgb(197, 55, 16);
        background:rgb(207, 45, 96);
        color:whitesmoke;
        line-height: 40px;
    }
    .box>li:hover{
        background:rgb(197, 55, 16);
    }
    .box>li>ul {
        display: none;
        background:white;
        color:black;
    }
    .box>li:hover ul{
        display: block;
    }
    .box>li li:hover{
        color:rgb(110, 7, 21);
    }
    span{
        width:0;
        height:0;
        display: inline-block;
        border:6px solid transparent;
        border-top:6px solid rgb(227, 160, 16);
        position: relative;
        top:3px;
    }
    .box:hover span{
        border:6px solid transparent;
        border-bottom:6px solid rgb(227, 160, 16);
        top:-3px;
    }
   </style>
</head>
<body>
   <ul class="box">
     <li >导航
         <ul>
            <li>时间</li>
            <li>地点</li>
            <li>人物</li>
            <li>环境</li>
         </ul>
         <span></span>
     </li>         
   </ul>
</body>
</html>

总结和扩展

如何实现二级菜单：我们可以试着这两种方法来实现：

使用嵌套的无序列表（ul）和列表项（li）结构来创建二级菜单。通过给一级菜单项添加类名或其他选择器来选择特定的菜单项，然后使用CSS选择器来设置该菜单项的子菜单的样式。使用伪类选择器（如:hover）来控制鼠标悬停时的样式。
使用CSS伪元素和伪类来实现二级菜单。通过给一级菜单项添加伪类选择器（如:hover）来激活二级菜单的显示，并通过CSS伪元素（如::before或::after）来创建箭头或其他样式进行指示。

如何实现三角形：我们可以从以下三种方法：

使用边框属性来创建一个宽高为0的矩形块，通过设置不同边框的颜色和宽度，使其形成一个等腰三角形。
.triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
通过创建一个具有宽高的容器，在容器内部创建伪元素，并设置伪元素的边框属性，从而形成一个等腰三角形。通过设置伪元素相对于容器的绝对定位，可以根据需要调整三角形的位置和大小。
.triangle {
position: relative;
width: 20px;
height: 20px;
}
.triangle:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid black;
}
通过创建一个具有宽高的容器，设置其背景颜色，并使用transform属性旋转容器，从而形成一个45度角的等边三角形。
.triangle {
width: 20px;
height: 20px;
background-color: black;
transform: rotate(45deg);
}

简单的导航菜单实现：菜单具有悬停效果和三角形符号，使其更具交互性和吸引力。从中使用CSS选择器和伪类，实现了鼠标悬停时的样式变化和二级菜单的显示。整体而言，一个简洁而有效的导航菜单解决方案，适用于网页设计中的导航菜单组件。

CSS应用实践 | 青训营

CSS实践案例

案例1：视觉差（简单小案例）

总结

案例2：盒子布局（滚动条实现）

总结

案例3：二级菜单（常见应用）

总结和扩展