<link href ="/layer/a.css" rel ="stylesheet"> 其中href需要写成相对路径怎么写
时间: 2023-10-08 12:10:19 浏览: 28
如果您想将 `href` 属性设置为相对路径,指定 `a.css` 文件位于 `/layer/` 目录中,可以按照以下方式编写:
```html
<link href="layer/a.css" rel="stylesheet">
```
在这种情况下,浏览器将在当前页面的相同目录中查找名为 `layer/a.css` 的样式表文件。请确保 `a.css` 文件位于 `layer` 目录下,并与当前页面位于相同的目录中。
相关问题
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.w3.org/1999/xhtml"> <head> <title>register</title> <script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script> <script th:src="@{/js/vue.min.js}" type="text/javascript"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <title>登录表单</title> <meta name="keywords" content="登录表单"/> <!-- Meta-Tags --> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> <!-- //Meta-Tags --> <!-- Style --> <link rel="stylesheet" href="/./css/style.css" type="text/css" > </head> <body> <h1>注册表单</h1> <div class="container w3layouts agileits"> <div class="register w3layouts agileits" id="app"> <h2>注 册</h2> <form action="#" method="post"> <input type="text" Name="Name" placeholder="用户名" required=""> <input type="text" Name="Email" placeholder="邮箱" required=""> <input type="password" Name="Password" placeholder="密码" required=""> <input type="text" Name="Phone Number" placeholder="手机号码" required=""> </form> <div class="send-button w3layouts agileits"> <button @click="turnToRegister">注册</button> </div> <div class="clear"></div> </div> <div class="clear"></div> </div> <script> //新建一个Vue对象。 new Vue({ //绑定作用域 el: "#app", //绑定数据 data: {//双向绑定数据 user: { name: "", password: "", } }, //绑定方法; methods: { addOne() { //适用ajax进行数据交互 $.ajax({ url: "/user/insertOne",//请求的路径 type: "post",//请求的方式 data: { name: this.user.name,//获取user里面的数据并且进行绑定; password: this.user.password, }, //返回数据的格式 dataType: "json", //成功返回方式 success: function (rs) { if (rs.status == 200) {//rs获取状态码看是否成功 layer.alert(rs.msg, {icon: 6}, function () { //获取ifram层的窗口名 var frameIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(frameIndex); parent.location.reload() location.href="/login" }) } else { layer.alert(rs.msg, {icon: 5}, function () { //获取ifram层的窗口名 var frameIndex = parent.layer.getFrameIndex(window.name); parent.layer.close(frameIndex); }) } } }) } } }) </script> </body> </html> 帮我以上代码实现注册功能成功后,新增一个小弹窗,弹窗内容是注册成功
好的,首先你需要在代码中引入 Element UI 的弹窗组件,在 `<head>` 标签中添加以下代码:
```html
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
```
然后在 `<body>` 标签的最后,添加以下代码:
```html
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```
现在你就可以使用 Element UI 的弹窗组件了。接下来,你需要在 `success` 回调函数中添加以下代码来弹出一个成功提示框:
```javascript
this.$message({
message: '注册成功',
type: 'success'
});
```
现在,完整的代码如下:
```html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>register</title>
<script th:src="@{/js/jquery-2.1.1.min.js}" type="text/javascript"></script>
<script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>登录表单</title>
<meta name="keywords" content="登录表单"/>
<!-- Meta-Tags -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="application/x-javascript">
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar(){
window.scrollTo(0,1);
}
</script>
<!-- //Meta-Tags -->
<!-- Style -->
<link rel="stylesheet" href="/./css/style.css" type="text/css" >
</head>
<body>
<h1>注册表单</h1>
<div class="container w3layouts agileits">
<div class="register w3layouts agileits" id="app">
<h2>注 册</h2>
<form action="#" method="post">
<input type="text" Name="Name" placeholder="用户名" required="">
<input type="text" Name="Email" placeholder="邮箱" required="">
<input type="password" Name="Password" placeholder="密码" required="">
<input type="text" Name="Phone Number" placeholder="手机号码" required="">
</form>
<div class="send-button w3layouts agileits">
<button @click="addOne">注册</button>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<script>
//新建一个Vue对象。
new Vue({
//绑定作用域
el: "#app",
//绑定数据
data: {
//双向绑定数据
user: {
name: "",
password: "",
}
},
//绑定方法;
methods: {
addOne() {
//适用ajax进行数据交互
$.ajax({
url: "/user/insertOne",//请求的路径
type: "post",//请求的方式
data: {
name: this.user.name,//获取user里面的数据并且进行绑定;
password: this.user.password,
},
//返回数据的格式
dataType: "json",
//成功返回方式
success: function (rs) {
if (rs.status == 200) {//rs获取状态码看是否成功
this.$message({
message: '注册成功',
type: 'success'
});
//获取ifram层的窗口名
var frameIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(frameIndex);
parent.location.reload()
location.href="/login"
} else {
layer.alert(rs.msg, {icon: 5}, function () {
//获取ifram层的窗口名
var frameIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(frameIndex);
})
}
}
})
}
}
})
</script>
</body>
</html>
```
现在,当用户成功注册后,就会出现一个弹窗提示用户注册成功。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通过属性查询地图服务中的信息</title> <link rel="stylesheet" href="https://js.arcgis.com/3.39/esri/css/esri.css"> <!-- <link rel="stylesheet" type="text/css" href="./css/esri.css" /> --> <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/themes/calcite/dijit/calcite.css"> <script src="https://js.arcgis.com/3.41/"></script> <script> require(["esri/map", //加载地图组件 "dojo/dom", "dojo/on", "esri/InfoTemplate", "esri/graphic", "esri/geometry/Point",//加载点对象组件 "esri/symbols/SimpleMarkerSymbol", "esri/geometry/Extent",//加载范围组件 "esri/layers/FeatureLayer", //加载FeatureLayer地图组件 // "esri/dijit/FeatureTable", "esri/layers/WebTiledLayer", //加载切片地图组件 "esri/layers/ArcGISDynamicMapServiceLayer",//加载动态地图组件 "esri/symbols/SimpleFillSymbol", "esri/renderers/UniqueValueRenderer", "esri/tasks/query", "esri/tasks/QueryTask", "esri/Color", "dojo/domReady!" ], function (Map, dom, on, InfoTemplate, Graphic, Point, SimpleMarkerSymbol,Extent, FeatureLayer, WebTiledLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, UniqueValueRenderer, Query, QueryTask, Color, GeoJsonLayer) { //初始化地图容器 // map = new Map("map", { logo: false, slider: false }, {zoom: 8}); map = new Map("map", { center: [109.33789 , 29.57985], basemap: "satellite", zoom: 10, sliderStyle: "small", logo: false }); // 创建底图 var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(basemap,0); // 创建动态图层 var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://116.62.63.94:6080/arcgis/rest/services/sanhuxiangtest/MapServer"); map.addLayer(dynamicLayer,99); }) </script> </head> <body class="tundra"> <div id="map" style="width:900px; height:580px; border:1px solid #000;"></div> 类别名称:<input class="nm" type="text"> </body> </html>
这段代码是一个简单的HTML页面,用于通过属性查询地图服务中的信息。以下是代码的主要部分:
1. 引入必要的CSS和JavaScript库:代码中使用了ArcGIS API for JavaScript的版本3.41,并引入了其他必要的库文件。
2. 初始化地图:使用`new Map("map", options)`创建一个地图容器,其中`options`包含了地图的一些设置,例如中心点、底图、缩放级别等。
3. 创建底图和动态图层:使用`new ArcGISTiledMapServiceLayer(url)`创建一个底图,以及使用`new ArcGISDynamicMapServiceLayer(url)`创建一个动态图层。这些图层可以通过URL指定,以加载地图数据。
4. 将图层添加到地图上:使用`map.addLayer(layer, index)`方法将底图和动态图层添加到地图上。`index`参数可选,用于指定图层的显示顺序。
在页面中还有一个输入框,用于输入类别名称。您可以在页面加载完成后,通过属性查询来过滤地图服务中的信息。
请注意,该代码使用的是ArcGIS API for JavaScript版本3.x,而不是最新版本的4.x。如果您要使用最新版本的API,请相应地修改代码。另外,确保替换URL和其他参数以适应您自己的地图服务和需求。