目录
一、使用记事本写一个html文件
(1)新建记事本文档,后缀改为XXX.html.(此时的图像为360浏览器的原因是我设置的360浏览器为默认打开的浏览器)
(2)导入基本框架,如下代码段。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
(3)开始编写body基本内容
顶部栏
<!------顶部栏------->
<div class="top">
<h1> K的博客</h1>
</div>
主图栏
<!------主图栏------->
<div class="mainimg">
<img src="D:\Microsoft VS Code\VScode demo\demo\img\QQ截图20210618122123.png" alt="">
</div>
表格栏
<!------表格栏------->
<div class="bg">
<table>
<tr>
<th>天数</th>
<th>标题</th>
<th>链接</th>
</tr>
<tr>
<td>第一天</td>
<td>CSDN实训实战任务挑战-java环境变量配置及第一个代码</td>
<td><a href="https://blog.csdn.net/baibaibubaisay/article/details/120978393" target="_blank" rel="noopener noreferrer">打开链接</a></td>
</tr>
<tr>
<td>第二天</td>
<td>CSDN实训实战任务挑战-注释、格式化输出与薪资转化工具</td>
<td>
<a href="https://blog.csdn.net/baibaibubaisay/article/details/120990978" target="_blank" rel="noopener noreferrer">打开链接</a></td>
</tr>
<tr>
<td>第三天</td>
<td>CSDN实训实战任务挑战-安装部署Tomcat服务</td>
<td>
<a href="https://blog.csdn.net/baibaibubaisay/article/details/121011900" target="_blank" rel="noopener noreferrer">打开链接</a></td>
</tr>
<tr>
<td>第四天</td>
<td></td>
<td>打开链接</td>
</tr>
<tr>
<td>第五天</td>
<td></td>
<td>打开链接</td>
</tr>
</table>
</div>
尾部栏
<!------尾部栏------->
<div class="bottomBox">
<div class="ulBox">
<ul>
<li>D</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
</ul>
<ul>
<li>S</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
</ul>
<ul>
<li>K</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
</ul>
<ul>
<li>blog</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
<li>information</li>
</ul>
</div>
</div>
(5)打开html文件,大致如下所示
二、加入CSS布局
总体
body {
margin: 0;
padding: 0;
list-style: none;
}
顶部
/*************顶部********************/
.top {
width: 100%;
height: 40 px;
background-color: black;
}
.top h1 {
font-size: 30px;
color: azure;
margin: 0 auto;
text-align: center;
line-height: 40px;
}
主图
/*************主图********************/
.mainimg {
width: 100%;
height: 753 px;
}
.mainimg img {
display: block;
margin: 0 auto;
}
表格
/*************表格********************/
.bg table {
width: 100%;
border: 1px solid;
border-collapse: collapse;
}
.bg table tr {
height: 30px;
border: 1px solid;
font-size: 14px;
}
.bg table tr th {
font-weight: 900;
color: black;
}
.bg table tr td {
text-align: center;
}
.bg table tr:nth-of-type(2n) {
background-color: darkgrey;
}
.bg table tr td a {
text-decoration: none;
color: blue;
cursor: pointer;
}
底部信息栏
/*******底部信息栏*********/
ul li {
list-style: none;
}
.bottomBox {
width: 100%;
height: 300px;
background-color: #535151;
padding-top: 40px;
}
.bottomBox .ulBox {
width: 880px;
height: 118px;
margin: 40px auto;
}
.bottomBox .ulBox ul {
width: 20%;
height: 100%;
float: left;
}
.bottomBox .ulBox ul li {
line-height: 20px;
height: 20px;
font-size: 10px;
text-decoration: none;
}
.bottomBox .ulBox ul li:first-child {
font-weight: bold;
font-size: 12px;
color: #000000;
margin-bottom: 24px;
}
此时的效果为
三、诸多其他尝试
(1)各个标签
音频标签
<audio src="audio.wav">
多媒体播放标签
<video src="" autoplay="autoplay"></video>
表单标签
<form>
input(各种元素)
</form>
等等
(2)导航菜单
body部分
<body>
<div>
<ul>
<li>新闻</li>
<li>视频</li>
<li>图片</li>
<li>军事</li>
<li>体育</li>
<li>NBA</li>
<li>娱乐</li>
</ul>
</div>
</body>
style部分
<style>
body {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
list-style: none;
}
div {
width: 100%;
height: 40px;
background-color: blue;
}
div ul {
width: 70%;
height: 40px;
margin: 0 auto;
}
div ul li {
width: 13%;
height: 40px;
color: white;
margin: 0 auto;
font-size: 30px;
text-align: center;
cursor: pointer;
display: inline-block;
cursor: pointer;
}
div ul li:hover {
background-color: aqua;
color: cadetblue;
}
显示结果
(3)替换Tomcat的主图
将html文件和图片移动到tomcat安装位置\webapps\ROOT中,改html文件名为index.html,修改html中的img的图片定位。启动startup。bat,在浏览器中打开Tomcat默认网页,发现如下问题,所有img标签失效。示意图如下:
在寻求训练营的队友和老师帮助后了解到,在给予一定提示后,我意识到:此时的地址并不是我原来想的D:\apache-tomcat-9.0\webapps\ROOT,在tomcat工作下,地址就在tomcat文件夹的内部,所以只需要把"D:\apache-tomcat-9.0\webapps\ROOT\图片名称"改成"图片名称"即可解决此问题。
任务完成!!!