如何让CSS文件正确应用于我的PHP / HTML代码？

Question

It looks like this:

But it's supposed to look like in the video at 26:05.

There are a few things I want to ask:

• Does the code still work if I want to link it to a database?
• Would it work if I were to alter some of the CSS?
• Is the error in the CSS or in the HTML file?

It's supposed to be on the right side of the page.

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*classes*/

.main-wrapper {
    margin: 0 auto;
    width: 1000px;
}

a {
    text-decoration: none;
}

body {
    background-color: #ccc;
}

header nav {
    width: 100%;
    height: 60px;
    background-color: #fff;
}

header nav ul {
    float: left;
}

header nav ul li {
    float: left;
    list-style: none;
}

header nav ul li a {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
}

header .nav-login {
    float: right;
}

header .nav-login form {
    float: left;
    padding-top: 15px;
}

header .nav-login form input {
    float: left;
    width: 140px;
    height: 30px;
    padding: 0px 10px;
    margin-right: 10px;
    border: none;
    background-color: #ccc;
    font-family: arial;
    font-size: 14px;
    color: #111;
    line-height: 30px;
}

header .nav-login form input button {
    float: left;
    width: 60px;
    height: 30px;
    margin-right: 10px;
    border: none;
    background-color: #f3f3f3;
    font-family: arial;
    font-size: 14px;
    color: #111;
    cursor: pointer;
}

header .nav-login form input button {
    background-color: #ccc; 
}

header .nav-login a {
    display: block;
    width: 60px;
    height: 60px;
    border: none;
    float: left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor: pointer;
}

.main-container {
    padding-top: 40px;  
}

.main-container h2 {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 50px;
    text-align: center;
}

/*signup.php*/

.signup-form {
    width: 400px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input {
    width: 90%;
    height: 40px;
    padding: 0px 5%;
    margin-bottom:4px;
    border: none;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 40px;
}

.signup-form button {
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 40px;
    border: none;
    background-color: #222;
    font-family: arial;
    font-size: 16px;
    color: #111;
    cursor: pointer;
}

.signup-form button:hover {
    background-color: #111;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css"></link>
        <link rel="stylesheet" type="text/css" href="style.css"></link>
    </head>
    <body>
        <header>
            <nav>
                <div class="main-wrapper">
                    <ul>
                        <li><a href="index.php">Home</a></li>
                    </ul>
                    <div clalss="nav-login">
                        <form>
                            <input type="text" name="uid" placeholder="Username/e-mail">
                            <input type="password" name="pwd" placeholder="password">
                            <button type="submit" name="submit">Login</button>
                        </form>
                        <a href="singup.php">Sign up</a>
                    </div>
                </div>
            </nav>
        </header>
</body>
</html>

</div>

Answer 1

Ok, here are some fixes:

• You misspelled "class" in your html (and you don't need a </link> cllosing);
• Some classes are declared on the css, but not used in the html (html:<form class="signup-form"> / css:.signup-form);
• You forgot to add some css properties the video tell you to (float: left);

I've made some adjusts, but you should try to fix the rest:

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

body {
    line-height:1;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
    display:block;
}

nav ul {
    list-style:none;
}

blockquote, q {
    quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
    content:'';
    content:none;
}

a {
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
}

/* change colours to suit your needs */
ins {
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

/* change colours to suit your needs */
mark {
    background-color:#ff9;
    color:#000; 
    font-style:italic;
    font-weight:bold;
}

del {
    text-decoration: line-through;
}

abbr[title], dfn[title] {
    border-bottom:1px dotted;
    cursor:help;
}

table {
    border-collapse:collapse;
    border-spacing:0;
}

/* change border colour to suit your needs */
hr {
    display:block;
    height:1px;
    border:0;   
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
    vertical-align:middle;
}

/*classes*/

.main-wrapper {
    margin: 0 auto;
    width: 1000px;
}

a {
    text-decoration: none;
}

body {
    background-color: #ccc;
}

header nav {
    width: 100%;
    height: 60px;
    background-color: #fff;
}

header nav ul {
    float: left;
}

header nav ul li {
    float: left;
    list-style: none;
}

header nav ul li a {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
}

header .nav-login {
    float: right;
}

header .nav-login form {
    float: left;
    padding-top: 15px;
}

header .nav-login form input {
    float: left;
    width: 140px;
    height: 30px;
    padding: 0px 10px;
    margin-right: 10px;
    border: none;
    background-color: #ccc;
    font-family: arial;
    font-size: 14px;
    color: #111;
    line-height: 30px;
}

header .nav-login form input button {
    float: left;
    width: 60px;
    height: 30px;
    margin-right: 10px;
    border: none;
    background-color: #f3f3f3;
    font-family: arial;
    font-size: 14px;
    color: #111;
    cursor: pointer;
}

header .nav-login form input button {
    background-color: #ccc; 
}

header .nav-login a {
    display: block;
    width: 60px;
    height: 60px;
    border: none;
    float: left;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 63px;
    cursor: pointer;
}

.main-container {
    padding-top: 40px;  
}

.main-container h2 {
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 50px;
    text-align: center;
}

/*signup.php*/

.signup-form {
    width: 600px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input {
    float: left;
    width: 90%;
    height: 40px;
    padding: 0px 5%;
    margin-bottom:4px;
    border: none;
    background-color: #fff;
    font-family: arial;
    font-size: 16px;
    color: #111;
    line-height: 40px;
}

.signup-form button {
    float:left;
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 40px;
    border: none;
    background-color: #eee;
    font-family: arial;
    font-size: 16px;
    color: #111;
    cursor: pointer;
}

.signup-form button:hover {
    background-color: #111;
}

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="reset.css">
        <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
        <header>
            <nav>
                <div class="main-wrapper">
                    <ul>
                        <li><a href="index.php">Home</a></li>
                    </ul>
                    <div class="nav-login">
                        <form class="signup-form">
                            <input type="text" name="uid" placeholder="Username/e-mail">
                            <input type="password" name="pwd" placeholder="password">
                            <button type="submit" name="submit">Login</button>
                        </form>
                        <a href="singup.php">Sign up</a>
                    </div>
                </div>
            </nav>
        </header>
</body>
</html>

To be honest, I didn't fully understand your questions, but I'll try to answer anyway:

1. I don't see a problem linking with a database, since there is nothing related to a DB on your code...
2. CSS is just mostly visuals, so it won't alter the functionality of your code if you change it.
3. In this case, the error is in both CSS and HTML.

Anyway, hope this can help you.

</div>