当前位置: 首页 > news >正文

前端页面一些小点

案例一:

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

相关文章:

前端页面一些小点

案例一&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>快递单号查询</title><…...

Postman接口测试(断言、关联、参数化、输出测试报告)

基本界面展示 Get、Post请求 Postman断言 使用postman来判断预期结果与实际结果是否一致 响应状态码断言 响应包含字符串 断言判断字符串的格式 关联 用于解决http请求之间存在依赖关系 依赖&#xff1a;一个http请求的响应结果中的数据&#xff0c;被另一个请求使用 登…...

redis和mongodb等对比分析

Redis 和 MongoDB 都是非常流行的 NoSQL 数据库,它们在数据存储模型、性能、扩展性等方面有很大的差异。下面是 Redis 和 MongoDB 的对比分析: 1. 数据模型 Redis: 键值存储:Redis 是一个内存数据结构存储,它支持多种数据类型,如字符串、哈希、列表、集合、有序集合等。…...

如何在 WordPress 中轻松强制所有用户退出登录

作为一名长期管理 WordPress 网站的站长&#xff0c;我深知维护网站安全性的重要性。尤其是在面对会员网站或付费内容平台时&#xff0c;确保所有用户的登录状态是最新的&#xff0c;是维持网站正常运营的关键之一。今天&#xff0c;我就分享一下如何通过简单的步骤&#xff0c…...

移除元素(leetcode 27)

给定一个数组&#xff0c;在数组中删除等于这个目标值的元素&#xff0c;然后返回新数组的大小 数组理论&#xff1a; 数组是一个连续的类型相近的元素的一个集合&#xff0c;数组上的删除是覆盖&#xff0c;只能由后面的元素进行覆盖&#xff0c;而不能进行真正意义上的地理位…...

html5表单属性的用法

文章目录 HTML5表单详解与代码案例一、表单的基本结构二、表单元素及其属性三、表单的高级应用与验证四、表单布局与样式 HTML5表单详解与代码案例 HTML5表单是网页中用于收集用户输入并提交到服务器的重要元素&#xff0c;广泛应用于登录页面、客户留言、搜索产品等场景。本文…...

使用 Ant Design Vue 自定渲染函数customRender实现单元格合并功能rowSpan

使用 Ant Design Vue 自定渲染函数customRender实现单元格合并功能rowSpan 背景 在使用Ant Design Vue 开发数据表格时&#xff0c;我们常常会遇到需要合并单元格的需求。 比如&#xff0c;某些字段的值可能会在多行中重复出现&#xff0c;而我们希望将这些重复的单元格合并为…...

相机光学(四十四)——ALL-PD和PDAF

1.PDAF&#xff08;Phase Detection Auto Focus&#xff09; PDAF是相位检测自动对焦技术的缩写&#xff0c;它是一种在数码相机和智能手机摄像头中使用的自动对焦技术。   PDAF的原理是根据CIS&#xff08;CMOS图像传感器&#xff09;不同像素的相位差信息&#xff0c;判断出…...

Opengl光照测试

代码 #include "Model.h" #include "shader_m.h" #include "imgui.h" #include "imgui_impl_glfw.h" #include "imgui_impl_opengl3.h" //以上是放在同目录的头文件#include <glad/glad.h> #include <GLFW/glfw3.…...

OpenSIP2.4.11 向 FreeSWITCH 注册

应朋友要求做了个简单的测试&#xff0c;花费时间不过半小时&#xff0c;记录如下&#xff1a; OpenSIPS IP 地址&#xff1a;192.168.31.213 FreeSWITCH IP 地址&#xff1a;192.168.31.166 加载 uac_registrant 模块&#xff08;这个模块依赖 uac_auth 模块&#xff0c;得…...

【C++】深入理解 C++ 优先级队列、容器适配器与 deque:实现与应用解析

个人主页: 起名字真南的CSDN博客 个人专栏: 【数据结构初阶】 &#x1f4d8; 基础数据结构【C语言】 &#x1f4bb; C语言编程技巧【C】 &#x1f680; 进阶C【OJ题解】 &#x1f4dd; 题解精讲 目录 前言&#x1f4cc; 1. 优先级队列、容器适配器和 deque 概述✨1.1 什么是优…...

Android 开发与救砖工具介绍

Android 开发与救砖工具介绍 在 Android 开发和设备维护中&#xff0c;fastboot、adb 和 9008 模式是三个非常重要的工具和模式。它们各自有不同的用途和操作方式&#xff0c;对于开发者和技术支持人员来说&#xff0c;了解它们的功能和使用方法是必不可少的。 1. Fastboot …...

vue2和vue3:diff算法的区别?

Vue 2 和 Vue 3 在 diff 算法方面的主要区别是&#xff1a; Vue 2 使用普通的 diff 算法&#xff0c;它会遍历所有的节点进行比对。 Vue 3 引入了 patch flag 的概念&#xff0c;并且对 diff 算法进行了优化&#xff0c;比如在相同层级的节点间不会去递归比对已经被移除的节点…...

后端返回大数问题

这个问题并不难,但是在开发的时候没有注意到 后端返回了一个列表数据,包含id,这个id是一个大数,列表进入详情,需要将id传入到详情页面详情页面内部通过id获取数据一直404,id不正确找问题,从路由传参到请求数据发现id没有问题,然后和后端进行联调,发现后端返回的id和我获取的id…...

vue3: ref, reactive, readonly, shallowReactive

vue3: ref, reactive, readonly, shallowReactive 原文地址:https://mp.weixin.qq.com/s/S3jPZKEMBP8nQQObF5d2VA <template><!-- <ul><li v-for"item in list.arr">{{item}}</li></ul><button click.prevent"add"…...

5G与4G互通的桥梁:N26接口

5G的商用部署进程将是一个基于4G系统进行的长期的替换、升级、迭代的过程&#xff0c;4G系统是在过渡到5G全覆盖过程中&#xff0c;作为保障用户业务连续性体验这一目的的最好补充。 因此4G/5G融合组网&#xff0c;以及互操作技术将是各大运营商在网络演进中需要重点考虑的问题…...

29-Elasticsearch 集群监控

Elasticsearch Stats 相关的 API ● Elasticsearch 提供了多个监控相关的 API ○ Node Stats&#xff1a; _nodes/stats ○ Cluster Stats: _cluster/stats ○ Index Stats: index_name/_stats Elasticsearch Task API ● 查看 Task 相关的 API ○ Pending Cluster Tasks…...

利用Excel批量生成含二维码的设备管理标签卡片

在日常办公中&#xff0c;批量制作标签是常见且繁琐的任务&#xff0c;尤其当这些标签需要包含大量数据并附带二维码以便快速扫描识别时&#xff0c;难度更是成倍增加。尽管传统的Word邮件合并功能在数据插入方面表现出色&#xff0c;但在二维码生成上却显得有些捉襟见肘。 为…...

小米运动健康与华为运动健康在苹手机ios系统中无法识别蓝牙状态 (如何在ios系统中开启 蓝牙 相册 定位 通知 相机等功能权限,保你有用)

小米运动健康与华为运动健康在苹手机ios系统中无法识别蓝牙状态 &#xff08;解决方案在最下面&#xff0c;参考蓝牙权限设置方式举一反三开启其它模块的权限&#xff09; 最近买了一台小米手表s4&#xff0c;但是苹手机ios系统中的 “小米运动健康” app 始终无法识别我手机…...

高亮变色显示文本中的关键字

效果 第一步&#xff1a;按如下所示代码创建一个用来高亮显示文本的工具类&#xff1a; public class KeywordUtil {/*** 单个关键字高亮变色* param color 变化的色值* param text 文字* param keyword 文字中的关键字* return*/public static SpannableString highLigh…...

实测!用DeepSeek R1和通义千问Max分别写代码、解数学题,结果有点意外

DeepSeek R1与通义千问Max实战对比&#xff1a;当代码遇上数学题 上周我在开发一个需要同时处理算法优化和复杂数学计算的个人项目时&#xff0c;突然萌生了一个想法&#xff1a;为什么不把市面上最火的两个AI编程助手——DeepSeek R1和通义千问Max拉出来比一比&#xff1f;作…...

终极指南:使用Refine和Ant Design快速构建专业列表页面

终极指南&#xff1a;使用Refine和Ant Design快速构建专业列表页面 【免费下载链接】refine 一个用于构建内部工具、管理面板、仪表盘和B2B应用程序的React框架&#xff0c;具有无与伦比的灵活性。 项目地址: https://gitcode.com/GitHub_Trending/re/refine Refine是一…...

告别驱动芯片!手把手教你用FPGA直接驱动RGB888/565屏幕(附Verilog代码)

FPGA直接驱动RGB屏幕&#xff1a;摆脱专用芯片的高效设计指南 在嵌入式系统开发中&#xff0c;显示模块往往是不可或缺的部分。传统方案通常依赖专用驱动芯片如SSD1963或RA8875来连接处理器与RGB屏幕&#xff0c;但这种架构正面临FPGA技术带来的革新。本文将揭示如何利用FPGA的…...

MogFace模型Python入门实战:调用API完成第一个人脸检测程序

MogFace模型Python入门实战&#xff1a;调用API完成第一个人脸检测程序 你是不是也对AI人脸检测感到好奇&#xff0c;想亲手写个程序试试&#xff1f;今天&#xff0c;我们就来一起动手&#xff0c;用Python写一个最简单的程序&#xff0c;调用MogFace模型来检测图片里的人脸。…...

ollama部署本地大模型|translategemma-4b-it效果对比:vs NLLB-3B、vs SeamlessM4T-v2

ollama部署本地大模型&#xff5c;translategemma-4b-it效果对比&#xff1a;vs NLLB-3B、vs SeamlessM4T-v2 想在自己电脑上跑一个翻译模型&#xff0c;但又担心模型太大、速度太慢&#xff1f;今天我们来聊聊一个轻量级的新选择——Google推出的TranslateGemma-4b-it。更重要…...

新手避坑指南:给UR机械臂选配RealSense D435相机,这5个参数千万别看错

新手避坑指南&#xff1a;给UR机械臂选配RealSense D435相机&#xff0c;这5个参数千万别看错 第一次为UR机械臂选配深度相机时&#xff0c;我盯着RealSense D435的参数表发呆了半小时——那些专业术语像天书一样。直到项目因选型错误延误两周后&#xff0c;我才明白参数表里藏…...

【技术演进】从GPT-1到GPT-4:大语言模型的核心突破与演进图谱

1. 从GPT-1到GPT-4&#xff1a;技术演进的起点与飞跃 2018年诞生的GPT-1就像刚学会走路的孩子——它能理解简单的文本指令&#xff0c;但经常答非所问。当时这个仅有1.17亿参数的模型&#xff0c;采用了最基础的Transformer解码器架构&#xff0c;通过"预测下一个词"…...

零基础玩转CosyVoice:3步完成声音克隆,制作专属语音祝福

零基础玩转CosyVoice&#xff1a;3步完成声音克隆&#xff0c;制作专属语音祝福 1. 引言&#xff1a;让声音成为你的专属礼物 你有没有想过&#xff0c;用自己或亲友的声音&#xff0c;生成一段独一无二的语音祝福&#xff1f;比如&#xff0c;用妈妈的声音说“生日快乐”&am…...

如何参与Data-Science-For-Beginners社区贡献:完整开源项目参与指南

如何参与Data-Science-For-Beginners社区贡献&#xff1a;完整开源项目参与指南 【免费下载链接】Data-Science-For-Beginners 10 Weeks, 20 Lessons, Data Science for All! 项目地址: https://gitcode.com/GitHub_Trending/da/Data-Science-For-Beginners Data-Scienc…...

综合能源系统调度这活儿,本质上就是在各种限制条件里找平衡。今天咱们聊点有意思的——当柔性负荷遇上低碳经济,Matlab怎么帮我们玩转这个多目标优化局

基于Matlab考虑柔性负荷的综合能源系统低碳经济优化调度。 采用CPIEX求解器某微网的运行优化情况&#xff0c; 下层优化得出的微网向配电网购电或售电功率&#xff0c;以及各机组的出力 综合考虑运行成本和碳成本&#xff0c;建立总成本最低为优化目标的IES低碳经济调度模型。 …...