HTML古诗词

最新推荐文章于 2024-04-23 18:18:03 发布

这不阿乐嘛

最新推荐文章于 2024-04-23 18:18:03 发布

阅读量935

点赞数 1

文章标签： html 前端 css

本文链接：https://blog.csdn.net/aleale6/article/details/129187673

版权

前言：
HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。

一直走在路上🏔

🐒设计要求：
（1）网站页面数量不少于4个，文件命名规范，网站结构要求层次清楚，目录结构清晰，代码缩进规整。（4分）

（2）采用HTML结构标记（或div标记）+CSS进行整体布局定位。（5分）

（3）网站首页栏目数量不能少于3个，各栏目要能正确链接到相应栏目子页面，同时各栏目页面也能正确返回到网站首页。（3分）

（4）网站页面标题、图片图标等要符合网站主题。（2分）

（5）网站页面中要有列表。（2分）

（6）网站页面中要含有表单（form）。（3分）

（7）网站内容应具有原创性，内容充实。（7分）

（8）网站整体色系符合视觉习惯，布局合理美观。（4分）

🐒首页.html：
此次我设计的页面为古诗词页面，含有标题，古诗词，推荐作者，@baidu 4块内容
网页首页

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>古诗词大全</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>

<body>
	<div class="a1">
	  <div class="a2">
	    <h3>古诗词大全</h3>
	  </div>
	  <div class="a3">
	    <div class="a4">
		   
           <h5>推荐作者
			   <br>
			   <br>
               <hr>
			   <br>
		  </h5>
		  <div class="aa">
			  <table cellpadding=5px>
				  <tr >
			        <td><a href="https://baike.baidu.com/item/%E5%88%98%E7%A6%B9%E9%94%A1/296467?fromModule=lemma_search-box"target="_blank"><img src="img/lyx.jpg"height=100px width=80px position="absolute" title="刘禹锡"></a></td>
			        <td><a href="https://baike.baidu.com/item/%E6%9D%A8%E4%B8%87%E9%87%8C/35772?fromModule=lemma_search-box"target="_blank"><img src="img/ywl.jfif"height=100px width=80px position="absolute" title="杨万里"></a></td>
			        <td><a href="https://baike.baidu.com/item/%E6%9F%B3%E5%AE%97%E5%85%83/127462?fromModule=lemma_search-box"target="_blank"><img src="img/lzy.jfif"=100px width=80px position="absolute" title="柳宗元"></a> </td>
				  </tr>
				  <tr>
				    <th><b>刘禹锡</b></th>
				    <th><b>杨万里</b></th>
				    <th><b>柳宗元</b></th>
				  </tr>
				  <tr >
			        <td><a href="https://baike.baidu.com/item/%E5%B2%B3%E9%A3%9E/127844?fromModule=lemma_search-box"target="_blank"><img src="img/yf.jpg"height=100px width=80px position="absolute" title="岳飞"></a> </td>
			        <td><a href="https://baike.baidu.com/item/%E6%9D%8E%E7%99%BD/1043?fromModule=lemma_search-box"target="_blank"><img src="img/lb.jpg"height=100px width=80px position="absolute" title="李白"></a></td>
			        <td><a href="https://baike.baidu.com/item/%E7%8E%8B%E7%BB%B4/37558?fromModule=lemma_search-box"target="_blank"><img src="img/ww.jpg"=100px width=80px position="absolute" title="王维"></a> </td>
				  </tr>
				  <tr>
				    <th><b>岳飞</b></th>
				    <th><b>李白</b></th>
				    <th><b>王维</b></th>
				  </tr>
				  <tr >
			        <td><a href="https://baike.baidu.com/link?url=XJEzaSD72T2O-IA3BzX4zM6ELKN8zsPtieTZPJ8qqaFy_TptJnMIIJfEXazggAIE9mUETHmUZkMOPEqNqr1728LAEwGfhU7Xqs9CHnBJ_B7"target="_blank"> <img src="img/sw.jpg"height=100px width=80px position="absolute" title="苏洵"></a></td>
			        <td><a href="https://baike.baidu.com/item/%E8%8B%8F%E8%BD%BC/53906?fromModule=lemma_search-box"target="_blank"><img src="img/ssh.jpg"height=100px width=80px position="absolute" title="苏轼"></a></td>
			        <td> <a href="https://baike.baidu.com/item/%E8%8B%8F%E8%BE%99?fromModule=lemma_search-box"target="_blank"><img src="img/szh.jpg"=100px width=80px position="absolute" title="苏辙"></a></td>
				  </tr>
				  <tr>
				    <th><b>苏洵</b></th>
				    <th><b>苏轼</b></th>
				    <th><b>苏辙</b></th>
				  </tr>
			  </table>	  
		  </div>
		</div>
		  <div class="a5">
			  
              <h4>古诗词</h4>
			  <hr>
			  <li>
			    <a href="qjj.html">
				  将进酒  
				</a>
				<p>
				   [作者]李白【朝代】唐<br>
                   君不见黄河之水天上开,奔流到海不复回。<br>
                   君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
                   . . .<br>
				</p>  
			  </li>
			  <li>
			    <a href="changsha.html">沁园春 &middot; 长沙</a>
				<p>
				  [作者]毛泽东<br>
                  独立寒秋，湘江北去，橘子洲头。<br>
                  看万山红遍，层林尽染；漫江碧透，百舸争流。<br>
                  . . .<br>
				</p>  
			  </li>
			  <li>
			    <a href="xue.html">沁园春 &middot; 雪</a>
				<p>
				  [作者]毛泽东<br>
                  北国风光，千里冰封，万里雪飘。<br>
                  望长城内外，惟余莽莽；大河上下，顿失滔滔。<br>
                  . . .<br>
				</p>
			  </li>
			  <li>
			    <a href="songeryuan.html">送二元使安西</a>
				<p>
				  [作者]王维[朝代]唐<br>
                  渭城朝雨浥轻尘，客舍青青柳色新。<br>
                  劝君更进一杯酒，西出阳关无故人。<br>
                  . . .
				</p>
			  </li>
		  </div>
	  </div>
	  <div class="a6">
	    <p>
		  &copy; Baidu | 
		  <a href="https://www.baidu.com/duty"target="_blank">使用百度前必读 | </a>
		  <a href="https://www.baidu.com"target="_blank">百度首页 | </a>
		  <a href="/s"style="display: none"target="_blank">站内搜索 | </a>
		  <a href="http://help.baidu.com/newadd?prod_id=8&category=1"target="_blank">问题反馈</a>
		</p>
	  </div>	
	</div>
</body>
</html>

分页.html：
将进酒

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>将进酒</title>
</head>

<body>
	<div align="center">
	  <div>
		<a href="index.html">首页</a> | 
		<a href="changsha.html">沁园春&middot;长沙</a> | 
		<a href="xue.html">沁园春&middot;雪</a> | 
		<a href="songeryuan.html">送二元使安西</a>
		<hr>
	  </div>
	  <img src="img/qjj.jpg"title="将进酒"width="200px"height="150px">
		<font face="楷体">
		  <h1>将进酒</h1>
           <p> 君不见黄河之水天上来，奔流到海不复回。</p>
           <p> 君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
           <p>人生得意须尽欢，莫使金樽空对月。</p>
           <p>天生我材必有用，千金散尽还复来。 </p>
		   <p>烹羊宰牛且为乐，会须一饮三百杯。 </p>
           <p> 岑夫子，丹丘生，将进酒，杯莫停。</p>
           <p>与君歌一曲，请君为我倾耳听。</p>
           <p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
           <p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
           <p>主人何为言少钱，径须沽取对君酌。 </p>
           <p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
        </font>
		<hr>
	</div>
	<div>
	 <p>1.岑夫子:人名</p>
	 <p>2.丹丘生:人名</p>	
	</div>
</body>
</html>

沁园春长沙

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>沁园春&middot;长沙</title>
</head>

<body>
	<div align="center">
	  <div>
		<a href="index.html">首页</a> | 
		<a href="qjj.html">将进酒</a> | 
		<a href="xue.html">沁园春&middot;雪</a> | 
		<a href="songeryuan.html">送二元使安西</a>
		<hr>
	  </div>
	  <img src="img/changsha.jpg"title="沁园春&middot;长沙"width="200px"height="150px">
		<font face="楷体">
		  <h1>沁园春&middot;长沙</h1>
           <p>独立寒秋，湘江北去，橘子洲头。</p>
           <p>看万山红遍，层林尽染；漫江碧透，百舸争流。</p>
           <p>鹰击长空，鱼翔浅底，万类霜天竞自由。</p>
           <p>怅寥廓，问苍茫大地，谁主沉浮？</p>
		   <p>携来百侣曾游，忆往昔峥嵘岁月稠。</p>
           <p>恰同学少年，风华正茂；书生意气，挥斥方遒。</p>
           <p>指点江山，激扬文字，粪土当年万户侯。</p>
           <p>曾记否，到中流击水，浪遏飞舟?</p>
        </font>
		<hr>
	</div>
	<div>
	 <p>1.舸：大船</p>
	 <p>2.万户侯:古代官职</p>	
	</div>
</body>
</html>

沁园春雪

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>沁园春&middot;雪</title>
</head>

<body>
	<div align="center">
	  <div>
		<a href="index.html">首页</a> | 
		<a href="qjj.html">将进酒</a> | 
		<a href="#">沁园春&middot;长沙</a> | 
		<a href="songeryuan.html">送二元使安西</a>
		<hr>
	  </div>
	  <img src="img/xue.jpg"title="沁园春&middot;长沙"width="200px"height="150px">
		<font face="楷体">
		  <h1>沁园春&middot;雪</h1>
           <p>北国风光，千里冰封，万里雪飘。</p>
           <p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
           <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
           <p>须晴日，看红装素裹，分外妖娆。</p>
		   <p>江山如此多娇，引无数英雄竞折腰。</p>
           <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
           <p>俱往矣，数风流人物，还看今朝。</p>
        </font>
		<hr>
	</div>
	<div>
	 <p>1.今朝:</p>
	 <p>2.唐宗宋祖:皇帝</p>	
	</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>

送元二使安西

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>沁园春&middot;雪</title>
</head>

<body>
	<div align="center">
	  <div>
		<a href="index.html">首页</a> | 
		<a href="qjj.html">将进酒</a> | 
		<a href="#">沁园春&middot;长沙</a> | 
		<a href="songeryuan.html">送二元使安西</a>
		<hr>
	  </div>
	  <img src="img/xue.jpg"title="沁园春&middot;长沙"width="200px"height="150px">
		<font face="楷体">
		  <h1>沁园春&middot;雪</h1>
           <p>北国风光，千里冰封，万里雪飘。</p>
           <p>望长城内外，惟余莽莽；大河上下，顿失滔滔。</p>
           <p>山舞银蛇，原驰蜡象，欲与天公试比高。</p>
           <p>须晴日，看红装素裹，分外妖娆。</p>
		   <p>江山如此多娇，引无数英雄竞折腰。</p>
           <p>惜秦皇汉武，略输文采；唐宗宋祖，稍逊风骚。</p>
           <p>俱往矣，数风流人物，还看今朝。</p>
        </font>
		<hr>
	</div>
	<div>
	 <p>1.今朝:</p>
	 <p>2.唐宗宋祖:皇帝</p>	
	</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body>
</body>
</html>

style.css



body {
    font-family: 微软雅黑;
    font-size: 15px;
}
.a1{
	
	margin:0 auto;
	width: 1000px;
	height: 1500px;
}
.a2{
	margin-bottom:10px; 
	height: 100px;
	background-color: #f2f2f2;
	font-size: 25px;
	line-height: 100px;
	text-align: center;
}
.a3{
	margin-bottom: 10px;
	height: 700px;
}
.a4{
	float: right;
	width: 390px;
	height:700px;
	background: white;
	border: 2px solid #eeeeee;
}
.a5{
	float: left;
	width: 600px;
	height: 700px;
	background: white;
	border: 2px solid #eeeeee;
}
.a6{
	height: 150px;
	background: #f2f2f2;
	text-align: center;
	font-size: 15px;
}

hr{
	color: #f2f2f2;
    background: #f2f2f2;
    height: 1px;
}

这不阿乐嘛

关注

1
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
HTML古诗词

前言：HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性，网站开发技术人员是必须要有所了解的。一直走在路上🏔🐒设计要求：（1）网站页面数量不少于4个，文件命名规范，网站结构要求层次清楚，目录结构清晰，代码缩进规整。（4分）（2）采用HTML结构标记（或di
复制链接

扫一扫