代码块的隐藏

方法一·<input type="hidden" name="doing" value="work">

Cat.php

<form action="CatWork.php" method="post">
        <h1>四则运算</h1>
        第一个数:<input type="text" name="num1"><br>
        第二个数:<input type="text" name="num2"><br>
        运算符号:
        <select name="oper">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select><br>
        //隐藏域的使用
        <input type="hidden" name="doing" value="work">
        <input type="submit" value="开始计算">
    </form>
    <br>
    <form action="CatWork.php" method="post">
        <h1>计算圆形面积</h1>
        请输入半径:<input type="text" name="radius"><br>
        <input type="submit" value="开始计算面积">
        //隐藏域的使用
        <input type="hidden" name="doing" value="area">
    </form>
    <form action="CatWork.php" method="post">
    <h1>长方形的面积</h1>
    长:<input type="text" name="length"><br>
    宽:<input type="text" name="width"><br>
    隐藏域的使用
    <input type="hidden" name="doing" value="rectangle"><br>
    <input type="submit" value="开始计算">
    </form>

CatWork.php

<?php

require_once 'CatClass.php';

$doing=$_REQUEST['doing'];

$cat=new Cat();

if($doing=="work"){

    $num1=$_REQUEST['num1'];

    $num2=$_REQUEST['num2'];

    $oper=$_REQUEST['oper'];

    echo '计算结果:'.$cat->work($num1,$num2,$oper)."<br>";    

}elseif($doing=="area"){

    $radius=$_REQUEST['radius'];

    echo '计算面积是'.$cat->circleArea($radius);

}elseif($doing=="rectangle"){

    $length=$_REQUEST['length'];

    $width=$_REQUEST['width'];

    //var_dump($length,$width);

    echo '长方形的面积是:'.$cat->rectangleArea($length,$width);

}

echo "<br>";

echo "<a href='Cat.php'>返回主页</a>";

?>

CatWork.php

<?php
header("content-type:text/html;charset=utf8");
class Cat{

    $res=0;
    function work($num1,$num2,$oper){
        if($oper=="+"){
            $res=$num1+$num2;
        }elseif($oper=="-"){
            $res=$num1+$num2;
        }elseif($oper=="*"){
            $res=$num1*$num2;
        }elseif($oper=="/"){
            $res=$num1/$num2;
        }
        return $res;
    }
    function circleArea($radius){
        return 3.14*$radius*$radius;
    }
    function rectangleArea($l,$w){
        return $l*$w;
    }
}
?>

方法二·

<html>
    <head>
    <meta http-equiv="content-type" content="text/html charset=utf-8">
    <script language="javascript">
        function selType(val){
            //window.alert("你选中"+val);
            if(val=="jisuan"){
                table1.style.display="block";
                table2.style.display="none";

            }else if(val=="area"){
                table1.style.display="none";
                table2.style.display="block";

            }
        }
    </script>

    </head>
    <h1>聪明的猫</h1>
    <form action="CatWork.php" method="post">
        <input type="radio" name="sel" onclick="selType('jisuan')">四则运算
        <input type="radio" name="sel" onclick="selType('area')">计算矩形
        <table id="table1" style="display:black">
            <tr><td>第一个数</td><td><input type="text" name="num1"></td></tr>
            <tr><td>第二个数</td><td><input type="text" name="num2"></td></tr>
            <tr><td>运算符号</td>
                <td>
                    <select name="oper">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                    </select>
                </td>
            </tr>
            <tr><td colspan="2"><input type="submit" value="四则运算"></td></tr>
        </table>

        <table id="table2" style="display:none">
            <tr><td>长</td><td><input type="text" name="length"></td></tr>
            <tr><td>宽</td><td><input type="text" name="width"></td></tr>
            <tr><td colspan="2"><input type="submit" value="矩形运算"></td></tr>
        </table>
    </form>
</html>


<think>好的,我现在需要帮助用户解决如何使用CSS隐藏代码块的问题。用户之前的问题是关于Hutool获取前天日期,但现在转向了CSS隐藏代码块的方法。我需要结合用户提供的站内引用,找到合适的解决方案。首先,用户给出的四个引用中,引用1提到了基本的CSS代码块样式,引用2讨论了如何用CSS实现类似GitHub的代码样式,引用3提到使用自定义CSS或插件来实现代码块的高亮,引用4列出了有用的CSS代码块,包括隐藏文本和溢出处理。这些引用中的某些部分可能对隐藏代码块有帮助。 用户的需求是隐藏代码块或使其不可见。我需要考虑不同的方法,比如设置display为none、visibility为hidden,或者使用opacity为0。此外,引用4中的文本溢出隐藏也可能相关,但可能不完全符合用户需求。接下来,我需要验证这些方法的正确性。display:none会完全移除元素不占空间,visibility:hidden隐藏元素但保留空间,opacity:0让元素透明但可交互。同时,用户可能需要隐藏代码块但保留布局,所以visibility可能更合适。此外,引用4中的“溢出隐藏”可能使用overflow:hidden或text-overflow,但这是处理内容溢出而非完全隐藏元素。 另外,用户可能希望代码块在特定条件下隐藏,比如响应式设计中使用媒体查询,或者通过JavaScript动态切换类。但用户明确要求CSS解决方案,所以应集中在纯CSS方法上。需要确保回答结构清晰,分点说明不同的方法,并给出示例代码。同时,按照用户要求,添加相关引用,比如引用4中的溢出隐藏方法可能相关,但需要确认是否适用。最后,生成相关问题,如如何隐藏其他元素、切换显示隐藏元素的方法、隐藏但保留空间等。确保问题与主题相关,帮助用户进一步探索。</think>### 解决方案 通过CSS隐藏代码块可通过以下5种方法实现,每种方案适用于不同场景: --- #### 一、完全隐藏(不占布局空间) ```css .code-block { display: none; /* 元素彻底消失且不保留空间[^4] */ } ``` - **适用场景**:需要彻底移除代码块时 - **示例效果**: ```html <div class="code-block">print("隐藏内容")</div> <!-- 完全不可见 --> ``` --- #### 二、视觉隐藏(保留布局空间) ```css .code-block { visibility: hidden; /* 隐藏内容但保留元素占位[^4] */ } ``` - **应用场景**:需要保持页面布局结构时 - **数学公式示例**: 若隐藏代码块宽高为$w \times h$,则保留空间为$w \times h$的空白区域 --- #### 三、透明化处理 ```css .code-block { opacity: 0; /* 元素透明但可交互 */ position: absolute; /* 避免透明元素遮挡点击 */ } ``` - **特点**: - 元素透明度$\alpha = 0$时完全透明 - 仍可响应鼠标事件[^4] --- #### 四、尺寸归零法 ```css .code-block { width: 0; height: 0; overflow: hidden; /* 防止内容溢出 */ } ``` - **计算原理**: 通过设置元素尺寸$w=0$, $h=0$,使内容被裁剪: $$ \text{可视区域} = w \times h = 0 $$ --- #### 五、文本偏移隐藏 ```css .code-block { text-indent: -9999px; /* 文本偏移到可视区域外 */ white-space: nowrap; } ``` - **适用对象**:仅隐藏文本内容 - **示例**: ```html <div class="code-block">重要隐藏代码</div> <!-- 显示为空白元素 --> ``` --- ### 实现对比表 | 方法 | 保留空间 | 可交互性 | 隐藏效果 | |-------------------|----------|----------|--------------------| | `display: none` | × | × | 完全移除 | | `visibility` | √ | × | 视觉隐藏 | | `opacity` | √ | √ | 透明化 | | 尺寸归零 | × | × | 物理空间消除 | | 文本偏移 | √ | √ | 仅内容不可见 | --- ### 相关问题 1. 如何用CSS隐藏页面中的其他类型元素? 2. 如何实现点击按钮切换代码块的显示/隐藏状态? 3. 怎样隐藏元素但保留其占位空间? 4. 如何实现代码块的渐进式隐藏动画? 5. 屏幕阅读器如何访问被隐藏代码块? --- ### 引用说明 - 通过`display: none`实现元素隐藏[^4] - 使用`visibility`控制视觉呈现[^4] - 尺寸控制与溢出处理方案[^4]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值