包装<a href=

本文介绍了一种通过JavaScript实现的表单提交方法,该方法利用创建隐藏表单元素并提交的方式来实现对ID等敏感信息的隐藏,适用于需要保护用户隐私的场景。
脚本的实现:
function ALinkWraper(target_v,obj){//封装一个联接为form的形式并使用post的方式提交,从而做到对ID的隐藏效果
    var f = document.createElement('form');
 f.style.display = 'none';
 alert(target_v.parentNode.tagName);
 target_v.parentNode.appendChild(f);
 var hid_v = document.createElement('input');
 hid_v.type = 'hidden';
 hid_v.name = obj.name
 hid_v.value = obj.value;
    f.appendChild(hid_v);
 f.method = obj.method;
 f.action =obj.action;
 f.target=obj.target;
 f.submit(); return false;
}

调用脚本方法
<meta charset="utf-8"> <link href="css/all.css" rel="stylesheet" media="all" type="text/css" /> <title>国潮风零食</title> </head> <body> <div class="top"> <div class="center"> <div class="fl">欢迎来到国潮风零食商城</div> </div> </div> <header> <div class="logos"> <img src="images/logo.jpg" width="196"> <img src="images/logo.jpg" width="196"> <img src="images/logo.jpg" width="196"> <img src="images/logo.jpg" width="196"> <img src="images/logo.jpg" width="196"> <img src="images/logo.jpg" width="196"> </div> <div class="menu"> <ul class="center"> <li style="background:#FF6633"><a href="index.html">首页</a></li> <li style="background:#6666CC"><a href="list.html">商品</a></li> <li style="background:#009999"><a href="reg.html">注册</a></li> <li style="background:#CC6699"><a href="login.html">登录</a></li> </ul> <div class="clear"></div> </div> </header> <div class="banner center"><img src="images/timg.jpg" width="100%" /></div> <div class=" center"> <div class="fu"> <div class="pics scrollleft"> <ul> <li> <a href="info.html"> <p><img src="images/0.jpg" width="100%" height="250"/></p> <div class="bar"> <strong >杂粮小麻花</strong> <p class="description">采用全谷物杂粮制作,非油炸工艺,低脂健康,香脆不腻,适合办公室下午茶或孩子课间加餐。</p> <h2>¥18.9</h2> </div> </a> </li> <li> <a href="info.html"> <p><img src="images/1.jpg" width="100%" height="250"/></p> <div class="bar"> <strong >口口酥</strong> <p class="description">层层酥脆,入口即化,奶香浓郁,独立小包装方便携带,追剧必备小零嘴!</p> <h2>¥14.9</h2> </div> </a> </li> <li> <a href="info.html"> <p><img src="images/2.jpg" width="100%" height="250"/></p> <div class="bar"> <strong >干果王国</strong> <p class="description">混合优质坚果与果干,富含蛋白质与膳食纤维,天然无添加,健身人士与全家共享的能量补给站。</p> <h2>¥28.9</h2> </div> </a> </li> </ul> <div class="clear"></div> </div> </div> </div> <div class="end"> <p>版权所有 </p> </div> </body> </html> 怎么把LOGO和菜单上下对齐
11-05
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>酒店管理系统 - 首页</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;margin:0;background:#f5f5f5;} header {background:#2c3e50;color:#fff;padding:20px;text-align:center;} .section {background:#fff;padding:20px;margin:20px auto;max-width:1200px;border-radius:8px; box-shadow:0 2px 4px rgba(0,0,0,0.1);} .section h2 {margin-top:0;color:#34495e;} .rooms {display:flex;flex-wrap:wrap;gap:20px;} .room-card {flex:1 1 calc(33% - 20px);background:#ecf0f1;border-radius:6px;overflow:hidden;} .room-card img {width:100%;height:150px;object-fit:cover;} .room-card .info {padding:10px;display:flex;align-items:center;} .room-card .info img {width:50%;height:auto;margin-right:12px;} .room-card .info .info-text a {font-weight:bold;color:#2c3e50;text-decoration:none;} .room-card .info .info-text a:hover {text-decoration:underline;} .room-card .info .info-text p {margin:4px 0 0;color:#555;font-size:0.9em;} .gallery {display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;} .gallery a {display:block;} .gallery img {width:100%;height:150px;object-fit:cover;border-radius:4px;} .my-order{display:inline-block;background:#2c3e50;color:#fff;padding:10px 15px; border-radius:5px 0 0 0;text-decoration:none;font-weight:bold; box-shadow:0 2px 6px rgba(0,0,0,0.2);} .my-order:hover{background:#34495e;} .footer{text-align:right;padding:15px;background:transparent;} @media (max-width:768px){ .room-card {flex:1 1 calc(50% - 20px);} } @media (max-width:480px){ .room-card {flex:1 1 100%;} } </style> </head> <body> <header> <h1>星辉酒店管理系统</h1> </header> <h3>酒店地址: 长春市南关区博硕路</h3> <section id="rooms" class="section"> <div class="rooms"> <div class="room-card"> <h2>酒店房型</h2> <div class="room-types"> <div class="info"> <img src="" alt="标准房"> <div class="info-text"> <a href="#">标准房</a> <p>舒适大床,免费WiFi,早餐含在内。</p> </div> </div> <div class="info"> <img src="" alt="双床房"> <div class="info-text"> <a href="#">双床房</a> <p>一张双人床,适合两人入住。</p> </div> </div> <div class="info"> <img src="" alt="家庭房"> <div class="info-text"> <a href="#">家庭房</a> <p>一张大床和一张小床,适合家庭入住。</p> </div> </div> <div class="info"> <img src="" alt="豪华套房"> <div class="info-text"> <a href="#">豪华套房</a> <p>独立客厅、卧室,设施齐全。</p> </div> </div> </div> </div> </div> </section> <section id="gallery" class="section"> <h2>酒店照片</h2> <div class="gallery"> <!-- 把每张图片包装成链接,src 参数会在 photo.html 中读取 --> <a href="photo.html?src=images/酒店大堂.jpg" target="_blank"> <img src="D:\HTML\Hotel\images/酒店大堂.jpg" alt="大堂"> </a> <a href="photo.html?src=images/酒店泳池.webp" target="_blank"> <img src="D:\HTML\Hotel\images/酒店泳池.webp" alt="泳池"> </a> <a href="photo.html?src=images/餐厅.jpg" target="_blank"> <img src="D:\HTML\Hotel\images/餐厅.jpg" alt="餐厅"> </a> <a href="photo.html?src=images/健身房.jpg" target="_blank"> <img src="D:\HTML\Hotel\images/健身房.jpg" alt="健身房"> </a> <a href="photo.html?src=images/洗衣房.jpg" target="_blank"> <img src="D:\HTML\Hotel\images/洗衣房.jpg" alt="洗衣房"> </a> <a href="photo.html?src=images/会议室.webp" target="_blank"> <img src="D:\HTML\Hotel\images/会议室.webp" alt="会议室"> </a> </div> </section> <footer class="footer"> <a href="#" class="my-order">我的订单</a> </footer> </body> </html> 为什么图片不显示
最新发布
11-22
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值