web项目初建--布局上的考虑
在我之前写的内容：web项目初建--Vue.js初使用(https://www.jianshu.com/p/4d9634fa3379)中，实现了如下的页面效果
其中main.css是我自己设计的样式文件，并没有给出代码。这篇文章中重点记录下这个文件的编写过程。
1.初版
这是我自己写的第一个程序，目的是为了实现上述效果，html和css的布局和设计其实有非常多的方法，没有刻板的要求，更没有对错。
在最初写的时候，就是页面打开后最大化的状态，其实非常容易实现上面的布局，但之后网页大小改变的时候就乱了套。在页面缩小过程中，串行、覆盖搞得我头疼。在更改一阵依然没有什么效果之后，请教了同事，很快就改好了。
2.调试
页面F12后能看到布局，从而根据属性值进行更改，但里面有些内容由于学习的不够，不知道影响是什么，影响又有多大，所以怎么改都不行。
float：元素浮动属性，基本限制元素左右的布局，在大小更改的时候，不会出现右边的元素跑到左边的现象。
!important：布局应用高优先级，使用的是bootstrap框架，框架里可能设置了某些属性为!important，或者在某范围遵循不一样的规则，导致自己怎么改都无效。
可以在F12下更改页面大小，就能看出，某些属性在不同宽高范围下值是不同的，我们可以在css中重新更改。
例如"float: right!important; "令几个控件始终表现为固定的左右方向。
我的导航条中首先是三块的布局，在不断的缩小中无法全部显示，所以需要考虑隐藏，
可以通过@media实现
@media screen and (max-width: 800px) {
#menu_list { display: none; }
}
@media screen and (max-width: 450px) {
.navbar-right { display: none; }
}
3.完整代码
body {
font-size: 24px;
position: relative;
overflow-x: hidden;
height: 100%;
background-color: #FFFFFF;
}
.container {
position: relative;
min-height: 1px;
padding-left: 0px;
padding-right: 0px;
width: 100%;
height: 55px;
}
.navbar {
height: 55px;
border-radius: 0px;
}
#titleImg {
height: 40px;
width: 40px;
margin-top: 5px;
margin-left: 20px;
margin-right: 2px;
float: left;
}
.navbar-inverse .navbar-brand {
padding-left: 2px;
padding-top: 16px;
font-size: 28px;
color: #F08080;
}
.navbar-nav > li {
float: left;
}
.navbar-nav > li > a {
height: 50px;
padding: 15px 3px;
}
#menu_list {
padding-left: 10%;
margin: -4px 0px;
}
#menu_list > li {
height: 50px;
padding: 0px 15px;
line-height: 1;
}
.nav > li > a > img {
height: 30px;
max-width: none;
vertical-align: -35%;
margin-right: 2px;
}
#app {
color: #9d9d9d;
float: right!important;
margin: 0;
margin-right: 5px;
}
#timeP {
font-size: 25px;
margin-bottom: 0px;
margin-top: 2px;
height: 28px;
}
#dateP {
margin: 0px;
font-size: 12px;
}
@media screen and (max-width: 800px) {
#menu_list { display: none; }
}
@media screen and (max-width: 450px) {
.navbar-right { display: none; }
}
总结一下，在布局中要考虑大小改变情况下的布局表现，以及过小情况下局部隐藏的规则。
4.修改登录页面布局
在web项目初建--Bootstrap初使用(https://www.jianshu.com/p/5aeaa3f4c07c)中，写了一个登录页面，在页面放大缩小时，登录部分的控件会出现大小改变、串行等现象，重新设计了布局，代码如下
login.jsp
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>HaveFun</title>
<script type="text/javascript" src="/static/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/login.css">
</head>
<body>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
<div class="container col-xs-8 col-sm-6 col-md-5 col-lg-4">
<form class="form-horizontal" method="post" action="/user/login">
<div class="form-inline">
<label class="control-label">用户名：</label>
<input type="text" class="form-control" name="userName">
</div>
<div class="form-inline">
<label class="control-label">密码：</label>
<input type="text" class="form-control" name="password">
</div>
<div class="form-group">
<div>
<button type="submit" class="btn btn-default">登录</button>
</div>
</div>
</form>
</div>
<div class="col-xs-1 col-sm-3 col-md-4 col-lg-5"/></div>
</div>
</body>
</html>
login.css
body{
background: url('/static/image/background.jpg') no-repeat;
width: 100%;
}
.row{
margin: 200px 0 0;
}
.form-horizontal{
margin-top: 30px;
}
.form-inline
{
margin-bottom: 15px;
}
.control-label
{
width: 60px;
display: inline-block;
margin-bottom: 0;
padding-top: 7px;
vertical-align: middle;
text-align: right;
}
.form-control
{
display: inline-block;
width: auto;
vertical-align: middle;
}
.btn{
width: 120px;
margin-left: 110px;
}
