1.一键改变多个div属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.item{
background-color: #dddddd;
}
.item:hover{
color: red;
}
/*给不同的子div设置不同的hover属性，即一键给不同的div改变不同的样式*/
.item:hover .a {
background-color: yellow;
}
.item:hover .b{
background-color: black;
}
</style>
</head>
<body>
<div class="item">
<div class="a">222</div>
<div class="b">bbbb</div>
</div>
</body>
</html>
2.给搜索框设置默认字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 600px;margin: 0 auto">
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />
<!--onfocus动作，获取焦点-->
<input type="text" placeholder="关键字"/>
</div>
<script>
function Focus() {
var tag = document.getElementById(‘i1‘);
var val = tag.value;
if(val == ‘请输入关键字‘){
tag.value = ‘‘;
}
}
function Blur() {
var tag = document.getElementById(‘i1‘);
var val = tag.value;
if(val.length == 0){
tag.value = "请输入关键字"
}
}
</script>
</body>
</html>
3.自动删除弹出框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="s1"></div>
<input type="button" value="删除" onclick="del();" />
<script>
function del() {
document.getElementById(‘s1‘).innerText = ‘已删除‘;
setTimeout(function () {
document.getElementById(‘s1‘).innerText = ‘‘;
},3000)
}
</script>
</body>
</html>
4.引用图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> #指定rel和href，href是图标文件的路径，包含所有图标，
一般用.min.css这个压缩版
<style>
.item{
background-color: #dddddd;
}
.item:hover{
color: red;
}
.item:hover .b{
background-color: green;
}
</style>
</head>
<body>
<div class="item">
<div class="a">
<i class="fa fa-superpowers" aria-hidden="true"></i>
i标签跟a标签一样，class指定图标
</div>
<div class="b">456</div>
</div>
</body>
</html>
5.后台管理界面实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.right{
float: right;
}
.pg-header{
height: 48px;
background-color: #2459a2;
color: white;
line-height: 48px;
min-width: 600px; # div最小宽度，他等于menu和content宽度之和
}
.pg-header .logo{ #左边‘明天你好的属性’
width: 200px;
background-color: #204982;
text-align: center;
}
.pg-header .icons{ #右边图标的属性
padding: 0 20px; #内边距（图标到div边框的距离）：上下为0，左右为20px
}
.pg-header .icons:hover{
background-color: #204982;
}
.pg-header .user{ #右边为用户名属性
margin-right: 60px;
padding: 0 20px;
color: white;
height: 48px;
}
.pg-header .user:hover{
background-color: #204982;
}
.pg-header .user .a img{ #右边头像的属性，头像div在用户名div内
height: 40px;width: 40px;margin-top: 4px;border-radius: 50%;
}
.pg-header .user .b{ #头像的下拉菜单属性，这里边的文字一般左靠齐
z-index: 20;
position: absolute;
top: 48px;
right: 0;
background-color: white;
color: black;
width: 160px;
display: none; #默认不显示该下拉菜单
font-size: 14px;
line-height: 30px;
}
.pg-header .user .b a{ #下拉菜单中的文字属性
padding: 5px;
color: black;
text-decoration: none;
}
.pg-header .user .b a:hover{
background-color: #dddddd;
}
.pg-header .user:hover .b{
display: block;
}
.pg-header .user .b a{
display: block;
}
.pg-content .menu{ #左边菜单栏属性
position: absolute;
top:48px;
left: 0;
bottom: 0;
width: 200px;
background-color: #dddddd;
}
.pg-content .content{
position: absolute;
top: 48px;
right: 0;
bottom: 0;
left: 200px;
overflow: auto;#与position: absolute;联用，就会使左边菜单栏固定在屏幕上
并且自己也有滚动条
z-index: 9;
min-width: 400px;
}
</style>
</head>
<body>
<div class="pg-header">
<div class="logo left">
明天你好
</div>
<div class="user right" style="position: relative">
<a class="a" href="#">
<img src="22.jpg">
</a>
<div class="b">
<a href="#">我的资料</a>
<a href="#">注销</a>
</div>
</div>
<div class="icons right">
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<span>5 </span>
</div>
<div class="icons right">
<i class="fa fa-bell-o" aria-hidden="true"></i>
</div>
</div>
<div class="pg-content">
<div class="menu left">a</div>
<div class="content left">
<!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
<!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>-->
<div style="background-color: purple">
<p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
<p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p>
</div>
</div>
</div>
<div class="pg-footer"></div>
</body>
</html>
详细细节见视频day16 后台管理界面实现1-5
时间： 2024-08-26 15:38:16