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

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

news 2025/7/21 10:06:19

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

目录

  • 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

多云管理“拦路虎”：深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

编程新知 2025/7/20 18:38:14

业务系统对接大模型的基础方案：架构设计与关键步骤

业务系统对接大模型&#xff1a;架构设计与关键步骤 在当今数字化转型的浪潮中&#xff0c;大语言模型&#xff08;LLM&#xff09;已成为企业提升业务效率和创新能力的关键技术之一。将大模型集成到业务系统中&#xff0c;不仅可以优化用户体验&#xff0c;还能为业务决策提供…...

编程新知 2025/7/20 18:36:23

应用升级/灾备测试时使用guarantee 闪回点迅速回退

1.场景 应用要升级,当升级失败时,数据库回退到升级前. 要测试系统,测试完成后,数据库要回退到测试前。 相对于RMAN恢复需要很长时间&#xff0c; 数据库闪回只需要几分钟。 2.技术实现 数据库设置 2个db_recovery参数 创建guarantee闪回点&#xff0c;不需要开启数据库闪回。…...

编程新知 2025/6/17 3:47:36

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/7/16 3:56:57

React Native 开发环境搭建（全平台详解）

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

编程新知 2025/7/14 21:22:23

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

编程新知 2025/7/20 5:57:19

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

编程新知 2025/7/4 14:40:43

C# 类和继承(抽象类)

抽象类 抽象类是指设计为被继承的类。抽象类只能被用作其他类的基类。 不能创建抽象类的实例。抽象类使用abstract修饰符声明。 抽象类可以包含抽象成员或普通的非抽象成员。抽象类的成员可以是抽象成员和普通带 实现的成员的任意组合。抽象类自己可以派生自另一个抽象类。例…...

编程新知 2025/7/19 4:32:01

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/7/8 16:12:53

python报错No module named ‘tensorflow.keras‘

是由于不同版本的tensorflow下的keras所在的路径不同&#xff0c;结合所安装的tensorflow的目录结构修改from语句即可。 原语句&#xff1a; from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后&#xff1a; from tensorflow.python.keras.lay…...

编程新知 2025/6/21 22:37:01