【四二学堂】html页面跳转传值方法

本方法比较原始,不喜勿喷

//源页面
Window.location.href="record.html?recId="+recId;

目标页面

function getUrlParam (name) {
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if (r!= null) {
        return unescape(r[2]);
     }else{
        return null;
     }
}

var targetId = getUrlParam('recId');

类似键值对的形式,亲测可用。

好的,我可以为你解答这个问题。 首先,我们可以使用HTML编写页面结构,如下所示: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>电脑学堂</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header"> <h1>电脑学堂</h1> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">课程</a></li> <li><a href="#">关于我们</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </div> <div class="content"> <div class="sidebar"> <h2>课程列表</h2> <ul> <li><a href="#">HTML教程</a></li> <li><a href="#">CSS教程</a></li> <li><a href="#">JavaScript教程</a></li> <li><a href="#">Python教程</a></li> </ul> </div> <div class="main"> <h2>欢迎来到电脑学堂</h2> <p>这里提供各种计算机编程技术的学习和实践,让你掌握最新的技能。</p> </div> </div> <div class="footer"> <p>版权所有 © 2021 电脑学堂</p> </div> </body> </html> ``` 接着,我们可以使用CSS来进行布局和样式设计。以下是一个简单的CSS样式表,可以帮助我们实现电脑学堂页面的布局: ```css /* 设置全局样式 */ * { margin: 0; padding: 0; box-sizing: border-box; } /* 设置页面主体背景颜色 */ body { background-color: #f2f2f2; } /* 设置页眉样式 */ .header { background-color: #333; color: #fff; padding: 20px; display: flex; justify-content: space-between; align-items: center; } /* 设置页脚样式 */ .footer { background-color: #333; color: #fff; text-align: center; padding: 10px; } /* 设置导航栏样式 */ nav ul { list-style: none; display: flex; } nav ul li { margin-right: 20px; } nav ul li a { color: #fff; text-decoration: none; } /* 设置侧边栏样式 */ .sidebar { background-color: #fff; padding: 20px; width: 25%; float: left; } .sidebar h2 { margin-bottom: 10px; } .sidebar ul { list-style: none; } .sidebar ul li { margin-bottom: 10px; } .sidebar ul li a { color: #333; text-decoration: none; } /* 设置主要内容区域样式 */ .main { background-color: #fff; padding: 20px; width: 75%; float: left; } .main h2 { margin-bottom: 10px; } .main p { line-height: 1.5; } ``` 最后,我们将HTML和CSS文件保存在同一个文件夹中,然后在浏览器中打开HTML文件,就可以看到我们制作的“电脑学堂”页面了。 希望这个答案能够帮到你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值