创建:布局&头部
项目结构(使用IDEA实现,接上一篇)
1.项目下可能没有web.xml文件
产生原因:
web服务器从3.0开始,默认不再创建web.xml
解决方案:
1.)打开项目结构面板(点击右上角)
或点击左上角 文件 -> 项目结构 打开
- )选择 Facet ,点击 Web(my-music),点击 部署描述符 下最右边的 “+”按钮,选择 web.xml
3.)在打开的界面中在 /WEB-INF/ 之前加入 src/main/webapp ,然后点击确定,效果如下
加入之后:
然后点击确定。
4.)点击面板右下角的确定按钮完成创建。
2.建立html头文件
1)在webapp下创建一个HTML文件
2)命名为index,回车即可
3)在index.html中写代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Music</title>
<link rel="stylesheet" href="music.css">
</head>
<body>
<div class="music">
<div class="music-head">
<h1>My Music</h1>
<div class="search">
<input type="text" required placeholder="请输入歌名,歌手,专辑">
<button>搜索</button>
</div>
</div>
<div class="music-hot"></div>
<div class="music-list"></div>
</div>
</body>
</html>
注意
写HTML时要边写边测试,写完保存时可能会遇到不能保存的问题:
产生原因:
由于jetty在服务器运行是会默认认锁定静态资源文件,所以无法进行保存和修改。
解决方案:
1.关闭服务器:2.在wel.xml中添加以下的代码:
<servlet> <servlet-name>default</servlet-name> <init-param> <param-name>useFileMappedBuffer</param-name> <param-value>false</param-value> </init-param> </servlet>
加入后Ctrl+s保存
完整的web.xml代码如下:
注意:
web.xml中,default报红
产生原因:
是因为IDEA在检查语法错误时,会认定,这个servlet缺少 标签,所以报红
解决方案
由于default Servlet的 在服务器中的根 web.xml 中已经配置,所以忽略即可
4)
3.在webapp下创建一个css文件
1)在webapp下创建一个CSS文件
2)命名为music,回车即可
3)注意
注意
在css中保存文件时出现:不能保存的情况时,直接关闭服务器即可保存。
/*设置body和html的高度为窗口高度*/
body,html{
height: 100%;
}
/*设置body样式*/
body{
margin: 0;/*去除body的默认的8px的margin,防止出现滚动条*/
display: flex;/*将body中的元素布局修改为弹性盒子布局*/
justify-content: center;/*水平居中(主轴居中)*/
align-items: center;/*垂直居中(交叉轴居中)*/
}
.music{
width: 940px;
height: 100%;
background: white;
}
.music .music-head{
height:60px;
display:flex;/*将body中的元素布局修改为弹性盒子布局*/
justify-content: space-between;/*水平布局为两端布局*/
align-items: center;/*垂直居中(交叉轴居中)*/
padding-right: 15px;/*设置右边的间距,将搜索框往左移动15px*/
background: aquamarine;
}
.music .music-head .search{
border: 1px solid #2457ab;/*为整个搜索区域添加一个灰色的边框*/
height: 32px;/*设置搜索框的高度为32px*/
display:flex;/*将body中的元素布局修改为弹性盒子布局*/
align-items: self-start;/*设置垂直布局为顶部对齐*/
}
/* :valid 表示通过验证的表单项 */
/* :focus 元素得到焦点 */
.music .music-head .search input:valid ~ button,
.music .music-head .search input:focus ~ button{
display: inline;/*设置元素为行内元素(显示)*/
transition: all .5s;/*添加过渡动画,持续时长为0.5s*/
}
.music .music-head .search input{
border: 0;/*去除输入框的边框*/
outline: none;/*去除输入框得到焦点是显示的边框*/
line-height: 30px;/*设置行高*/
height: 30px;/*设置高度*/
font-size: 1.2rem;/*设置字体大小为body元素字体大小的1.2 倍*/
}
.music .music-head .search button{
border: 0;
background-color: #fff;
height: 100%;
display: none;
transition: all .5s;
}
/*设置鼠标悬停在按钮时的样式*/
.music .music-head .search button:hover{
cursor: pointer;/*鼠标指针变为手型*/
background: chartreuse;/*设置背景颜色*/
}
.music .music-hot{
height: 750px;
background: #2457ab;/*辅助开发的,开发完成后需要进行删除*/
}
.music .music-list{
height: calc(100% - 810px);/*歌曲高度为窗口高度-头部区域(60px)-热门区域(750px)*/
min-height: 200px;/*防止窗口高度小于等于头部区域+热门区域的高度,导致歌曲列表不显示*/
background: greenyellow;/*辅助开发的,开发完成后需要进行删除*/
}