<!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; }