如何获得CSS文件以正确地应用于我的PHP / HTML代码？

Question

It looks like this: 看起来像这样：

But it's supposed to look like in the video at 26:05 . 但是应该看起来像在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? 如果我要更改某些CSS，是否可行？
Is the error in the CSS or in the HTML file? CSS或HTML文件中的错误？

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>

Answer 1

Ok, here are some fixes: 好的，这里有一些修复：

You misspelled "class" in your html (and you don't need a </link> cllosing); 您在html中拼写了“类”（并且不需要</link>闭合）；
Some classes are declared on the css, but not used in the html (html: <form class="signup-form"> / css: .signup-form ); 有些类在css上声明，但不在html中使用（html： <form class="signup-form"> / css： .signup-form ）；
You forgot to add some css properties the video tell you to (float: left); 您忘了添加视频告诉您的某些CSS属性（浮动：左）；

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: 老实说，我还不太了解您的问题，但是无论如何我都会尝试回答：

I don't see a problem linking with a database, since there is nothing related to a DB on your code... 我看不到与数据库链接的问题，因为您的代码中没有与数据库相关的信息...
CSS is just mostly visuals, so it won't alter the functionality of your code if you change it. CSS大部分只是视觉效果，因此如果您更改它，它不会更改代码的功能。
In this case, the error is in both CSS and HTML. 在这种情况下，CSS和HTML均出现错误。

Anyway, hope this can help you. 无论如何，希望这对您有帮助。

Answer 2

before i even say anything, its <link rel="stylesheet" href="style.css"> and not <link rel="stylesheet" type="text/css" href="style.css"></link> . 在我什至没有说什么之前，它的<link rel="stylesheet" href="style.css">而不是<link rel="stylesheet" type="text/css" href="style.css"></link> 。 You've closed the tags. 您已关闭标签。 That's probably why it isn't working. 这可能就是为什么它不起作用的原因。 Anyways, here's another solution. 无论如何，这是另一个解决方案。

I found this answer on stackoverflow that fixes your issue: 我在stackoverflow上找到了此答案，可解决您的问题：

You have to surround the CSS with a tag: 您必须在CSS周围加上一个标签：

<?php include 'header.php'; ?>
<style>
<?php include 'CSS/main.css'; ?>
</style>

...PHP include works fine with .css ending too. ... PHP include也可以以.css结尾。 In this way you can even use PHP in your CSS file. 这样，您甚至可以在CSS文件中使用PHP。 That can be really helpful to organize eg colors as variables. 这对于将例如颜色作为变量进行组织非常有帮助。

如何获得CSS文件以正确地应用于我的PHP / HTML代码？

问题描述

2 个解决方案

解决方案1
0 2018-06-20 03:01:00

解决方案2
0 2018-06-20 03:08:50

如何获得CSS文件以正确地应用于我的PHP / HTML代码？

问题描述

2 个解决方案

解决方案1 0 2018-06-20 03:01:00

解决方案2 0 2018-06-20 03:08:50

解决方案1
0 2018-06-20 03:01:00

解决方案2
0 2018-06-20 03:08:50