第一次写的网页
<!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>