idea创建web项目入门（登录静态页面）

大概步骤如下：

1、创建项目并设置classes、lib；

2、设置Tomcat

3、编辑页面

具体步骤如下：

1、创建项目并设置classes、lib

idea中点击file——new——project，按照下图中设置

项目命名为testproject

找到web——WEB-INF下并新建classes、lib 两个文件夹

在项目testproject文件上右键选择project structure（或者ctrl+shift+alt+s）,此时弹出如下弹窗

在paths分页中选择use module compile。。。。然后 选择下边的output path和test outputpath都选择刚才创建的classes

在dependencies分页中选择右侧“+”，选择jars or directories.....点击apply，点击OK

2、设置Tomcat

接下来设置Tomcat，在如下图位置选择edit configuration。。。。

在server中如下图设置

切换至deployment分页，做如下设置：

此时Tomcat已经设置完毕，开启Tomcat（即点击如下图中的△符号）

我们打开index.jsp页面，

之后在浏览器中访问http://localhost:8080/web/index.jsp

3、编辑页面

接下来我们编辑创建login.html和login.css文件

login.html代码如下：

    
    

    



    
Login
    

        
        
        登录
    

login.css中的代码如下：

html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-style: normal;
}

body {
    width: 100%;
    height: 100%;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    background-color: #4A374A;
}

#login {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width: 300px;
    height: 300px;
}

#login h1 {
    color: #fff;
    text-shadow: 0 0 10px;
    letter-spacing: 1px;
    text-align: center;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

input {
    width: 278px;
    height: 18px;
    margin-bottom: 10px;
    outline: none;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    text-shadow: 1px 1px 1px;
    border-top: 1px solid #312E3D;
    border-left: 1px solid #312E3D;
    border-right: 1px solid #312E3D;
    border-bottom: 1px solid #56536A;
    border-radius: 4px;
    background-color: #2D2D3F;
}

.but {
    width: 300px;
    min-height: 20px;
    display: block;
    background-color: #4a77d4;
    border: 1px solid #3762bc;
    color: #fff;
    padding: 9px 14px;
    font-size: 15px;
    line-height: normal;
    border-radius: 5px;
    margin: 0;
}

此时访问：http://localhost:8080/web/login.html，结果如下图