第一次写的网页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原味</title> <style> /*<!--去除默认-->*/ *{ margin: 0; } /* 给最上面的条加上修饰*/ #div1{ z-index: 2; position: fixed; background-color:#59a1e9; height: 48px; left: 0px; right: 0px; } /* 给all盒子加在父级里面*/ #div-1{ position: absolute; left:150px; right: 150px; height: 48px; background-color: #59a1e9; } /*每个文字的排布*/ .p{ position: static; height: 48px; width: 80px; display: inline-block; font-size: x-large; color: beige; margin-left: -4px; margin-top: 0; cursor:pointer; } .pp{ position: absolute; margin-top: 8px; margin-left: 15px; } /* 将所有的文字标签整体改动*/ #something{ position: absolute; width: 600px; left: 40px; height: 48px; background-color:#59a1e9; } /*搜索标签*/ #search{ position: absolute; right: 0px; height: 23px; background-color: #59a1e9; margin-top: 10px; } .inp{ height: 23px; } .button{ height: 30px; cursor:pointer; } /* 身体的部分*/ #bodys{ background-color: darkblue; margin-top: 0px; height: auto; } /*整个左面的盒子*/ #choice{ left: 38px; margin-top: 53px; position: fixed; float: none; } /*整个盒子里面分的块*/ .choice{ display: block; height: 40px; width: 200px; margin-top: 7px; background-color: #59a1e9; color: white; cursor:pointer; } /*左面盒子里面的p标签*/ .choice_p{ position: absolute; left: 75px; margin: 10px; } /*整个右面的盒子*/ #noves{ position: static; z-index: 0; float:right; margin-top:48px; background-color: white; /*border:solid white;*/ /*border-left: white;*/ /*border-top-color: white;*/ height: 3000px; width: 1350px; left: 300px; } .noves{ position: relative; background-color: white; height: 100px; width: 1100px; left: 246px; margin-top: 25px; } .xinwen{ position: absolute; float: left; height: 100px; width: 950px; left: 15px; background-color: white; border:solid; border-color: white white black white; border-width: 1px; /*border-bottom-right: 8px;*/ /*border-bottom-left: 8px;*/ /*border-top-left: 8px;*/ /*border-top-right: 8px;*/ } .imag{ position: absolute; right: 20px; height: 100px; width: 100px; } a:hover{ background-color: darkblue; } #loging{ position: absolute; display: inline-block; height: 48px; width: 90px; background-color: #59a1e9; right: -15px; /*margin-right: 0px;*/ /*float: left;*/ /*margin-left: 0;*/ } .loging1{ position: absolute; height: 48px; width: 48px; margin-top: 13px; cursor:pointer; color: #c0cddf; } #loging{ position: absolute; margin-right: 40px; } .logingsss{ position: absolute; right: 20px; margin-top: 13px; cursor:pointer; color: darkgray; color: #c0cddf; } .ppp{ background-color: darkblue; } u:hover{ background-color: #59a1e9; color: white; } </style> <script src="jquery-3.4.1.js"></script> </head> <body> <!--头的部分--> <div id="div1" class="div"> <div id="loging" class="loging"> <div id="loging1" class="loging1"><a><u>登陆</u></a></div> <div id="loging2" class="logingsss"><a><u>注册</u></a></div> </div> <div id="div-1" class="div"> <div id="something"> <a id="p" class="div p ppp" onclick="onclicks(this)"><p class="pp">主页</p></a> <a id="p1" class="div p" onclick="onclicks(this)"><p class="pp">八卦</p></a> <a id="p2" class="div p" onclick="onclicks(this)"><p class="pp">新闻</p></a> <a id="p3" class="div p" onclick="onclicks(this)"><p class="pp">图片</p></a> <a id="p4" class="div p" onclick="onclicks(this)"><p class="pp">军事</p></a> <a id="p5" class="div p" onclick="onclicks(this)"><p class="pp">小说</p></a> </div> <div id="search" class="div"> <form onsubmit="return check()" method="get"> <input id="inp1" class="inp" name="search_text" type="text" value="搜索..." onfocus="focuss(this)" onblur="blurs(this)"> <input id="inp2" class="inp button" type="submit" value="搜索"> </form> </div> </div> </div> <!--身体的部分--> <div id="bodys" class="div"> <div id="choice" class="div"> <a class="choice"><p id="choice1" class="choice_p">选择</p></a> <a class="choice"><p id="choice2" class="choice_p">圆形</p></a> <a class="choice"><p id="choice3" class="choice_p">矩形</p></a> <a class="choice"><p id="choice4" class="choice_p">放形</p></a> </div> <div id="noves" class="div"> <div id="noves-1" class="noves"> <div id="xinwen1" class="xinwen">asdasd</div> <div id="imag1" class="imag"><img src="images.jpg" height="100" width="100"></div> </div> <div id="noves-2" class="noves"> <div id="xinwen2" class="xinwen"> fbs,ajfgjksdhagfkjasdfa dfsd fsdfffffffffffffffsdfsdfdsfsd </div> <div id="imag2" class="imag"><img src="images.jpg" height="100" width="100"></div> </div> <div id="noves-3" class="noves"> <div id="xinwen3" class="xinwen"> fbs,ajfgjksdhagfkjasdfa dfsd fsdfffffffffffffffsdfsdfdsfsd </div> <div id="imag3" class="imag"><img src="images.jpg" height="100" width="100"></div> </div> <div id="noves-4" class="noves"> <div id="xinwen4" class="xinwen"> fbs,ajfgjksdhagfkjasdfa dfsd fsdfffffffffffffffsdfsdfdsfsd </div> <div id="imag4" class="imag"><img src="images.jpg" height="100" width="100"></div> </div> <div id="noves-5" class="noves"> <div id="xinwen5" class="xinwen"> fbs,ajfgjksdhagfkjasdfa dfsd fsdfffffffffffffffsdfsdfdsfsd </div> <div id="imag5" class="imag"><img src="images.jpg" height="100" width="100"></div> </div> <div id="noves-6" class="noves"> <div id="xinwen6" class="xinwen"> fbs,ajfgjksdhagfkjasdfa dfsd fsdfffffffffffffffsdfsdfdsfsd </div> <div id="imag6" class="imag"><img src="images.jpg" height="100" width="100"></div> </div> </div> </div> <script> <!-- 这个函数就是将改变括号里面的东西--> function focuss(self) { var valuse_text=$(self).val(); if (valuse_text=="搜索..."){ $(self).val(""); } } function blurs(self) { var value_text=$(self).val() if(value_text.length==0){ $(self).val("搜索..."); } } <!-- 这里的作用就将头的伪类给加上--> function onclicks(self) { $(self).addClass("ppp"); $(self).siblings().removeClass("ppp"); } //这里的作用是将提交的内容做一个判断 function check() { var text=$(":text").val(); if (text=="1111"){ return false; } else { return true; } } </script> </body> </html>