<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>soda</title>
<link rel="stylesheet" type="text/css" href="justify.css">
</head>
<body class="flex">
<!--侧边栏-->
<div style="padding:10px;align-items:center;justify-content: center;border-bottom: 1px solid;">
<img src="./咩咩.jpg" width="100" height="100" />
<div style=" color: aliceblue;margin-left: 20px;margin-top: 10px; margin-bottom: 30px;" >eMAY</div>
<div style="font-style: inherit;margin-bottom: 5px;">导航栏</div>
<div class="daoHang marginb">学习html</div>
<div class="daoHang marginb">学习CSS</div>
<div class="daoHang marginb">学习VUE</div>
</div>
<!--主区域-->
<div class="flex1 flex column marginl">
<!--头部栏-->
<div style="height: 30px;" class="bgwhite blockst1"> something </div>
<!--内容区-->
<div class="flex1 margint">
<div> 写点什么呢？ </div>
</div>
</div>
</body>
</html>
body{
margin: 0;
height: 100vh;
background-color: rgb(197, 218, 218);
}
/*{
border: 1px solid rgb(11, 8, 11);
}*/
.one{
border-style: dotted;
border-color: rgb(24, 210, 27);
border-width: 2px;
}
.flex{
display: flex;
}
.flex1{
flex:1;
}
.blockst1{
background-color: rgb(177, 226, 207);
text-align: center;
text-shadow: rgb(0, 0, 0);
font-size: large;
padding: 40px;
}
.blockst2{
max-width: 700px;
margin: 30px auto;
padding: 15px;
line-height: 1.7;
}
.column{
flex-direction: column;
}
/* 导航条 */
.daoHang {
padding: 10px 20px;
border-bottom: 1px solid rgb(201, 201, 201);
font-size: 14px;
color: #666;
}
.bgwhite{
background-color: aliceblue;
}
.marginb{
margin-bottom: 5px;
}
.margint{
margin-top: 15px;
}
.marginl{
margin-left: 5px;
}
.marginr{
margin-right: 5px;
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/tech/pnotes/279240.html