CSS无法在我的页面上工作

时间:2014-03-12 01:07:00

标签: html css

这是我的新PHP

    <?php

    /**
    * Make sure you started your'e sessions!
    * You need to include su.inc.php to make SimpleUsers Work
    * After that, create an instance of SimpleUsers and your'e all set!
    */

    session_start();
    require_once(dirname(__FILE__)."/simpleusers/su.inc.php");

    $SimpleUsers = new SimpleUsers();

    // Login from post data
    if( isset($_POST["username"]) )
    {

        // Attempt to login the user - if credentials are valid, it returns the users id, otherwise (bool)false.
        $res = $SimpleUsers->loginUser($_POST["username"], $_POST["password"]);
        if(!$res)
            $error = "You supplied the wrong credentials.";
        else
        {
                header("Location: users.php");
                exit;
        }

    } // Validation end

echo '<link href="css/style.css" rel="stylesheet">';


?>
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>CSS3 Button Demo</title>

  <link rel="stylesheet" href="css/style.css">

</head>
<body>

    <?php if( isset($error) ): ?>
        <p>
            <?php echo $error; ?>
        </p>
        <?php endif; ?>

        <form method="post" action="">


                <input type="username" name="username" id="username" placeholder="Username" />

                <input type="password" name="password" id="password" placeholder="Password" />

                <input type="submit" name="submit" value="Login" />

</body>
</html>

        <?php if( isset($error) ): ?>
        <p>
            <?php echo $error; ?>
        </p>
        <?php endif; ?>

        <form method="post" action="">

这是我的新CSS:

    input[type=password] {
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -moz-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -webkit-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -o-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, -ms-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url(../img/keyIcon.png) 12px 11px no-repeat, linear-gradient(to bottom, #f7f7f8 0%, #ffffff 100%);
  border-radius: 3px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: #222222;
  position: relative;
  height: 36px;
  width: 300px;
  padding-left: 30px;
}
input[type=password]::-webkit-input-placeholder {
  color: #999999;
}
input[type=password]:-moz-placeholder {
  color: #999999;
}
input[type=password]:focus {
  box-shadow: 0 1px 0 #2392f3 inset, 0 -1px 0 #2392f3 inset, 1px 0 0 #2392f3 inset, -1px 0 0 #2392f3 inset, 0 0 4px rgba(35, 146, 243, 0.5);
  outline: none;
  background: url(../img/keyIcon.png) 12px 11px no-repeat, #ffffff;
}

input[type=username] {
  background: url() 12px 11px no-repeat, -moz-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, -webkit-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, -o-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, -ms-linear-gradient(top, #f7f7f8 0%, #ffffff 100%);
  background: url() 12px 11px no-repeat, linear-gradient(to bottom, #f7f7f8 0%, #ffffff 100%);
  border-radius: 3px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
  -webkit-transition: all 0.2s linear;
  -moz-transition: all 0.2s linear;
  -ms-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  transition: all 0.2s linear;
  font-family: "Helvetica Neue", sans-serif;
  font-size: 13px;
  color: #222222;
  position: relative;
  height: 36px;
  width: 300px;
  padding-left: 30px;
}
input[type=username]::-webkit-input-placeholder {
  color: #999999;
}
input[type=username]:-moz-placeholder {
  color: #999999;
}
input[type=username]:focus {
  box-shadow: 0 1px 0 #2392f3 inset, 0 -1px 0 #2392f3 inset, 1px 0 0 #2392f3 inset, -1px 0 0 #2392f3 inset, 0 0 4px rgba(35, 146, 243, 0.5);
  outline: none;
  background: url() 12px 11px no-repeat, #ffffff;
}

输入框(密码,用户名)不是CSS的主题,它们只是默认的。相同的代码(减去PHP)在HTML中运行良好,任何关于导致CSS在PHP中无效的想法?我已经检查了一些其他问题并重新格式化了代码2次。一旦我开始工作,我将如何使用CSS中心登录框?

编辑:现在只有用户名框不是主题 - 检查我所做的更改。

谢谢!

4 个答案:

答案 0 :(得分:2)

你的头部元素非常凌乱。将其粘贴到它的位置,让我知道是否可以修复任何内容。

<head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <style type="text/css">

    h1
    {
        color: #000000;
        border-bottom: 2px solid #000000;
        margin-bottom: 15px;
    }

    p { margin: 10px 0px; }
    p.faded { color: #A0A0A0; }
  </style>
</head>

你的标签内部正在调用你的style.css。

答案 1 :(得分:0)

<link rel="stylesheet" type="text/css" href="css/style.css />您忘记了",并且您在css的第一个input中输了一个拼写错误。

答案 2 :(得分:0)

你有点混淆了。 link 标记用于外部css文件。 样式适用于直接css代码。 将链接标记放在样式中甚至不是有效的HTML。简单地忽略链接。 只是把链接放在风格之外。鉴于css的路径是正确的,一切都应该起作用。 此外,内部样式无效。

答案 3 :(得分:0)

<link rel="stylesheet" type="text/css" href="css/style.css" /> 

<style type="text/css">

        h1
        {
            color: #000000;
            border-bottom: 2px solid #000000;
            margin-bottom: 15px;
        }

        p { margin: 10px 0px; }
        p.faded { color: #A0A0A0; }

</style>

我认为这样会更好