CSS文件，无法删除边框和修复样式

我从我的队友那里收到了这个文件，但我们不知道要改变一些东西，这个网页看起来分裂给我，我想让它看起来更像是一个只有两个边框的页面，其中一个在标题中（标题将在中间），第二个将是URL输入和输出的地方。这是我们的外观：enter image description here enter image description here
这是一个我想要的引用：enter image description here
我有这两页的代码，这是主要的：

<?php
echo"
    <!DOCTYPE html>
    <html>
    <head>
    <title> Fake URL Detection </title>
    <style>

        Body {
            font-family: Calibri, Helvetica, sans-serif;
            background-color: #D6E0E2;
            align-content: center;
        }
        button {
              background-color: #4CAF50;
              width: 100%;
              width: 512px;
              padding: 15px;
              margin: 10px 0px;
              border: 10px;
              border-color: darkblue;
              cursor: pointer;
              align: center;
              font-size: 30px;
              font-weight: 900;
              color: black;
              border: 4px solid black;
              background-color: #F4EFE6;
              color: black;
              padding: 14px 28px;
              cursor: pointer;
              border-radius: 10px;
              margin:0 auto;
              display:block;
              margin-top: 32px;
       }
        form {
            border: 3px solid #f1f1f1;
        }
        input[type=text] {
            width: 100%;
            margin: 8px 0;
            padding: 12px 20px;
            display: inline-block;
            border: 2px solid green;
            box-sizing: border-box;
            font-weight: bolder;
        }
        button:hover {
            opacity: 0.7;
        }
        .txt {
            padding-right: 32px;
            padding-left: 10px;
       }
        .container {
            padding: 5px 128px;
            background-color: #5E6C5B;
        }
        p.solid {
            border-style: solid;
            border-color: green;
            padding: 16px;
            font-weight: bold;
            border-radius: 10px;
            background-color: white;
        }

    </style>
    </head>
    <body> ";

    $input_url = '';
    $pre_result = '';
    $rf_c = 0;

    if(isset($_POST['rf_c'])){
        $rf_c = $_POST['rf_c'];
        $urlLine = $_POST['urlLine'] ;
        $input_url = $urlLine;
    }

    if(isset($_POST['btn_submit'])){

        $input_url =  $_POST['input_url'] ;

        if($input_url!=''){
            $predic = '';

            $url = $input_url;
            $clas = '';

            if($rf_c==0){
                $predic = shell_exec('python RandomForestClassifier.py ' . $url);
                $clas = ' Using RandomForest Classifier';
            } elseif ($rf_c==1) {
                $predic = shell_exec('python ExtraTreesClassifier.py ' . $url);
                $clas = ' Using ExtraTrees Classifier';
            }

            if (substr($predic,1,1) == 0) {
                $pre_result = '0 = Benign' . $clas;
            }elseif (substr($predic,1,1) == 1) {
                $pre_result = '1 = Defacement' . $clas;
            }elseif (substr($predic,1,1) == 2) {
                $pre_result = '2 = Malware' . $clas;
            }elseif (substr($predic,1,1) == 3) {
                $pre_result = '3 = Phishing' . $clas;
            }
        }
    }

echo"
        <form method='post'>
        <center> <h1> Fake URL Detection </h1> </center>

            <div class='container'>
                <label><b>URL : </b></label>
                <input type='text' placeholder='Enter URL' name='input_url' value='$input_url' required>
                <input type='hidden' name='urlLine' value='" . $input_url . "'>
                <br>
                <label><b>Result : </b></label>
                <p class='solid'  name='pre_result'>$pre_result</p>

            </div>
            <div class='container'>
                <div style='height:100%; width:100%;'>
                    <button type='submit'  name='btn_submit'>Check URL</button>
                    <div class='container'>
                        <p><b>PLease Select Classification Pickle:</b></p>

                        <form>

                            <input type='radio' name='rf_c' value='0'" ; if($rf_c == 0) echo " checked" ; echo "  onClick='javascript:this.form.submit();'>

                            <b><label for='rf_c'>RandomForest-Pickle</label><br></b>

                            <input type='radio' name='rf_c' value='1'" ; if($rf_c == 1) echo " checked" ; echo "  onClick='javascript:this.form.submit();'>

                            <b><label for='et_c'>ExtraTrees-Pickle</label><br></b>
                        </form>
                    </div>
                </div>
            </div>
       </form>

<div class='container' id='the whole thing' style='height:100%; width:80%; overflow: hidden;'>

    <div id='leftThing' style='float: left; width:25%; background-color:oceanblue;'>
        <a class='txt' style='color:#FFFFFF;'><b>0: Classified as Benign</a>
    </div>
    <div id='content' style='float: left; width:25%; background-color:darkgreen;'>
        <a class='txt' style='color:#FFFFFF;'><b>1: Classified as Defacement</a>
    </div>
    <div id='rightThing' style='float: left; width:25%; background-color:pink;'>
        <a class='txt' style='color:#FFFFFF;'><b>2: Classified as Malware</a>
    </div>
    <div id='rightThing' style='float: left; width:25%; background-color:#555555;'>
        <a class='txt' style='color:#FFFFFF;'><b>3: Classified as Phishing</a>
    </div>
</div>

    </body>
    </html>  ";

?>

字符串
帮助.

您似乎想删除每个部分周围的边框，使页面更有凝聚力。您可以通过修改CSS样式来实现这一点。以下是如何做到这一点：
1.移除边框：边框似乎来自CSS样式的border属性。如果您想删除边框，可以为相关元素设置border: none;。
1.使页面看起来更有凝聚力：为了使页面看起来更紧密，您可以使用CSS来设计元素的样式，使其更好地结合在一起。这可能涉及调整边距和填充，更改颜色以相互匹配，以及使用一致的字体和字体大小。

body {
    font-family: Calibri, Helvetica, sans-serif;
    background-color: #D6E0E2;
    align-content: center;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    padding: 20px;
    background-color: #5E6C5B;
    box-sizing: border-box;
}

#theWholeThing {
    display: flex;
    justify-content: space-between;
}

#theWholeThing div {
    width: 25%;
    padding: 20px;
    box-sizing: border-box;
    color: #FFFFFF;
    text-align: center;
}

#leftThing {
    background-color: oceanblue;
}

#content {
    background-color: darkgreen;
}

#rightThing {
    background-color: pink;
}

#rightThing:last-child {
    background-color: #555555;
}

字符串
在这段代码中，我删除了border属性，并添加了其他样式来使页面更有凝聚力。我还在#theWholeThing div中使用了flexbox来均匀分布子div。
如果添加CSS后页面的第二部分向左移动，则可能是由于#leftThing、#content和#rightThing的CSS规则中的float: left;属性。float属性指定元素应沿其容器的左侧或右侧沿着，允许文本和行内元素环绕它。
如果你想让元素居中，你可以在CSS规则中将float: left;替换为margin: auto;。这将使div在其父容器中居中。
以下是如何修改CSS：

#theWholeThing div {
    width: 25%;
    padding: 20px;
    box-sizing: border-box;
    color: #FFFFFF;
    text-align: center;
    margin: auto;
}

型
这将使div在#theWholeThing div中居中。根据需要调整CSS以实现所需的布局。

CSS文件，无法删除边框和修复样式

1条答案

相关问题

热门标签

最新问答