前天没咋弄，所以没啥好写的，摸了，昨天写了个静态页面，效果图：
代码也没啥东西，但我推荐两个网站，我按钮的颜色，背景音乐的src就是这两个网站获取的，实在是太香了：好看的色块，音乐链接。
还是放下代码吧：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="css1.css"> <link rel="stylesheet" href="svg/iconfont.css"> <title>登录界面</title> </head> <body> <audio src="http://music.163.com/song/media/outer/url?id=445781493.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio> <div id="bigBox"> <h1>LOGIN</h1> <div class="inputBox"> <div class="inputText"> <span class="iconfont icon-denglu-yonghu"> <input type="Text" placeholder="Username"> </span> </div> <div class="inputText"> <span class="iconfont icon-denglu-mima"> <input type="password" placeholder="password"> </span> </div> <div class="inputText"> <input type="button" class="inputButton" value="登录"> </div> </div> </div> </body> </html>css的：
body{ margin:0; padding:0; background-image: url("2.jpg"); background-repeat: no-repeat; max-width: 100%; max-height:100%; background-size: cover; } #bigBox{ padding:20px 50px; position: absolute; left: 0; right: 0; bottom: 0; top:0; margin: auto; background-color: #00000090; width: 350px; height: 300px; border-radius: 10px; text-align: center; } #bigBox h1{ color:white; } #bigBox .inputBox{ margin-top:50px; } #bigBox .inputBox .inputText{ margin-top:20px; } #bigBox .inputBox .inputText input{ /*border:0;*/ padding:10px 10px; border-bottom: 1px solid white; background-color:#00000000; color:white; } #bigBox .inputBox .inputButton{ width:125px; height: 20px; color:white; margin-top:5px; box-sizing:content-box;//button文字不居中 border-radius: 20px; text-align: center; background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); } #bigBox .inputBox .inputText span{ font-size: 20px; color:skyblue; }之后开始了jquery的学习，被一个小问题卡了半天，script放body之前时，由于函数加载是body还没加载，所以里面的div之类的都是不存在的，所以鼠标点击事件无法生效，我还以为是兼容问题还是我函数写错了搞了半天，后来吧script放在body后面就跑成功了，我直接哭出了声。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../jquery-1.11.3.min.js"></script> </head> <style type="text/css"> div{ border:1px solid green; } </style> <body> <div id="myDiv">6666</div> <div id="my">111</div> <div class="d1">222</div> <div class="d2" ><span>333</span></div> <input type="text" value="qifei" id="text1"> <input type="button" value="点击" id="b1"> </body> <!--/*jquery可以多次使用页面加载函数 js不行--> <!--jquery与dom对象不能直接使用 要转换过：--> <!--dom->jq $(dom对象)--> <!--jq->dom jq对象[索引] 或者 jq对象.get(索引)--> <!--*/--> <script type="text/javascript"> // $(function(){ // /*先dom->div*/ // var mu=document.getElementById("myDiv"); // alert(mu.innerHTML); // var $mydiv=$('#myDiv');//jquery对象都加一个￥ 规范 括号里#mydiv是id选择器 // alert($mydiv.html());//引用时jquery.html() // var $mm=$(mu); // $mm.html('你是一个div');//修改了myDiv.innerHTML的内容 // //jq->dom // var d1 =$mydiv[0]; // var d2=$mydiv.get(0); // // var $mudiv=$('#my'); // // var d3=$mydiv[1]; // alert(d1.innerHTML); // }); //jq中的事件都是函数 //获取样式 jq对象.css('样式名称')； //设置样式:jq对象.css('样式名称'，'样式的属性值')； //siblings前后兄弟 //属性选择器 选择各种样子的属性 基本过滤选择器 过滤一些基本元素 //text和html详情看函数 $("#b1").click(function () { $('#my').css('background-color','red'); $('input[type="text"]:enabled').val('哈哈'); console.log("这是d1的text内容"+$(".d1").text()); console.log("这是d2的html内容"+$(".d2").text()); $(".d1").text("<h1>h1标题标签</h1>"); $(".d1").html("<h1>h1标题标签</h1>"); console.log("这是修改后的d1的text内容"+$(".d1").text()); console.log("这是修改后d2的html内容"+$(".d2").html()); }); //函数务必放在body后面 放前面页面还没加载出来是不存在div什么的！！！ </script> </html>有很多看了以后没用过，以后用到了估计才会去see。
