作为一个美工烂到家的人，每次想写点网页都很痛苦。
备忘，待完善。
css：
body {
background-color: #f2f2f2;
}
.container {
90%;
margin: 0 auto;
}
.top {
text-align: center;
background-color: #FF5722;
}
.top-text {
font-size: 30px;
color: white;
display: inline-block;
margin-top: 30px;
margin-bottom: 25px;
}
.menu {
margin-top: 15px;
font-size: large;
}
a {
margin-left: 50px;
margin-right: 50px;
text-decoration:underline;
}
.content {
border-style: dashed;
border- 1px;
border-color: black;
margin-top: 15px;
text-align: center;
}
.span-text {
display: block;
padding-top: 15px;
padding-bottom: 15px;
}
.bottom {
text-align: center;
}
.bottom-text {
display: block;
margin-top: 20px;
}
html：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="/layui/css/layui.css"> <script src="/layui/layui.js"></script> <script src="/js/jquery-3.4.1.min.js"></script> <link rel="stylesheet" type="text/css" href="/css.css"> </head> <body> <div class="container"> <div class="top"><span class="top-text">XXX</span></div> <div class="layui-row menu"> <div class="layui-col-sm3"> <a href="">XXX</a> </div> <div class="layui-col-sm3"> <a href="">XXX</a> </div> <div class="layui-col-sm3"> <a href="">XXX</a> </div> <div class="layui-col-sm3"> <a href="">XXX</a> </div> </div> <div class="content"> <span class="span-text">XXX</span> </div> <div class="bottom"><span class="bottom-text">XXX</span></div> </div> </body> </html>