Question

我是网络开发人员的新手，正在开发我的第一个使用Flask构建的完全自定义网站。我使用HTML5 Boilerplate作为基本代码结构，使用Jinja来模拟我的页面。这是文件结构：

.
├── app
│   ├── __init__.py
│   ├── forms.py
│   ├── static
│   │   ├── browserconfig.xml
│   │   ├── crossdomain.xml
│   │   ├── css
│   │   │   ├── main.css
│   │   │   └── normalize.css
│   │   ├── img
│   │   │   ├── apple-touch-icon.png
│   │   │   ├── favicon.ico
│   │   │   ├── tile-wide.png
│   │   │   └── tile.png
│   │   ├── js
│   │   │   ├── main.js
│   │   │   ├── plugins.js
│   │   │   └── vendor
│   │   │       ├── jquery-1.12.0.min.js
│   │   │       └── modernizr-2.8.3.min.js
│   │   └── robots.txt
│   ├── templates
│   │   ├── 404.html
│   │   ├── about.html
│   │   ├── base.html
│   │   └── index.html
│   └── views.py
├── config.py
├── profile.py
├── run.py
├── tests.py
└── tmp
    └── tmp.log

以下是base.html的样子：

<!doctype html>
<html class="no-js" lang="">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">

        <title>{{ title }}</title>

        <meta name="description" content="{{ description }}">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
        <link rel="/static/img/apple-touch-icon" href="/static/img/apple-touch-icon.png">
        <!-- Place favicon.ico in the root directory -->

        <link rel="stylesheet" href="/static/css/normalize.css" type="text/css">
        <link rel="stylesheet" href="/static/css/main.css" type="text/css">
        <script src="/static/js/vendor/modernizr-2.8.3.min.js"></script>
    </head>
    <body>
        <!--[if lte IE 9]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
        <![endif]-->

        <!-- Add your site or application content here -->
        <div class="header">
            <div class="container">
                <ul class="navigation">
                    <li><a href="/index">Home</a></li>
                    <li><a href="/about">About</a></li>
                </ul>
            </div>
        </div>

        {% block content %}{% endblock %}

        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
        <script>window.jQuery || document.write('<script src="/static/js/vendor/jquery-1.12.0.min.js"><\/script>')</script>
        <script src="/static/js/plugins.js"></script>
        <script src="/static/js/main.js"></script>

        <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->
        <!-- <script>
            (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
            function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
            e=o.createElement(i);r=o.getElementsByTagName(i)[0];
            e.src='https://www.google-analytics.com/analytics.js';
            r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
            ga('create','UA-XXXXX-X','auto');ga('send','pageview');
        </script> -->
    </body>
</html>

在Author's custom styles的{{1}}部分（html5样板来源here）中，我添加了这些初始样式：

main.css

除非我启动服务器并访问该网站，否则任何自定义样式都不会生效。 css的某些部分肯定是有效的，因为该网站看起来不像原始html，但我的自定义样式没有被解释。我在html模板中做错了吗？

感谢任何帮助。

谢谢！

Answer 1

CSS RESET会帮助你。您遇到的实际问题是在Web浏览器中。它们通过 DEFAULT 更改样式属性，字体，边距，填充和许多其他内容。要解决此问题，您可以直接将以下代码附加到样式表中，该样式表与您预期的一样无效：

注意：在您放置代码之前附加CSS重置。

  html, body, div, span, applet, object, iframe,
  h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  a, abbr, acronym, address, big, cite, code,
  del, dfn, em, img, ins, kbd, q, s, samp,
  small, strike, strong, sub, sup, tt, var,
  b, u, i, center,
  dl, dt, dd, ol, ul, li,
  fieldset, form, label, legend,
  table, caption, tbody, tfoot, thead, tr, th, td,
  article, aside, canvas, details, embed, 
  figure, figcaption, footer, header, hgroup, 
  menu, nav, output, ruby, section, summary,
  time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article, aside, details, figcaption, figure, 
  footer, header, hgroup, menu, nav, section {
  display: block;
  }
  body {
  line-height: 1;
  }
  ol, ul {
  list-style: none;
  }
  blockquote, q {
  quotes: none;
  }
  blockquote:before, blockquote:after,
  q:before, q:after {
  content: '';
  content: none;
  }
  table {
  border-collapse: collapse;
  border-spacing: 0;
  }
  /*Your own CSS code*/

浏览器无法解释我的CSS

1 个答案: