前端页面一些小点
案例一：
<!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: billsaction:'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;