HTML样式表互相干扰

时间:2016-07-06 15:17:39

标签: javascript jquery html css twitter-bootstrap

目前我正在制作一个演示网站。我正在使用多个样式表,并从他们每个人那里采取我喜欢的东西来构建一个用于学习目的的站点。现在我的问题是元数据中有一行阻止我的模态关闭,我的模态因此而锁定,但我还需要它按照我希望的方式设计其他部分。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css"> <!-- EFFECTING CLICKING OUT TO CLOSE -->
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css"> <!-- EFFECTING WORDS IN MODALS  -->
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

我试图摆脱每一行,具体看他们做了什么以及他们如何影响我的节目。有些要么影响模态,要么能够点击它们,或者删除模态中的所有文本。

我有一个想法,即制作单独的html文件并将它们调用到主文件中,为每个文件提供不同的元数据。这会有用吗?

提前致谢。

3 个答案:

答案 0 :(得分:0)

我建议像评论中提到的其他人一样,只保留头部的基本部分。这意味着它对您来说要容易得多,因为如果您编写自己的CSS并将其加载到html上,您将更好地控制代码。坚持使用Bootstrap,因为它已经为网页提供了基本的布局,也可以做出响应。

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Font awesome -->
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
    <!--Links to CSS, Bootstrap-->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="your-external-css-file.css"/>
</head>

您的头部标签应包含类似上一个示例的内容。

答案 1 :(得分:0)

引用的文件(/w3.css和/w3-theme-black.css)之间没有任何冲突的类。渲染冲突可能是由您实现此类的方式引起的。

您可以通过反转您引用.css文件的顺序来轻松测试此理论,例如:

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3-theme-black.css">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

如果通过改变css的顺序,你会得到相反的经验而不是css冲突,但我怀疑。接下来的选择是仔细研究你如何使用css类。

另外我建议移动“&lt; meta charset =”utf-8“&gt;”在bootstrap css文件之上。

答案 2 :(得分:0)

仔细查看您发布的代码后,我注意到您有2个引用/ boot.6引用。您可能还必须使用文件顺序。