关于这个前端，我觉得css是最难搞的，方法很多，，，
设置border，1px，solid，black
padding也很重要，设置标签里文字，的位置，text-align,text-decoration
// 左侧菜单栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级菜单</title>
<style>
.item {
background-color: blue;
border: 1px solid black;
font-size: 30px;
}
.c1 {
background-color: darkgreen;
20%;
text-align:center;
font-size:30px;
}
.hide{
display:none;
}
</style>
<script src="jQuery-3.4.1.js"></script>
</head>
<body>
<div class="c1">一级菜单
<div class='item'>111</div>
<div class='item'>222</div>
<div class='item'>333</div>
</div>
<div class="c1">二级菜单
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<div class="c1">三级菜单
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
<script>
$('.c1').click(function () {
$(this).children().removeClass('hide').parent().siblings().children().addClass('hide');
})
</script>
</body>
</html>
// 一个表格栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>狗</title>
<style>
#d1{
330px;
height:410px;
background-image : url('background.png');
padding-top:10px;
margin:20px auto;
}
#d2{
font-size:24px;
color : white;
padding-left:15px;
margin:0 0 0 30px;
border-left: 10px solid greenyellow;
}
#d3{
list-style-image:url("li.png");
background: white;
margin:-7px 0;
}
#d4{
height:350px;
300px;
background: white;
margin:5px 15px 0;
padding:13px 0 0 0;
}
p{
margin : -5px 0 3px -20px;
}
li{
margin : 0;
color : blue;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2">爱宠知识</div>
<div id="d4">
<ul id="d3">
<!-- <li>养狗比养猫对健康更有利</li>-->
<!-- <li>日本正宗柴犬亮相，你怎么看柴犬</li>-->
<!-- <li>狗狗歌曲《新年旺旺》</li>-->
<!-- <li>带宠兜风，开车带宠需要注意什么？</li>-->
<!-- <li>【爆笑】这狗狗太不给力了</li>-->
<!-- <li>狗狗与男童相同着装拍有爱造型照</li>-->
<!-- <li>狗狗各个阶段健康大事件</li>-->
<!-- <li>调皮宠物狗陷在沙发里的搞笑瞬间</li>-->
<!-- <li>为什么每次大小便后都会用脚踢土</li>-->
</ul>
</div>
</div>
<script>
data={
'1':'养狗比养猫对健康更有利',
'2':'日本正宗柴犬亮相，你怎么看柴犬',
'3':'狗狗歌曲《新年旺旺》',
'4':'带宠兜风，开车带宠需要注意什么？',
'5':'【爆笑】这狗狗太不给力了',
'6':'狗狗与男童相同着装拍有爱造型照',
'7':'狗狗各个阶段健康大事件',
'8':'调皮宠物狗陷在沙发里的搞笑瞬间',
'9':'为什么每次大小便后都会用脚踢土',
};
ulEle = document.getElementById('d3');
for(let k in data){
liEle = document.createElement('li');
spanEle = document.createElement('p');
liEle.innerText =data[k];
spanEle.innerText='﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍﹍';
ulEle.appendChild(liEle);
ulEle.appendChild(spanEle)
}
</script>
</body>
</html>
// 拟态框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<script src="jQuery-3.4.1.js"></script>
<style>
#d1{
background-color: darkgreen;
}
#d2{
z-index:99;
background-color: rgba(0,0,0,0.5);
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
}
#d3{
z-index:100;
height:400px;
600px;
background-color:white;
position:fixed;
top:50%;
left:50%;
margin-left:-300px;
margin-top:-200px;
}
.hide{
display:none;
}
</style>
</head>
<body>
<button id="buttonid2">登录</button>
<div id="d1">最后一层</div>
<div id="d2">good</div>
<div id="d3">
username:<input type="text">
password:<input type="password">
<button id="buttonid1">取消</button>
</div>
<script>
$('#buttonid1').on('click',function (){
$('#d3').addClass('hide');
$('#d2').addClass('hide');
});
$('#buttonid2').on('click',function(){
$('#d3').removeClass('hide');
$('#d2').removeClass('hide');
});
</script>
</body>
</html>