1.世纪佳缘用户名 显示隐藏内容
2.京东关闭广告(二与三差不多直接写了三)
3.新浪下拉菜单(微博即可 )
4.开关灯案例
上码
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
font-size: 14px;
}
.nav {
margin: 100px;
background-color: antiquewhite;
}
.nav > li {
position: relative;
float: left;
width: 80px;
height: 41px;
text-align: center;
}
.nav li a {
display: block;
width: 100%;
height: 100%;
line-height: 41px;
color: #333;
}
.nav > li > a:hover {
background-color: #eee;
}
.nav ul {
display: none;
position: absolute;
top: 41px;
left: 0;
width: 100%;
border-left: 1px solid #fecc5b;
border-right: 1px solid #fecc5b;
}
.nav ul li {
border-bottom: 1px solid #fecc5b;
}
.nav ul li a:hover {
background-color: #fff5da;
}
</style>
</head>
<body>
<!-- //作业1 -->
<input class="sjjy" type="text" value="用户名" />
<!-- 作业3 -->
<!-- <div class="box">
<p class="text">商品</p>
</div> -->
<ul class="nav">
<li>
<a href="#">微博</a>
<ul>
<li>
<a href="">私信</a>
</li>
<li>
<a href="">评论</a>
</li>
<li>
<a href="">@我</a>
</li>
</ul>
</li>
</ul>
<!-- 作业4 -->
<button id="btn">开关灯</button>
<script>
var text = document.querySelector(".sjjy");
text.onfocus = function () {
if (text.value === "用户名") {
text.value = "";
}
this.style.color = "#333";
};
text.onblur = function () {
if (text.value === "") {
text.value = "用户名";
}
};
//作业3
var nav = document.querySelector(".nav");
var lis = nav.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onmouseover = function () {
this.children[1].style.display = "block";
};
lis[i].onmouseout = function () {
this.children[1].style.display = "none";
};
}
//作业4
var btn = document.querySelector("#btn");
var flag = 0;
btn.onclick = function () {
if (flag === 0) {
document.body.style.backgroundColor = "black";
flag = 1;
} else {
document.body.style.backgroundColor = "#fff";
flag = 0;
}
};
6501
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
