创建项目
file-new-Dynamic web Project
输入名称-完成配置
右击项目-new-html file-填写名称
创建配置web服务器
空白处右击创建servers
创建完毕后加一条前端语句展示<center>欢迎加入魏红斌平台</center>，之前的教学里也讲了语句如何使用，可以看一下之前的笔记
选择播放按钮，选择总是使用
展示成功界面
创建web.xml
复制代码运行，同时把图片复制到webapp下，名字改成test.jpg
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>红斌系统</title> <style> #banner,#content,#foot{width:760px;margin:0 auto;} #banner{ text-align:center; height:50px; background:#ab0; border-top:1px solid #f00; padding-top:10px; padding-left:8px; margin-top:-10px; font-size:30px; font-weight:bold; letter-spacing :0.5em; } #content{ margin-top:5px; height:300px; background:#fba; } #foot{ margin-top:5px; height:150px; background:#aba; text-align:center; } #left{ margin-top:5px; width:150px; height:200px; float:left; border:1px solid #0ba; margin-right:5px; } #center{ margin-top:5px; width:300px; height:200px; float:left; border:1px solid #f00; margin-right:5px; } #right{ width:280px; height:180px; float:left; border:1px solid #0ff; } </style> </head> <body> <span style="white-space:pre"> </span><div id="banner">页首</div> <! --调用定义的格式--> <span style="white-space:pre"> </span><div id="content"> <span style="white-space:pre"> </span><div id="left"> <h1>字体样式</h1> <!-- 字体样式 --> <h2 style="background-color:red">背景颜色<h2> <!-- 背景颜色 --> <h3 style="text-align:center">文本对齐</h3> <!-- 文本对齐 --> <p style="font-family:arial;color:green;font-size:20px;">字体字样</p> <!-- 字体样式 --> </div> <span style="white-space:pre"> </span><div id="center"> <form action="#" onsubmit="alert(' 姓名:'+ name.value +'\n 电话:'+ tel.value +'\n 年龄:'+ age.value +'\n 性别:'+sex.value)"> <!-- 表单，同时输出页面 --> name:<br> <input type="text" name="name"> <!-- 表字段 --> <br> tel:<br> <input type="text" name="tel"> <br> age:<br> <input type="text" name="age"> <br> sex:<br> <input type="radio" name="sex" value="man">man <!-- 表选钮 --> <input type="radio" name="sex" value="woman">woman <input type="radio" name="sex" value="oldwoman">oldwoman <br> <br> <input type="submit" name="提交"> <!-- 表按钮 --> <input type="reset" name="重置"> <!-- 表按钮 --> <br> </div> <span style="white-space:pre"> </span><div id="right"> <img src="test.jpg" width="280px" height="180px" alt="图像标签"> <!-- url记录图片位置 --> </div> <span style="white-space:pre"> </span></div> <span style="white-space:pre"> </span><div id="foot"> <table border="1"> <!-- html表格边框 --> <tr> <!-- html表格 --> <th>表头1</th> <th>表头2</th> </tr> <tr> <td>行1，列1</td> <td>行1，列2</td> </tr> <tr> <td>行2，列1</td> <td>行2，列2</td> </tr> </table> <a href="https://www.baidu.com">百度一下</a> <!-- 超链接 --> <p>段落文本</p> <!-- 段落 --> </div> </body> </html>
展示成果
