个人博客的扩充

最新推荐文章于 2024-07-25 11:52:08 发布

秃头知一

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量145

点赞数 1

文章标签： html 前端

本文链接：https://blog.csdn.net/dwd1114/article/details/121064807

版权

昨天我们创建了一个简单的个人博客已经对Tomcat默认页面换为我们个人博客的操作，今天我们对其进行扩充，首先我们需要下载一个替换记事本的软件，我们这里下载sublime

流程如下：

Sublime的下载链接：

Download - Sublime Text

我们打开此链接，出现如下界面：

我们选择压缩包下载

下载完成之后将文件解压到自己想要的路径下面，如下图：

我们双击打开此文件

就可以在此界面内进行html 的编写。

今天进行扩充的内容有导航栏下拉菜单，下拉菜单的跳转以及点击退出按钮退出界面，下拉菜单效果如下：

座右铭界面如下：

跳转个人博客就是直接跳转到csdn上的个人博客界面

留言板界面效果为：

退出按钮就是点击导航栏上的退出按钮即可直接退出。

代码如下：

<!-- 使用HTML5的标准进行文档解析 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 引入与网页相关的描述及配置信息 -->
<head>
	<meta charset="UTF-8">
	<title>秃头知一</title>
<style>
	.picture{width:100%;height:100%}
	.biao{margin-top:-160px;margin-left:800px}
	.a{text-align:center;font-size:70px;color:white;margin-top:-490px;margin-left:-900px}
	.a1{text-align:center;font-size:70px;color:white;margin-top:px;margin-left:-700px}
	.a2{font-size:30px;color:white;margin-top:10px;margin-left:400px}
	.a3{margin-top:-450px;margin-left:1200px}
	.a4{position: relative;}
	ul li a:link{background-color:white;text-decoration: none;}
	ul li a:hover{color: #FF7F50;background-color: #000000;}
	ul li{display:inline-block;}
	ul li a{width: 0px;height:20px;margin-right: 10px;}
	ul li ul{position: absolute;top:20px;left: -40px; display: none;width:100px}
	ul li:hover ul{display: block;color:white}
</style>
</head>
<!-- 正文 -->
<body>
	<div class="picture">
	<img src="03.png"alt=""/>
	</div>
	<div class="a">
	任何的限制，
	</div>
	<div class="a1">
	都从自己的内心开始
	</div>
	<div class="a2">
	——秃头知一个人博客
	</div>
	<div class="biao">
	<table border="5 solid black"align="center"bordercolor="red">
	<tr>
		<th style="color:white">天数</th>
		<th style="color:white">标题</th>
		<th style="color:white">地址</th>
	</tr>
	<tr>
		<td style="color:white">第一天</td>
		<td style="color:white">Java：从零到在编译软件中运行“Hello World”</td>
		<td> <a href="https://blog.csdn.net/dwd1114/article/details/120983037" target="_blank">打开链接</a></td>
	</tr>
	<tr>
		<td style="color:white">第二天</td>
		<td style="color:white">Java基础内容介绍以及薪资转换系统</td>
		<td><a href="https://blog.csdn.net/dwd1114/article/details/121004545" target="_blank" >打开链接</a></td>
	</tr>
	<tr>
		<td style="color:white">第三天</td>
		<td style="color:white">汤姆历险记（Tomcat下载，安装与启动）</td>
		<td><a href="https://blog.csdn.net/dwd1114/article/details/121025532" target="_blank">打开链接</a></td>
	</tr>
	<tr>
		<td style="color:white">第四天</td>
		<td style="color:white">标题</td>
		<td style="color:white">地址</td>
	</tr>
	<tr>
		<td style="color:white">第五天</td>
		<td style="color:white">标题</td>
		<td style="color:white">地址</td>
	</tr>
	</table>
	</div>
	<div class ="a3">
       	 <ul>
           	 	<li class="a4"><a href="">首页</a>
                        	<ul>
                           	 <li><a href="a.html">座右铭</a></li>
                           	 <li><a href="https://blog.csdn.net/dwd1114?spm=1000.2115.3001.5343">个人博客</a></li>
                           	 <li><a href="b.html">留言板</a></li>
                        	</ul>
		</li>
           		<li><a href="">个人中心</a></li>
           	 	<li><a href="">设置</a></li>
           	 	<li><a ><input type="button" name="close" value="退出" onclick="window.close();" /></a></li>
       	 </ul>
	</div>
	</div>
</body>
</html>

其中跳转个人博客的时候会直接跳转到csdn上的个人博客，座右铭界面的代码如下：

<!-- 使用HTML5的标准进行文档解析 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 引入与网页相关的描述及配置信息 -->
<head>
	<meta charset="UTF-8">
	<title>秃头知一的座右铭</title>
<style>
	.picture{width:100%;height:100%}
	.z{font-size:50px;color:#00FFFF;margin-top:-630px;font-style:italic;margin-left:100px;}
	.a{width:28%;height:400px;background-color:#F0F8FF;margin-left:1100px;margin-top:10px}
	.a1{font-size:30px;margin-left:150px;margin-top:30px}
	.a2{font-size:20px;margin-left:20px;margin-top:20px}
	.a3{font-size:20px;margin-left:15px;margin-top:40px}
</style>
</head>
<!-- 正文 -->
<body>
	<div class="picture">
	<img src="04.png"alt=""/>
	</div>
	<div class="z">
	座右铭
	</div>
	<div class="a"><div class="a1">座右铭</div>
	<div class="a2">
	&nbsp&nbsp&nbsp&nbsp&nbsp不想认命，就去拼命。我始终相信，付出就会有收获，或大或小，
	或迟或早，始终不会辜负你的努力。有一种落差是，你总是羡慕别人的成功，自己却不敢开始。
	<div class="a3">
	&nbsp&nbsp&nbsp&nbsp&nbsp世上没有白费的努力，也没有碰巧的成功，一切无心插柳，其实都是水到渠成。人生没有白走的路，
	也没有白吃的苦，跨出去的每一步，都是未来的基石与铺垫。
	</div>
	</div>
	</div>
	
</body>
</html>

留言板界面的代码如下：

<!-- 使用HTML5的标准进行文档解析 -->
<!DOCTYPE html>
<!-- 根标签 -->
<html lang="en">
<!-- 引入与网页相关的描述及配置信息 -->
<head>
	<meta charset="UTF-8">
	<title>秃头知一的留言板</title>
<style>
	.picture{width:100%;height:100%;}
	.a{font-size:20px;opacity:0.6;background-color:#F0F8FF;margin-left:200px;margin-top:-200px;position: absolute;}
</style>
</head>
<!-- 正文 -->
<body>
	<div class="picture">
	<img src="05.png"alt=""/>
	</div>
	<div class="a">
	<input type="text" style="width:500px;height:100px">在此处留言
	</div>
	
</body>
</html>

总结：

这次csdn的实训圆满完成，能顺利坚持下来，我要感谢训练营的楚楚老师，湘王老师，以及训练营的伙伴们，这次实训过程中，他们给予我很大的鼓励和支持，在他们的帮助下我学到了很多东西（都已经在博客中记录下来了）其实比起来知识的学习更重要的是学习方式的学习，如湘王老师的说法，如果什么事情都很坚持的做下去，一定能取得成功，编程的道路上一定充满了困难，但是我相信我可以坚持下来，我也一定会坚持下来，经验都是在痛苦中萃取出来的，一个胜利之不会放弃，而一个放弃者永远也不会胜利，本次实训我成功坚持了下来，对我而言本次实训已经成功，以后的生活我也会一直坚持，一直成功！敬礼！

秃头知一

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
个人博客的扩充

昨天我们创建了一个简单的个人博客已经对Tomcat默认页面换为我们个人博客的操作，今天我们对其进行扩充，首先我们需要下载一个替换记事本的软件，我们这里下载sublime流程如下：Sublime的下载链接：Download - Sublime Text我们打开此链接，出现如下界面：我们选择压缩包下载下载完成之后将文件解压到自己想要的路径下面，如下图：我们双击打开此文件就可以在此界面内进行html 的编写。今天进行扩充...
复制链接

扫一扫