前端页面一些小点

案例一:

<!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; 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/59874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PCL 三维重建 泊松曲面重建算法

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 法线估计 2.1.2 泊松曲面重建 2.1.3可视化重建结果 2.2完整代码 三、实现效果 3.1原始点云 3.2重建后点云 PCL点云算法汇总及实战案例汇总的目录地址链接: PCL点云算法与项目实战…

机器学习的概览

笔记内容侵权联系删除 机器学习算法 机器学习(包括深度学习分支)是研究“学习算法”的一门学问。所谓“学习”是指:对于某类任务T和性能度量P&#xff0c;一个计算机程序在T上以P衡量的性能随着经验E而自我完善&#xff0c;那么我们称这个计算机程序在从经验E学习。 机器学习…

【MySQL】MySQL的笛卡尔积现象是什么?简单说说

笛卡尔积好像是个科学家&#xff0c;也是个学术概念&#xff0c;在MySQL中表示交叉连接&#xff0c;即&#xff1a;匹配一切所有的可能 举例如下&#xff1a; 准备两张表 【employee表】 emp_idlast_namedept_id1Smith12Johnson2 【department表】 dept_iddepartment_nam…

spring-data-elasticsearch 3.2.4 实现桶bucket排序去重,实现指定字段的聚合搜索

一、背景 es索引有一个文档CourseIndex&#xff0c;下面是示意: creatorIdgradesubjectnameno1002270英语听力课程一N00232DS91004380数学口算课程N00209DK71003480物理竞赛课程N00642XS21002280英语听力课程二N00432WS31002290英语听力课程三N002312DP5 在搜索的时候&#…

MIT6.5840 Lab 1: MapReduce(6.824)

结果 介绍 在本实验中&#xff0c;您将构建一个MapReduce系统。您将实现一个调用应用程序Map和Reduce函数并处理文件读写的工作进程&#xff0c;以及一个将任务分发给工作进程并处理失败的工作进程的协调进程。您将构建类似于MapReduce论文的东西。&#xff08;注意&#xff1a…

MYSQL- 展示事件信息 EVENTS 语句(十八)

13.7.5.18 SHOW EVENTS 语句 SHOW EVENTS[{FROM | IN} schema_name][LIKE pattern | WHERE expr]此语句显示有关事件管理器事件的信息&#xff0c;这些信息在第23.4节“使用事件调度器”中进行了讨论。它要求显示事件的数据库具有EVENT权限。 以最简单的形式&#xff0c;SHOW…

WPF Gif图谱 如果隐藏的话会存在BUG

<hc:GifImageWidth"110"Height"110"Margin"20,20,0,0"Stretch"None"Uri"./../WPF/Asset/Image/fire_on.gif"Visibility"{Binding FireVisibility}" />FireVisibility 初始状态必须为&#xff1a;Visibility…

nfs服务器--RHCE

一&#xff0c;简介 NFS&#xff08;Network File System&#xff0c;网络文件系统&#xff09;是FreeBSD支持的文件系统中的一种&#xff0c;它允许网络中的计 算机&#xff08;不同的计算机、不同的操作系统&#xff09;之间通过TCP/IP网络共享资源&#xff0c;主要在unix系…

Linux驱动开发——设备树随记

Linux驱动开发——设备树随记 前言 在嵌入式Linux这块&#xff0c;对设备树一直都没怎么去了解&#xff0c;一直是模模糊糊的。所以最近也是被老大赶鸭子上架&#xff0c;快速跟着正点原子的驱动开发的课程学了一下。感觉对设备树的认识也是更清晰了一点。同样借着此篇博客记…

Uni-APP+Vue3+鸿蒙 开发菜鸟流程

参考文档 文档中心 运行和发行 | uni-app官网 AppGallery Connect DCloud开发者中心 环境要求 Vue3jdk 17 Java Downloads | Oracle 中国 【鸿蒙开发工具内置jdk17&#xff0c;本地不使用17会报jdk版本不一致问题】 开发工具 HBuilderDevEco Studio【目前只下载这一个就…

[每日一氵] PySpark 的 log GC 部分是什么意思

2024-11-15T11:10:40.2920800: 2850.503: [GC (Allocation Failure) [PSYoungGen: 142705K->3472K(141312K)] 1403514K->1264289K(1543168K), 0.0170225 secs] [Times: user0.05 sys0.00, real0.01 secs] 这一行日志来自Java的垃圾收集器&#xff08;Garbage Collector, …

sslSocketFactory not supported on JDK 9+

clientBuilder.sslSocketFactory(SSLSocketFactory) not supported on JDK 9 at okhttp3.internal.platform.Jdk9Platform.trustManager(Jdk9Platform.kt:61) at okhttp3.OkHttpClient$Builder.sslSocketFactory(OkHttpClient.kt:751) at 1.升版本4.9.3以上 2、加个函数获取X…

「Mac玩转仓颉内测版8」入门篇8 - Cangjie函数与方法

本篇介绍Cangjie编程语言中的函数与方法&#xff0c;帮助理解如何通过函数封装重复操作&#xff0c;提升代码的复用性和可维护性。 关键词 Cangjie函数方法定义参数传递返回值模块化与复用性 一、什么是函数&#xff1f; 函数是一个代码块&#xff0c;用于接收参数、执行操作…

ubuntu 16.04 中 VS2019 跨平台开发环境配置

su 是 “switch user” 的缩写&#xff0c;表示从当前用户切换到另一个用户。 sudo 是 “superuser do” 的缩写&#xff0c;意为“以超级用户身份执行”。 apt 是 “Advanced Package Tool” 的缩写&#xff0c;Ubuntu中用于软件包管理的命令行工具。 1、为 root 用户设置密码…

git没有识别出大写字母改成小写重命名的文件目录

Git 默认不会跟踪大写字母和小写字母的区别&#xff0c;因为在大多数文件系统中&#xff0c;大写字母和小写字母被认为是相同的文件&#xff0c;只有在区分大小写的文件系统中&#xff08;如 macOS 的 HFS 或 Windows 的 NTFS&#xff09;&#xff0c;这才是一个问题。 如果重命…

Java集合ConcurrentHashMap——针对实习面试

目录 Java集合ConcurrentHashMapConcurrentHashMap的特性是什么&#xff1f;HashMap和ConcurrentHashMap的区别&#xff1f;说说ConcurrentHashMap的底层实现 Java集合ConcurrentHashMap ConcurrentHashMap的特性是什么&#xff1f; 线程安全性 多线程并发读写安全&#xff1a…

游戏引擎学习第16天

视频参考:https://www.bilibili.com/video/BV1mEUCY8EiC/ 这些字幕讨论了编译器警告的概念以及如何在编译过程中启用和处理警告。以下是字幕的内容摘要&#xff1a; 警告的定义&#xff1a;警告是编译器用来告诉你某些地方可能存在问题&#xff0c;尽管编译器不强制要求你修复…

数据库几道简答题

1。 什么是数据库? 答&#xff1a;数据库是长期存储在计算机内、有组织的、可共享的数据集合。数据库是按某种数据模型进行组织的、存放在外存储器上&#xff0c;且可被多个用户同时使用。因此,数据库具有较小的冗余度,较高的数据独立性和易扩展性. 2。 什么是数据库的数据独…

使用--log-file保存pytest的运行日志

前面使用了tee和重定向来保存pytest的运行日志&#xff0c;这次使用--log-file&#xff0c;因为它可以配置日志的级别、格式和每行日志的生成时间。 pytest -q -s -ra --count100 test_open_stream.py --alluredir./report/CXL --log-filepytest_log.txt 【pytest.ini】 使用…

【题目3】C++类的设计——07年复试笔试题

【题目】07年C复试笔试真题 定义一个处理日期的类TDate&#xff0c;它有3个私有数据成员&#xff1a;Month,Day,Year和若干共有成员函数&#xff0c;实现如下要求[附条件解读] ①构造函数重载→创建无参构造函数有参构造函数 ②成员函数设置缺省参数→与④一同可用set()在类中实…