-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 回答