代码
JS 一个按钮控制网页背景音乐的开始暂停
<script src="jquery.js"></script><div class="audio_div" style="background:url(按钮图片) no-repeat center bottom;background-size:cover;"> <audio id="mp3Btn" autoplay loop> <source src="音频地址" type="audio/mpeg" /> </audio> </div><script> //播放器控制 var audio = document.getElementById('mp3Btn'); $('.audio_div').click(function(){ //防止冒泡 event.stopPropagation(); if(audio.paused) //如果当前是暂停状态 { $('.audio_div').css("background","url(播放状态按钮) no-repeat center bottom"); $('.audio_div').css("background-size","cover"); audio.play();//播放 return; } //当前是播放状态 $('.audio_div').css("background","url(暂停状态按钮) no-repeat center bottom"); $('.audio_div').css("background-size","cover"); audio.pause(); //暂停 });</script>
没有反应啊 ，只有歌曲单曲循环。 没有控制的按钮。
audio_div里的图片就是控制按钮啊，
如何用文本编辑器记事本手工编写网页代码
第一步：在空文件夹中单击右键，选择“新建--文本文档”。然后这个空文件夹里立即多了一个名为“新建 文本文档.txt”的文件。将此文件后缀"txt"改名为"html"。例如：1.html这样，一个没有网页代码和内容的一个空网页就建成了。哇噻，看见了吗？你的第一个网页。怎不令人激动和兴奋呢！所有的过程只是键入几个单词而已。也可以是相对的，相对于当前页面来说。所以，假设你有另外一个HTML文档“flyingmoss.html”，其中一行代码可以写成<a href="flyingmoss.html">The miracle of moss in flight</a> ，诸如此类。连接不仅可以连接到其他的HTML文档，也可以连接到页面上的其他文件。连接还可以转到页面的其他部分。你可以给几乎所有的标签增加id属性，比如<h2 id="moss">Moss</h2>，然后连接到它，像是这样做：<a href="#moss">Go to moss</a>，点击这个连接会直接滚动到带有这个id的元素。注意a标签允许你为连接打开新窗口，而不是取代当前窗口，初听起来似乎是一个不错的主意，因为它不会让用户离开你的页面。但是，有很多理由证明，你不应该这样做。从易用性的观点来看，这种方法破坏导航。最常用的导航工具是浏览器上的“后退”，打开新窗口使这个功能失去了作用。更广泛地，还是从易用的观点来看，用户不需要到处都是弹出的新窗口。如果用户需要打开新窗口，他们有权利（是的，有权利。不要强行干涉别人意志，不是很好吗？在一般情况下，建议你尽量不要使用新窗口——译者注）让自己来控制。---------------------------------图像都是文本的话看起来让人感到乏味和无聊，自然，网页不应该仅仅是文本而已（呵呵，对于一些技术性的文档，我想，文本就已经严重足够了——译者注），它是多媒体的，最常见的形式就是图像。图像标签img用来为HTML添加图像，像下面这样改进你的代码：<img src="" /> src属性告诉浏览器图像的地址。就像a标签一样，它可以是绝对的，如示范所示，但时候它是相对的。比如，你拥有自己的图像且已经另存为alienpie.jpg放置在images文件夹下，代码可以这样写<img src="images/alienpie.jpg"...长度属性width和高度属性height是必需的（Zeldman的“恶名昭著”的《Designing with Web Standards中说，width和height不是必须的，这可以节省带宽。平时做网页我也不喜欢用这两个属性。——译者注），因为浏览器在下载过程中能够计算出图像占据的空间，否则浏览器可能会产生一个页面的跳跃，因为事先并不知道图像要占用多少空间，以致于破坏页面布局。alt属性表示可替代的描述。这是为不能或者不选择图像显示的客户端着想（比如终端浏览器lynx，不能显示图片，但可显示alt中的文本。最坏的情况是，你写错了图片的文件名或者路径，即使在图形浏览器中图片显示不出，但仍可显示出alt中的文本，不会让访问者造成不必要的误解。什么情况下我们都推荐你，一定记得使用alt。——译者注）。在最新版本的HTML版本中，这是不可缺少的属性。注意给网页创做图像虽然不是本站的主题，但我们还是有一些对你有用的东西要说。经常被用到的图像格式是GIF和JPEG。他们都是压缩过的格式，有各自十分不同的用途。GIF图像不超过256色，但可以保持原有图像的色彩。色数越低，图像文件就越小。GIF应该用在有纯质颜色的图像上。JPEG使用十分精确的算法来压缩图像，对原图像有些微的改变。压缩程度越低，图像文件越大，从而图像更清晰。JPEG应该使用在要逼真描绘的诸如摄影的图像上。网页设计初学者需要处理的文件可能就是图像文件了，忽视图像过大是初学者常犯的错误。网页下载应该尽可能快，想想看，一个使用少于7kb每秒的Modem联网的人要用多少时间来下载你的整个页面。你必须在图像质量和图像文件大小之间作出选择。许多现代的图像处理软件允许用最佳方式压缩图像，但同样是一个冒险，或者产生错误。译者有话说：显然，现在还没有谁推荐PNG格式的图像，可能只因为IE对其糟糕的支持。GIF到目前为止还没有解决专利问题，使用它还是得冒侵权之危险。PNG很有潜力，同样也具有透明能力，色数也不止GIF的可怜的256色而已，却具有JPEG的高清晰、高保真度，这也是我，以个人的立场向你推荐的原因。---------------------------------------------表格漫步万维网世界，有多少HTML表格被用来布局页面，还一度被滥用。我们会在CSS高级指南中学习怎样不用表格布局页面。表格的正确用处应该是，展示表格式的数据。有很多标签可以用在表格中，在初级指南中教授表格是如何工作的确实是一件比较困难的事情，没有关系，我们一步一步来，先来看一个例子。例子什么时候都是学习的好方法。
html怎么设计 左侧是菜单栏，点击不同的菜单选项在右侧出现相应的内容？
大致思路左侧：菜单，给每个菜单设置id和onclick点击事件，onclick事件触发的函数假设写为display()右侧：写个固定样式的div，id假设设置为board。如果你的菜单内容在服务器display()的实现如下12345678function display(){ $.ajax({ type: "POST", url: 菜单所请求的内容地址, data: this.id等等相关的请求标志, success: funtion(data){$('board').html(data)},//返回数据填充 dataType: dataType});}如果菜单内容写死在页面内那么右侧：写和菜单数一样多的div，把所有的display属性设置为none同时display()的实现如下123function display(){ $('#'+$(this).attr('rel')).style.display='block';}以上，伪代码，仅供参考
html网页设计：一个简单的登录界面代码！
<!doctype html><html><head><meta charset="utf-8"><link href="main.css" type="text/css" rel="stylesheet"><title>登陆界面</title></head><body> <div class="login_ico"> <img src="images/login_ico.png"> </div> <div class="login_putin"> <ul> <li><input type="text" ></li> <li><input type="password" ></li> </ul> </div> <div class="login_btn"> <input type="submit" value="登陆"> </div></body></html>样式 ：*{ margin:0; padding:0;}li{ list-style-type:none; margin:0; padding:0;}a{ text-decoration:none; color:#000;}/*---------------------按钮-----------------------------*/.login_putin ul li input{ margin: 0; width:70%; padding: 1em 2em 1em 5.4em; -webkit-border-radius:.3em; -moz-border-radius: .3em; border: 1px solid #999;}.login_btn{ width:300px; margin:40px auto 0 auto;}.login_btn input{ width:100%; margin:0; padding:.5em 0; -webkit-border-radius:.3em; -moz-border-radius: .3em; border:#1263be solid 1px; background:#1b85fd; color:#FFF; font-size:17px; font-weight:bolder; letter-spacing:1em;}.login_btn input:hover{ background:#1263be; }
