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>

<?php
    //首先你要有读写文件的权限，首次访问肯不显示，正常情况刷新即可
    $online_log = "slzxrs.dat"; //保存人数的文件到根目录,
    $timeout = 60;//60秒内没动作者,认为掉线
    $entries = file($online_log);
    $temp = array();
    for ($i=0;$i<count($entries);$i++){
        $entry = explode(",",trim($entries[$i]));
        if(($entry[0] != getenv('REMOTE_ADDR')) && ($entry[1] > time())) {
            array_push($temp,$entry[0].",".$entry[1]."\n"); //取出其他浏览者的信息,并去掉超时者,保存进$temp
        }
    }
    array_push($temp,getenv('REMOTE_ADDR').",".(time() + ($timeout))."\n"); //更新浏览者的时间
    $slzxrs = count($temp); //计算在线人数
    $entries = implode("",$temp);
    //写入文件
    $fp = fopen($online_log,"w");
    flock($fp,LOCK_EX); //flock() 不能在NFS以及其他的一些网络文件系统中正常工作
    fputs($fp,$entries);
    flock($fp,LOCK_UN);
    fclose($fp);
    echo "在线人数:".$slzxrs."人";
?>