前端页面一些小点
案例一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>快递单号查询</title>
<style>
body{
display:grid;
justify-content: center;
gap:20px;
}
.nav{
display:flex;
width:1400px;
}
.nav-left{
display:flex;
align-items: center;
justify-content: center;
margin-left: 10px;
margin-right: 10px;
font-size: 25px;
}
.nav-right{
display: flex;
border-bottom: 2px solid rgba(238, 238, 238, 0.944);
width:1000px;
margin-right: 10px;
}
.main{
display:flex;
height:450px;
width:1400px;
margin: auto;
background-color: rgba(238, 238, 238, 0.944);
}
.footer{
display:flex;
width:1400px;
margin: auto;
background-color: rgba(174, 58, 108, 0.944);
color:white;
padding:10px 0px;
justify-content: center;
}
input{
background-color: rgba(238, 238, 238, 0.944);
border:none;
outline:none;
display:inline-block;
width:300px;
height:60px;
font-size: 20px;
color:rgb(117, 116, 116)
}
</style>
</head>
<body>
<div class="nav"><img src="./left1.png"><span class="nav-left">快递运单号查询</span><img src="./left2.png"><div class="nav-right"></div></div>
<div class="main" ><img src="./1.png" style="width:70px;height:60px;"><input type="text" id="bills"></div>
<div class="footer"><span class="check" style="cursor:pointer;">立即查询</span></div>
</body>
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
<script src="./jquery-3.7.1.js"></script>
<script>
window.onload = ()=>{
document.querySelector('.check').addEventListener('click',()=>{
let bills = document.querySelector('#bills').value
// console.log(bills)
$.ajax({
type:'GET',
url: 'http://smt56.kingtrans.cn/WebTrack',
header:{'Access-Control-Allow-Origin':'127.0.0.1','Access-Control-Allow-Methods':'POST' },
data: {//传递的参数
// bills: bills
action:'list'
},
dataType: 'json',//必须写 定义的是jsonp请求方式
jsonp: 'ks_trackform.bills',// 后端接收的函数名变量，如果是callback则可以省略，否则不可以省略
jsonpCallback: 'callback',//前端定义接收函数名变量，省略后会默认生成一个函数jquery+数字
success: function (res) {
// location.href='http://smt56.kingtrans.cn/WebTrack?action=list&bills=MY82118314410'
console.log(res)
}
})
})
}
</script>
</html>1. 让输入框无边框
outline:none;
border:none;
2. 光标变小手
cursor:pointer;
原文地址：https://blog.csdn.net/m0_73557953/article/details/143821393
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！