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

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

news 2025/11/11 2:58:49

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

目录

  • 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

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

编程新知 2025/11/9 18:17:26

日语AI面试高效通关秘籍：专业解读与青柚面试智能助攻

在如今就业市场竞争日益激烈的背景下&#xff0c;越来越多的求职者将目光投向了日本及中日双语岗位。但是&#xff0c;一场日语面试往往让许多人感到步履维艰。你是否也曾因为面试官抛出的“刁钻问题”而心生畏惧&#xff1f;面对生疏的日语交流环境&#xff0c;即便提前恶补了…...

编程新知 2025/11/8 17:05:14

ES6从入门到精通：前言

ES6简介 ES6&#xff08;ECMAScript 2015&#xff09;是JavaScript语言的重大更新&#xff0c;引入了许多新特性&#xff0c;包括语法糖、新数据类型、模块化支持等&#xff0c;显著提升了开发效率和代码可维护性。 核心知识点概览 变量声明 let 和 const 取代 var&#xf…...

编程新知 2025/8/18 16:42:44

ubuntu搭建nfs服务centos挂载访问

在Ubuntu上设置NFS服务器 在Ubuntu上&#xff0c;你可以使用apt包管理器来安装NFS服务器。打开终端并运行&#xff1a; sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享&#xff0c;例如/shared&#xff1a; sudo mkdir /shared sud…...

编程新知 2025/8/27 13:05:41

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

编程新知 2025/11/7 20:04:37

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/11/8 2:25:57

企业如何增强终端安全？

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

编程新知 2025/11/7 20:00:19

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/10/2 5:21:30

Spring是如何解决Bean的循环依赖：三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中，Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌，形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路，例如： 双向依赖：Bean A 依赖 Bean B，同时 Bean B 也依赖 Bean A（A↔B）。链条循环： Bean A → Bean…...

编程新知 2025/7/25 1:21:53

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

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

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