-1

ホバーとアクティブ効果のあるボタンを作成しましたが、作成後に余分な「??」が出てきました。私のデザインに。

<form id="form-login">      
   <a href="#" class="login"> Login </a>       
</form>​​

これは私の CSS です。「#form-login」も「.form-login」に変更しましたが、機能しませんでした。どこが間違っているかを確認するのを手伝ってください。それは私に「??」を見せ続けます 私のデザインに。

/* Login button */
#form-login {
/* Size and position */
    width: 340px;
    margin: 60px auto 30px;
    padding: 15px;
    position: relative;
}

#form-login .login {
/* Size and position */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;

/* Styles */    
    border-radius: 3px;
    cursor: pointer;

/* Font styles */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;

/* Background color */
    margin-right: 1%;
    background: #34a5cf; /* Fallback */
    background: -moz-linear-gradient(#34a5cf, #2a8ac4);
    background: -ms-linear-gradient(#34a5cf, #2a8ac4);
    background: -o-linear-gradient(#34a5cf, #2a8ac4);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
    background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
    background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}

#form-login .login:hover {
    box-shadow: 
        inset 0 1px rgba(255,255,255,0.3), 
        inset 0 20px 40px rgba(255,255,255,0.15);
}

#form-login .login:active{
    top: 1px;
}
4

1 に答える 1

0

あなたのCSSではないと思います。

疑問符は?常に Unicode 文字表示の問題のような匂いがします。

したがって、最初にすべきことは、HTML ドキュメント出力で正しいエンコーディングを使用しているかどうかを確認することです。UTF-8 でない場合は、UTF-8 に変更すると、疑問符が「魔法のように」疑問符ではなく Unicode 文字に変わる可能性が高くなります。html を UTF-8 として保存して提供するようにしてください。

始めるためのヒント:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo</title>
<style type='text/css'>
/* Login button */
#form-login
{
    /* Size and position */
    width: 340px;
    margin: 60px auto 30px;
    padding: 15px;
    position: relative;
}
#form-login .login
{
    /* Size and position */
    width: 49%;
    height: 38px;
    float: left;
    position: relative;
    /* Styles */
    border-radius: 3px;
    cursor: pointer;
    /* Font styles */
    font-family: 'Lato', Calibri, Arial, sans-serif;
    font-size: 14px;
    line-height: 38px; /* Same as height */
    text-align: center;
    font-weight: bold;
    /* Background color */
    margin-right: 1%;
    background: #34a5cf; /* Fallback */
    background: -moz-linear-gradient(#34a5cf, #2a8ac4);
    background: -ms-linear-gradient(#34a5cf, #2a8ac4);
    background: -o-linear-gradient(#34a5cf, #2a8ac4);
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#34a5cf), to(#2a8ac4));
    background: -webkit-linear-gradient(#34a5cf, #2a8ac4);
    background: linear-gradient(#34a5cf, #2a8ac4);
    border: 1px solid #2b8bc7;
    color: #ffffff;
    text-shadow: 0 -1px rgba(0,0,0,0.3);
    text-decoration: none;
}
#form-login .login:hover {
    box-shadow:
    inset 0 1px rgba(255,255,255,0.3),
    inset 0 20px 40px rgba(255,255,255,0.15);
}
#form-login .login:active{
        top: 1px;
}
</style>
</script>
</head>
<body>
<form id="form-login">
<a href="#" class="login">Login</a>
</form>
</body>
</html>

それをコピーして新しいドキュメントに貼り付け、"UTF-8"として保存してから、ブラウザーで開きます。疑問符が?(もう) ないことがわかります。

注意: ログイン テキストと周囲のタグの間の無駄なスペースを削除し、 に変更> Login <しました>Login<。

于 2013-07-26T08:04:35.083 に答える