【页面打不开，在浏览器中打开页面出现找不到文件提示。 _路径】

页面打不开，在浏览器中打开页面出现找不到文件提示。

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

路径

详细描述

截图

代码

<!DOCTYPE html>
<html>
<head>
    <title>setup</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" rel="stylesheet"  href="setup.css">
    <script src="setup.js"></script>
</head>
<body>
<header><img src="./img/9.png"><span>参考设置</span><img class="iconright" src="./img/10.png"></header>
<div class="main">
    <div class="match">
        <div class="match_left">玩家配比</div>
        <div class="match_right">
            <div></div>
            <button>点击设置</button>
        </div>
    </div>
    <div class="keyword">
        <input type="text" maxlength="8" placeholder="水民词组">
        <input type="text" maxlength="8" placeholder="卧底词组">
    </div>
    <div class="playernum">
        <div class="number">玩家人数<input id="shownum" type="number" min="4" max="18" maxlength="2">人</div>
        <div class="slide">
            <input id="subbtn" onclick="subnum()" type="button" value="—">
            <input id="range" oninput="change()" type="range" min="4" max="18" step:"1" value="4">
            <input id="addbtn" onclick="addnum()" type="button" value="+" style="font-size:1.2rem">
        </div>
        
    </div>
    <button class="deal">去发牌</button>
</div>
</body>  
</html>

$grey:#f0f0f0;
$lightgrey:#fbfbfb;
$deepgrey:#d9d9d9;
$white:#fff;
$blue:#29bde0;
$orange:#fab344;
$lightorange:#ffe6be;
@mixin mmwidth(){
    min-width: 320px;
    max-width: 768px;
}
@mixin mtb($mtop,$mbtm){
    margin-top:$mtop;
    margin-bottom:$mbtm;
}
@mixin ptb($ptop,$pbtm){
    padding-top: $ptop;
    padding-bottom:$pbtm;
}
@mixin fixedmg(){
    margin-left:.5rem;
    margin-right:.5rem;
}
@mixin fixedpd(){
    padding-left:.5rem;
    padding-right:.5rem;
}
@mixin size($width,$height){
    width:$width;
    height:$height;
}
body{
    @include mmwidth;
    margin:0 auto;   
}
header{
    @include mmwidth;
    @include ptb(.5rem,.5rem);
    @include fixedpd;
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color:$white;
    background-color: $blue;
    img{
        height:1.2rem;
    }
    .iconright{
        width:1.2rem;
    }
}
.main{
    @include mmwidth;
    padding:.5rem;
    background-color: $grey;
    .match{
        display:flex;
        .match_left{
            width:1.2rem;
            padding:0 1rem;
            border-right:1px solid $deepgrey;
            font-size: 1.2rem;
            background-color: $white;
        }
        .match_right{
            background-color: $lightgrey;
        }
    }
    .keyword{
        @include mtb(.5rem,.5rem);
        padding:0.5rem 2rem 1.2rem;
        background-color: $white;
        input{
            @include ptb(.6rem,.6rem);
            display: block;
            width:100%;
            border:none;
            border-bottom:1px solid $deepgrey;
            font-size: .8rem;
            color:$lightgrey;

        }
    }
    .playernum{
        margin-bottom: .5rem;
        padding:1rem 1rem;
        background-color: $white;
        .number{
            margin-bottom: 1rem;
            input{
                @include size(1.6rem,1.3rem);
                margin:0 1rem;
                border:none;
                font-size: 1rem;
                text-align:center;
                background-color: $grey;
                outline: none;      
                &:focus{
                    outline:none;
                }
            }
        }
        .slide{
            display: flex;
            justify-content: space-between;

            input[type=button]{
                margin: 0 2rem;
                border:1px solid $deepgrey;
                font-size: 0.7rem;
                font-weight: bold;
                color:$orange;
                background-color: $white;
                outline: none;
            }
            input[type=range] {
                -webkit-appearance: none;
                width: 100%;
                background: -webkit-linear-gradient(left,$orange,$lightorange) no-repeat;
            }
            input[type=range]::-webkit-slider-thumb {
                -webkit-appearance: none;
            }    
            input[type=range]{
                flex:1;
                outline: none;
            }
            input[type=range]::-webkit-slider-runnable-track{
                -webkit-appearance:none;
                height:0.3rem;
                background-color: $lightorange;
            }
            //input[type=range]::-webkit-slider-thumb {
            //    -webkit-appearance: none;
            //    height: 25px;
            //    width: 25px;
            //    margin-top: -5px; /*使滑块超出轨道部分的偏移量相等*/
            //    background: red; 
            //    border-radius: 50%; /*外观设置为圆形*/
            //    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
            //    box-shadow: 0 .125em .125em #3b4547; /*添加底部阴影*/
            //}
            input[type=range]::-webkit-slider-thumb{
                -webkit-appearance:none;
                width:2rem;
                height:1.5rem;
               background:url("./img/11.png") no-repeat;
               background-size: 2rem 1.5rem;
               margin-top: -0.6rem;
            }
        }

    }

    input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
        -webkit-appearance: none;
    }
    input[type=number]{
        -moz-appearance: textfield;       
    } 
    .deal{
        @include size(100%,3rem);
        font-size: 1.2rem;
        border: none;
        outline: none;
        color:$white;
        background-color: $orange;
    }
}

var num=document.getElementById("range");
 var location=document.getElementById("shownum");
function addnum(){
num.value=++num.value;
    change();
}
function subnum(){
num.value=num.value-1;
    change();
}
function change(){
 location.value=num.value;
}

编辑于2024-11-15