javascript - 使用 XAMPP 将 CSS 和 Javascript 文件链接到本地​​主机服务器上的 HTML 文件

标签 javascript html css

我这里有一个 JSFiddle http://jsfiddle.net/yqh2rqh0/25/它工作得很好。但后来我尝试分解所有样式的代码,并将其实际添加到我的网站,即 www.localhost/home.html,并创建了一个 home.html 页面,在其中放置:

<html>

<head>

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

<script type="text/javascript”; src=“homejavascript.js”;></script>

</head>

<body>

<input type="button" name="answer" value="post" onclick="openBox()" />

<div id="postBox" style="display:none;">
<center>
    <input type="text" name="post" maxlength="100" />
    <br>
    </br>
    <button style="border : solid 0px #000080; border-radius : 4px; moz-border-radius : 4px; -webkit-box-shadow : 0px 0px 5px rgba(0, 0, 0, 1.0); -moz-box-shadow : 0px 0px 5px rgba(0,0,0,1.0); box-shadow : 0px 0px 5px rgba(0,0,0,1.0); font-size : 24px; font-style : ;color : #ffffff; padding : 4px 10px; background-color : #000080;">post</button>
    <br/>
    <br/>
    <center>
    <table class="rows"></table>
</center>
</center>
</div>

</body>

</html>

然后我就有了 Javascript (homejavascript.js) 文件:

var btn = document.getElementsByTagName("button")[0];
var inpt = document.getElementsByName("post")[0];

function openBox() {
   document.getElementById('postBox').style.display = "block";
}

btn.onclick = function () {

    if (!inpt.value) alert("Please enter something to post.");

    var tbl = document.getElementsByTagName("table")[0];
    var row = tbl.insertRow(0);
    var cell = row.insertCell(0);
    var txt = document.createTextNode(inpt.value);
    cell.appendChild(txt);
    tbl.insertRow(0);
    tbl.insertRow(0);

    inpt.value = "";

};

最后是我的 homestyle.css 文件,它是 CSS 部分:

input[type=text] {
    padding:5px;
    border:2px solid #000080;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
input[type=text]:focus {
    border-color:#ccc;
}
-webkit-border-radius: 5px;
 border-radius: 5px;

}
.rows {
    text-align: center;
}

所有内容都在我的 XAMPP 的 htdocs 文件夹中,但是当我转到 localhost/home.html 时,它是一个带有正确图标的空白页面。我哪里出错了,我能做些什么来解决这个问题?

最佳答案

改变

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

<script type="text/javascript”; src=“homejavascript.js”;></script>

致:

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

<script type="text/javascript" src="homejavascript.js"></script>

由于您的 Assets 标签有错误...

关于javascript - 使用 XAMPP 将 CSS 和 Javascript 文件链接到本地​​主机服务器上的 HTML 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27951880/

相关文章:

javascript - 使用javascript在鼠标悬停时停止动画

javascript - 电话号码格式验证

javascript - 如何在 CSS 中使用 div 制作尖箭头

javascript - 获取用户输入以在 javascript 中执行计算

javascript - JS 移动导航不工作

html - 仅当宽度尺寸开始接触 Logo 时,背景尺寸才包含 Logo 图像

html - 是否有与内联 SVG 一起使用的图像替换的等效技术

html - 带按钮的全屏背景

jquery - 鼠标单击时未启用输入文本

javascript - 在 Express.js 中,我是否应该返回响应?