使用无序列表做菜单的时候，把li转成行内块，发现li之间有空格间隙，解决办是给ui字体大小设置为0，给li重新定义字体大小。

代码如下：

CSS

            ul {
                background-color: black;
                width: 100%;
                background-color: saddlebrown;
                text-align: center;
                font-size: 0;
            }

            li {
                background-color: white;
                display: inline-block;
                font-size: 16px;
            }

HTML

<ul>
    <li>菜单1</li>
    <li>主页</li>
    <li>日记</li>
    <li>照片</li>
</ul>

1. 表单标签
2. 表单域
3. 表单按钮

input type="button" 普通按钮

input type="checkbox" 复选框

input type="color" 颜色选择器

input type="date" 日期，包括年，月和日

input type="datetime-local" 日期时间，包括年，月，日，小时和分钟

input type="email" 邮箱

input type="file" 上传文件

input type="hidden" 不显示，隐藏元素

input type="image" 图片按钮

input type="month" 年月

input type="number" 数值

input type="password" 密码

input type="radio" 单选框

input type="range" 滑块

input type="reset" 重置

input type="search" 搜索

input type="submit" 提交

input type="tel" 电话

input type="text" 文本

input type="time" 时间

input type="url" 网址

input type="week" 周

CSS超出隐藏

overflow: hidden;

解决底部三像素

vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom |inherit

清除浮动

类名::after{
            content: "";
            display: block;
            clear: both;
            }

效果图

给li hover效果，让蒙层初始值宽度为0，当鼠标移入到li时，蒙层宽度增加，在添加一个动画效果即可实现。

代码如下

CSS

    li {
                width: 200px;
                height: 300px;
                position: relative;
                background-color: saddlebrown;
            }

            img {
                width: 200px;
                height: 100%;
            }

            .Mask {
                width: 0;
                /* 初始值 */
                height: 300px;
                background-color: rgb(0 0 0 / 65%);
                position: absolute;
                top: 0;
                left: 0;
            }

            li:hover .Mask {
                transition: all 1s;
                /* 动画 */
                width: 200px;
                /* 目标值 */
            }

HTML

<ul>
            <li>
                <img src="images/31.jpg" alt="">
                <div class="Mask">

                </div>
            </li>
        </ul>

给元素添加蒙层效果

原图

效果图

思路：

蒙层盒子在父元素下，给父元素设置相对定位，给蒙层（子元素）设置绝对定位，让蒙层和父元素重合，给蒙层设置透明度即可。

代码如下：

css

img {
                width: 200px;
                height: 300px;
            }

            li {
                position: relative;

            }

            .Mask {
                width: 200px;
                height: 300px;
                background-color: rgb(0 0 0 / 65%);
                position: absolute;
                top: 0;
                left: 0;
            }

HTML

<ul>
            <li>
                <img src="images/31.jpg" alt="">
                <div class="Mask">

                </div>
            </li>
       </ul>

使用方法

1. 新建一个文本文件（如不显示.txt后缀电脑要在文件夹里设置“显示已知文件扩展名”）
2. 复制下面代码粘贴后保存
3. 修改扩展名为.bat文件
4. 右键以管理员身份打开

win11

reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /f
taskkill /f /im explorer.exe
attrib -s -r -h "%userprofile%\AppData\Local\iconcache.db"
del "%userprofile%\AppData\Local\iconcache.db" /f /q
start explorer
pause

win10

reg add "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /d "%systemroot%\system32\imageres.dll,197" /t reg_sz /f
taskkill /f /im explorer.exe
start explorer
pause

恢复

reg delete "HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Explorer\Shell Icons" /v 29 /f
taskkill /f /im explorer.exe
start explorer
pause

效果图：

思路
使用无序列表，当鼠标移到li身上，使用hover改变背景图的位置。
为了不一下子显示到设定目标值可以添加一个transition过度效果

第一步：

    先给li设定背景图，在给每个li单独取一个class类名以此来调整背景图的位置

第二步：

   对每个li设置单独的hover效果，通过background-position来调整目标值

第三步：

    给li加上一个transition动画效果，这样就不会一瞬间出现，看着有一个过度效果。

css

ul {

                text-align: center;
            }

            li {
                vertical-align: middle;
                display: inline-block;
                width: 49px;
                height: 49px;
                background: url(图片地址) no-repeat;
                margin: 0 10px;
                transition: all 0.5s;
                background-color: saddlebrown;
            }

            .f-1 {
                background-position: 0px 0px;
                }

            .f-2 {
                background-position: -43px 0px;
            }

            .f-3 {
                background-position: -86px 0px;
            }

            .f-4 {
                background-position: -130px 0px;
            }

            .f-1:hover {
                background-position: 0px -42px;

            }

            .f-2:hover {
                background-position: -43px -42px;
            }

            .f-3:hover {
                background-position: -86px -42px;
            }

            .f-4:hover {
                background-position: -130px -42px;

            }

HTML

      <ul>
            <li class="f-1"></li>
            <li class="f-2"></li>
            <li class="f-3"></li>
            <li class="f-4"></li>
        </ul>