简单的网页布局
Posted wanjinliu
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了简单的网页布局相关的知识，希望对你有一定的参考价值。
作为一个美工烂到家的人，每次想写点网页都很痛苦。
备忘，待完善。
css：
body {
background-color: #f2f2f2;
}
.container {
width: 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-width: 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>
以上是关于简单的网页布局的主要内容，如果未能解决你的问题，请参考以下文章
如何通过单击片段内的线性布局从片段类开始新活动？下面是我的代码，但这不起作用