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

【前端】简单原生实例合集html,css,js

news 2025/9/21 14:15:42

长期补充，建议关注收藏点赞。

目录

  • a标签设置不一样的花样（图片但不用img)
  • 侧边固定box
  • 分栏
  • input各种类型
  • iframe
  • 表单
  • 拖拽

a标签设置不一样的花样（图片但不用img)

  1. a标签里面不用嵌套img，直接设置为其bg-img即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>a {text-decoration: none;width: 120px;height: 58px;background-color: pink;display: inline-block;text-align: center;line-height: 50px;color: #fff;}/* 每个a的背景图不同, 单独找到每个a, 设置不同的背景图片 */.one {background-image: url(./images/bg1.png);}.two {background-image: url(./images/bg2.png);}.three {background-image: url(./images/bg3.png);}.four {background-image: url(./images/bg4.png);}.one:hover {background-image: url(./images/bg5.png);}.two:hover {background-image: url(./images/bg6.png);}.three:hover {background-image: url(./images/bg7.png);}.four:hover {background-image: url(./images/bg8.png);}</style>
</head>
<body><a href="#" class="one">五彩导航</a><a href="#" class="two">五彩导航</a><a href="#" class="three">五彩导航</a><a href="#" class="four">五彩导航</a>
</body>
</html>

侧边固定box

  • 侧边固定栏
.side-bar{position:fixed;width:27px;bottom:100px;left:10px;
}
.side-bar ul{}
.side-bar ul li{border:1px solid #f5f5f5;background-color:#fff;width:25px;height:25px;border-top:none;/*防止重复*/
}
.side-bar ul li.one{border-top:1px solid #f5f5f5;
}
.side-bar ul li a img{width:20px;height:20px;
}
.side-bar ul li a {display:block;width:20px;height:20px;
}

分栏

  1. 区分fieldset和frameset
  2. frameset是把浏览器窗口分成几个区域，每个区域分别放置一个html文档到对应的frame中，而且这个比例可以按住边栏进行调整
  3. col指定左右边栏的宽度
<frameset cols="25%,75%"><frame src="注册A.html" /><frame src="注册B.html" />
</frameset>

input各种类型

  • 对于 type=“button” 的 < input> 元素，value 属性设置的是按钮上显示的文本。
    -所有的单选按钮radio的 name 属性值相同，这意味着这些按钮是一个组，用户只能选择其中的一个。
<input type="button" value="alert" id="alerta" onclick="alert('我被点击啦！')">
<input type="button" value="confirm" id="confirma" onclick="confirm('确定要删除吗？')">
<input type="button" value="prompt" id="prompta" onclick="prompt('请输入用户名：')"><label for="pga"><input type="radio" name="fruit" value="pga" id="pga">苹果A</label>
<label for="jza"><input type="radio" name="fruit" value="jza" id="jza">橘子A</label>
<label for="xja"><input type="radio" name="fruit" value="xja" id="xja">香蕉A</label><p>
<!--name:value --><input type="checkbox" name="hobby" value="汽车" id="qcA">汽车A <input type="checkbox" name="hobby" value="购物" id="gwA">购物A 
</p><input type="file" name="upfilea" />

iframe

  1. a中的target对应iframe的name,表明这个链接在哪个iframe里加载
<a href="http://www.sina.com.cn" target="myframe1">新浪</a>
<a href="http://www.hao123.com" target="myframe1">hao123</a>
<a href="http://www.taobao.com" target="myframe2">淘宝</a>
<a href="http://www.baidu.com" target="myframe2">百度</a><br>
<iframe src="注册A.html" frameborder="1" height="500" width="48%" name="myframe1" id="idframe1" class="cframe"></iframe>
<iframe src="注册B.html" frameborder="1" height="500" width="48%" name="myframe2"></iframe>

表单

  • 总结
  1. label 的 for 属性和 input 的 id 属性应该对应。
    这样对应的作用是：当用户点击 < label> 时，浏览器会自动把焦点转到对应的 < input> 元素。
  2. input的name是指定表单提交时，在服务器端接收这个字段的数据时会使用这个名字。
  3. required=“”：这个属性意味着用户在提交表单之前，必须填写这个字段,如果没填写提交后会弹出提示tooltip
  4. button中的value 属性在实际提交表单时作为按钮的值传递给服务器。
    button如果同时有name和value，则提交表单时，服务器会收到 name值=value值 的数据。
<form action=""><div id="zc"><fieldset><legend>注册用户</legend><p id="p1"><label for="user">账号</label><input type="text" name="user" id="user" placeholder="账号" required="" value="">			</p><p><label for="password">密码</label>		<input type="password" name="password" id="password" placeholder="密码" value=""></p><p><button type="submit" value="注册">注册</button><button type="submit" name="action" value="register">注册</button><hr></p><p><a href="注册A.html" id="ZCA" target="_blank">注册A页面</a></p><p><a href="注册B.html" id="ZCB" target="_blank">注册B页面</a></p></fieldset>		</div>
</form>

拖拽

<!--第1种-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽div</title>
<style type="text/css">div{position:absolute;width:150px;height:150px;background-color:red;}
</style>
<script type="text/javascript">
function drag(obj)
{if (typeof obj == "string") {var obj = document.getElementById(obj);obj.orig_index=obj.style.zIndex;///原始z-index}obj.onmousedown=function (e){//鼠标按下this.style.cursor="move";//设置鼠标样式this.style.zIndex=1000;//设置当前对象永远显示在最上层var d=document;if(!e) e=window.event;//按下时创建一个事件var x=e.clientX-document.body.scrollLeft-obj.offsetLeft;//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距var y=a.clientY-document.body.scrollTop-obj.offsetTop;//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距d.onmousemove=function(e){//鼠标移动if(!e) e=window.event;//移动时创建一个事件obj.style.left=e.clientX+document.body.scrollLeft-x;obj.style.top=e.clientY+document.body.scrollTop-y;}d.onmouseup=function (){//鼠标放开document.onmousemove=null;document.onmouseup = null;obj.style.cursor="normal";//设置放开的样式obj.style.zIndex=obj.orig_index;//回归原始z-index}}
}
</script>
</head>
<body>
<div id="div1" style="width:100px;height:100px;z-index:99"> </div>
<div id="div2" style="left:170px; background-color:blue; z-index:98"></div>
<script type="text/javascript">drag("div1");drag("div2");</script>
</body>
</html><!--第2种-->
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>拖拽实例</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>.box{width:100px;height:100px;background: red;position: absolute;top:0;}.left{left:0;}.right{right:0;}</style><script></script>
</head>
<body><div id="div1" class="box left">DIV1</div><div id="div2" class="box right">DIV2</div><script>//普通拖拽 -- 父类class Drag{constructor(id){this.oDiv = document.querySelector(id);this.disX = 0; this.disY = 0;this.init();}init(){this.oDiv.onmousedown = function(ev){this.disX = ev.clientX - this.oDiv.offsetLeft;this.disY = ev.clientY - this.oDiv.offsetTop;
//ev.clientX 是鼠标在页面上的水平位置
//this.oDiv.offsetLeft 是目标元素距离页面左边的距离
//通过相减就得到了鼠标点击点和元素左边缘之间的水平距离。document.onmousemove = this.fnMove.bind(this);document.onmouseup = this.fnUp.bind(this);return false;}.bind(this);}fnMove(ev){this.oDiv.style.left = ev.clientX - this.disX+'px';this.oDiv.style.top = ev.clientY - this.disY+'px';}fnUp(){document.onmousemove=null;document.onmouseup=null;}}//子类—— 限制范围class LimitDrag extends Drag{fnMove(ev){super.fnMove(ev);//限制范围if(this.oDiv.offsetLeft<=0){this.oDiv.style.left =0;}}}//调用new Drag('#div1');new LimitDrag('#div2');</script>
</body>
</html>

第二种封装更专业，但少考虑了滚动条的影响，比第一种多考虑了限制范围。

相关文章：

【前端】简单原生实例合集html,css,js

长期补充&#xff0c;建议关注收藏点赞。 目录 a标签设置不一样的花样&#xff08;图片但不用img)侧边固定box分栏input各种类型iframe表单拖拽 a标签设置不一样的花样&#xff08;图片但不用img) a标签里面不用嵌套img&#xff0c;直接设置为其bg-img即可 <!DOCTYPE html…...

编程日记 2025/3/4 23:29:57

【Spring】配置文件的使用

在Spring框架中&#xff0c;application.properties&#xff08;或application.yml&#xff09;文件用于配置Spring应用程序的各种属性。我们可以通过多种方式来使用这些配置&#xff0c;包括使用Value和ConfigurationProperties注解来绑定配置到Java对象。 下面是对不同配置类…...

编程日记 2025/3/4 23:26:52

MOM成功实施分享（七）电力电容制造MOM工艺分析与解决方案（第一部分）

声明&#xff1a;文章仅用于交流学习&#xff0c;不用于商业项目实施&#xff0c;图片来源于网络&#xff0c;如有侵犯权利&#xff0c;请联系作者及时删除。 本方案旨在对电力电容&#xff08;PEC和PQM型号&#xff09;制造工艺深度分析&#xff0c;结合管理要求设计MOM相关功…...

编程日记 2025/3/4 23:20:43

计算机毕业设计SpringBoot+Vue.js航空机票预定系统(源码+文档+PPT+讲解)

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

编程日记 2025/3/4 23:18:34

Python 爬取唐诗宋词三百首

你可以使用 requests 和 BeautifulSoup 来爬取《唐诗三百首》和《宋词三百首》的数据。以下是一个基本的 Python 爬虫示例&#xff0c;它从 中华诗词网 或类似的网站获取数据并保存为 JSON 文件。 import requests from bs4 import BeautifulSoup import json import time# 爬取…...

编程日记 2025/3/4 23:16:31

【二.提示词工程与实战应用篇】【3.Prompt调优：让AI更懂你的需求】

最近老张在朋友圈秀出用AI生成的国风水墨画，隔壁王姐用AI写了份惊艳全场的年终总结，就连楼下小卖部老板都在用AI生成营销文案。你看着自己跟AI对话时满屏的"我不太明白您的意思"，是不是怀疑自己买了台假电脑？别慌，这可能是你的打开方式不对。今天咱们就聊聊这个…...

编程日记 2025/3/4 23:15:30

商城源码的框架

商城源码的框架通常是基于某种Web开发框架或者电子商务平台来构建的。以下是一些常见的商城源码框架&#xff1a; WooCommerce&#xff1a;基于WordPress的电子商务插件&#xff0c;适用于小型到中型的在线商店。 Magento&#xff1a;一个功能强大和灵活的开源电子商务平台&am…...

编程日记 2025/3/4 23:14:28

WordPress如何防Webshell、防篡改、防劫持，提升WP漏洞防护能力

WordPress是一款世界知名的CMS系统&#xff0c;不仅可以创建博客网站&#xff0c;还可以用于建设企业网站、下载网站、商城等各类网站。功能非常强大、结构科学合理&#xff0c;深受广大用户喜欢。 虽然WordPress非常优秀&#xff0c;但是为了保障网站安全&#xff0c;我们还是…...

编程日记 2025/3/4 23:13:26

Android Flow 示例

在Android开发的世界里&#xff0c;处理异步数据流一直是一个挑战。随着Kotlin的流行&#xff0c;Flow作为Kotlin协程库的一部分&#xff0c;为开发者提供了一种全新的方式来处理这些问题。今天&#xff0c;我将深入探讨Flow的设计理念&#xff0c;并通过具体的例子展示如何在实…...

编程日记 2025/3/4 23:12:24

刚安装docker并启动docker服务： systemctl restart docker报错解决

root:/home/lzw# sudo systemctl restart docker Job for docker.service failed because the control process exited with error code. See "systemctl status docker.service" and "journalctl -xeu docker.service" for details. 1、问题描述 启动doc…...

编程日记 2025/3/4 23:09:21

xss笔记与打靶(更新中)

这个文章好 https://blog.csdn.net/huangyongkang666/article/details/123624164?fromshareblogdetail&sharetypeblogdetail&sharerId123624164&sharereferPC&sharesource2401_88818565&sharefromfrom_link 什么是xss XSS&#xff08;跨站脚本攻击&…...

编程日记 2025/3/4 23:08:20

游戏引擎学习第133天

仓库:https://gitee.com/mrxiao_com/2d_game_3 回顾并设定今天的主题 今天的任务是进一步优化背景资源的流式加载&#xff0c;尤其是在内存管理方面。昨天&#xff0c;我们实现了资源流式加载&#xff0c;让游戏在加载时可以动态地加载背景&#xff0c;而不是一开始就把所有资…...

编程日记 2025/3/4 23:06:15

【鸿蒙操作系统】- 1：实习阶段的一些总结

本文目录 1. 序2.鸿蒙与欧拉的概念微内核LiteOS鸿蒙微内核POSIX标准 3.实习干了些什么身份鉴别访问控制恶意代码防范安全审计入侵防范性能压测检查系统版本网络测试常见的linux测试命令 1. 序 之前在某国企实习的时候&#xff0c;有幸参与了鸿蒙系统、鸿蒙欧拉的项目&#xff…...

编程日记 2025/3/4 23:05:14

Qt基础入门-详解

前言 qt之路正式开启 &#x1f493; 个人主页&#xff1a;普通young man-CSDN博客 ⏩ 文章专栏&#xff1a;C_普通young man的博客-CSDN博客 ⏩ 本人giee: 普通小青年 (pu-tong-young-man) - Gitee.com 若有问题 评论区见&#x1f4dd; &#x1f389;欢迎大家点赞&#x1f44…...

编程日记 2025/3/4 23:04:12

【前端】HTML 备忘清单（超级详细！）

文章目录 入门hello.html注释 Comment段落 ParagraphHTML 链接Image 标签文本格式标签标题Section Divisions内部框架HTML 中的 JavaScriptHTML 中的 CSS HTML5 标签页面标题导航HTML5 TagsHTML5 VideoHTML5 AudioHTML5 RubyHTML5 kdiHTML5 progressHTML5 mark HTML 表格Table …...

编程日记 2025/3/4 23:03:10

版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点

版图自动化连接算法开发 00004 ------ 给定一个点，添加一个中间点实现 Manhattan 方式连接两个给定的坐标点 引言正文引言 必读文章 ------ 版图自动化连接算法开发 00001 ------ 直接连接两个给定的坐标点。 此处，我们对给定点的坐标进行一下限制，因为是只添加一个点，因…...

编程日记 2025/3/4 23:01:06

C# Enumerable类 之 数据筛选

总目录 前言 在 C# 中&#xff0c;System.Linq.Enumerable 类是 LINQ&#xff08;Language Integrated Query&#xff09;的核心组成部分&#xff0c;它提供了一系列静态方法&#xff0c;用于操作实现了 IEnumerable 接口的集合。通过这些方法&#xff0c;我们可以轻松地对集合…...

编程日记 2025/3/4 23:00:03

Grafana服务安装并启动

Grafana服务安装并启动 1、介绍2、下载Grafana3、解压缩文件4、启动Grafana服务5、增加数据源,填写Prometheus访问地址6、增加图表 1、介绍 Grafana是一个开源的可视化系统监控和警报工具包。 2、下载Grafana 介绍&#xff1a;Grafana是一个开源的可视化系统监控和警报工具包…...

编程日记 2025/3/4 22:59:01

蓝桥杯web第三天

展开扇子题目&#xff0c; #box:hover #item1 { transform:rotate(-60deg); } 当悬浮在父盒子&#xff0c;子元素旋转 webkit display: -webkit-box&#xff1a;将元素设置为弹性伸缩盒子模型。-webkit-box-orient: vertical&#xff1a;设置伸缩盒子的子元素排列方…...

编程日记 2025/3/4 22:58:00

C#开发——时间间隔类TimSpan

TimeSpan 是 C# 中的一个结构&#xff08; struct &#xff09;&#xff0c;用于表示时间间隔或持续时间。它位于 System 命名空间中&#xff0c;是处理时间相关操作时非常重要的工具&#xff0c;尤其是在计算两个日期或时间之间的差值、表示时间段或执行时间相关的运算…...

编程日记 2025/3/4 22:56:58

Oracle查询表空间大小

1 查询数据库中所有的表空间以及表空间所占空间的大小 SELECTtablespace_name,sum( bytes ) / 1024 / 1024 FROMdba_data_files GROUP BYtablespace_name; 2 Oracle查询表空间大小及每个表所占空间的大小 SELECTtablespace_name,file_id,file_name,round( bytes / ( 1024 …...

编程新知 2025/9/21 0:48:40

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/9/20 16:15:20

理解 MCP 工作流：使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

编程新知 2025/9/21 5:21:49

oracle与MySQL数据库之间数据同步的技术要点

Oracle与MySQL数据库之间的数据同步是一个涉及多个技术要点的复杂任务。由于Oracle和MySQL的架构差异&#xff0c;它们的数据同步要求既要保持数据的准确性和一致性&#xff0c;又要处理好性能问题。以下是一些主要的技术要点&#xff1a; 数据结构差异 数据类型差异&#xff…...

编程新知 2025/8/12 3:03:43

站群服务器的应用场景都有哪些？

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...

编程新知 2025/9/1 19:01:24

多模态图像修复系统：基于深度学习的图片修复实现

多模态图像修复系统：基于深度学习的图片修复实现 1. 系统概述 本系统使用多模态大模型（Stable Diffusion Inpainting）实现图像修复功能，结合文本描述和图片输入，对指定区域进行内容修复。系统包含完整的数据处理、模型训练、推理部署流程。 import torch import numpy …...

编程新知 2025/9/9 21:28:16

【前端异常】JavaScript错误处理：分析 Uncaught (in promise) error

在前端开发中&#xff0c;JavaScript 异常是不可避免的。随着现代前端应用越来越多地使用异步操作&#xff08;如 Promise、async/await 等&#xff09;&#xff0c;开发者常常会遇到 Uncaught (in promise) error 错误。这个错误是由于未正确处理 Promise 的拒绝&#xff08;r…...

编程新知 2025/7/6 8:20:01

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

编程新知 2025/9/21 6:00:22

用鸿蒙HarmonyOS5实现国际象棋小游戏的过程

下面是一个基于鸿蒙OS (HarmonyOS) 的国际象棋小游戏的完整实现代码&#xff0c;使用Java语言和鸿蒙的Ability框架。 1. 项目结构 /src/main/java/com/example/chess/├── MainAbilitySlice.java // 主界面逻辑├── ChessView.java // 游戏视图和逻辑├── …...

编程新知 2025/8/21 20:40:56

Springboot 高校报修与互助平台小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;高校报修与互助平台小程序被用户普遍使用&#xff0c;为…...

编程新知 2025/9/19 22:32:05