HTML静态网页成品作业(HTML+CSS)——舞蹈网页设计制作(5个页面)

最新推荐文章于 2024-05-06 10:59:29 发布

崽子爱码

最新推荐文章于 2024-05-06 10:59:29 发布

阅读量713

点赞数 13

分类专栏： html网页设计与制作学生HTML个人网页作业作品学生HTML个人网页作业作品文章标签： html css 前端

本文链接：https://blog.csdn.net/weixin_42283461/article/details/136442434

版权

html网页设计与制作同时被 3 个专栏收录

46 篇文章 1 订阅

订阅专栏

学生HTML个人网页作业作品

26 篇文章 0 订阅

订阅专栏

学生HTML个人网页作业作品

21 篇文章 1 订阅

订阅专栏

🎉不定期分享源码，关注不丢失哦

一、作品介绍

🏷️本套采用HTML+CSS，未使用Javacsript代码，共有5个页面。
🏷️想要获取本文源码，点击前往吧

二、作品演示

在这里插入图片描述

三、代码目录

在这里插入图片描述

四、网站代码

HTML部分代码


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>舞蹈</title>
		<link rel="stylesheet" href="css/style.css">
	</head>
	<body>
		<div class="box">
		<div class="content">
			<div class="nav">
				<ul>
					<li id="c1"><a href="index.html">网站首页</a></li>
					<li id="c2"><a href="gaikuang.html">基本概况</a></li>
					<li id="c3"><a href="yuanliao.html">舞蹈种类</a></li>
					<li id="c4"><a href="chifa.html">舞蹈练习</a></li>
					<li id="c5"><a href="zhanshi.html">舞姿展示</a></li>
				</ul>
			</div>
			<div id="focus">
				<ul>
					<li><a href="#"><img src="img/d1.jpg" /></a></li>
				</ul>
			</div>
			<div class="main">
				<div class="main_left">
					<div class="sidebar">
						<h3>网站导航</h3>
						<ul class="side_list">
							<li><a href="index.html">网站首页</a></li>
							<li><a href="gaikuang.html">基本概况</a></li>
							<li><a href="yuanliao.html">舞蹈种类</a></li>
							<li><a href="chifa.html">舞蹈练习</a></li>
							<li><a href="zhanshi.html">舞姿展示</a></li>
						</ul>
						<div class="pic"><a href="#"><img src="img/11.jpg" /></a></div>
					</div>
				</div>
				<div class="main_right">
					<div class="index">
						<h2>舞蹈简述</h2>
						<p>
							舞蹈是一种表演艺术，使用身体来完成各种优雅或高难度的动作，一般有音乐伴奏，以有节奏的动作为主要表现手段的艺术形式。它一般借助音乐，也借助其他的道具。舞蹈本身有多元的社会意义及作用，包括运动、社交、求偶、祭祀、礼仪等。在人类文明起源前，舞蹈在仪式，礼仪，庆典和娱乐方面都十分重要。中国在五千年以前就已经出现了舞蹈，它产生于奴隶社会，发展到秦汉之际已形成一定特色。
						</p>
						<h2>汉语词语</h2>
						<p>1、有音乐伴奏的，人们能以有节奏的动作为主要表现手段的艺术形式。亦指表演舞蹈；</p>
						<p>2、跳舞，现代舞，钢管舞，爵士舞，民族舞，肚皮舞，中国古典舞；</p>
						<p>3、古代臣子朝拜帝王时做出特定的舞蹈姿势，是一种礼节。</p>
						<h2>详细意思</h2>
						<p>手舞足蹈。表示欣庆或颂扬。
							汉焦赣《易林·讼之中孚》：“谢恩拜德，舞蹈欣跃，欢乐受福。”
							唐柳宗元《骂尸虫文》：“下民舞蹈，荷帝之力。”
							宋王禹偁《前普州刺史康公预撰神道碑》：“公既至，以二十骑自卫，入见蜀主，谕以祸福，示以恩信。 蜀之君臣舞蹈感悦。</p>
						<h2>艺术名词</h2>
						<p>我国古代乐舞理论中就有：“情动于中而行于言，言之不足故嗟叹之；嗟叹之不足故咏歌之；咏歌之不足，不知手之舞之足之蹈之也。”这也生动地说明了舞蹈是表现人们最激动的情感的产物。
我国有很多学者主张舞蹈起源于劳动的理论，因为劳动是人生存和发展的第一需要，也是劳动创造了人自身，是劳动使人脱离了动物界，是劳动创造了人类社会。在原始人的舞蹈中，表现狩猎和种植以及各种劳动生活的占有最大的比重。</p>
						<ul>
							<li>
								<span>芭蕾舞</span>
								<img src="img/pic1.jpg">
							</li>
							<li>
								<span>钢管舞</span>
								<img src="img/pic2.jpg">
							</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="footer">
				<p>舞蹈 版权所有</p>
			</div>
		</div>
	</div>
	</body>
</html>

CSS部分代码

@charset "utf-8";
*{ margin:0; padding:0;}
ul,li{list-style-type:none;}
body{font-size:14px;background-image:linear-gradient(black,pink);}
a{text-decoration:none;}
.box{
	width: 1000px; height: 100%;margin: 0 auto;background: rgb(255,255,255,0.8);
}
.content{ width:1000px; height:auto;margin:auto;}
.nav{width:1000px; height:72px; background-color: deeppink;}
.nav ul{ padding-left:30px;}
.nav li{ float:left;margin:5px; margin-top:11px;height:50px;line-height:50px;padding:0 5px;border-radius:10px;}
.nav li a{ font-size:18px;color:#fff;}
.nav ul li a:hover{border: 4px solid pink;}
.r_nav{ width:200px; height:30px; float:left; margin-top:10px; margin-left:60px;}
.r_nava{width:30px; height:30px; float:left; margin:15px;}
#c1{ background:pink;}
#c2{ background:pink;}
#c3{ background:pink;}
#c4{ background:pink;}
#c5{ background:pink;}
#c6{ background:pink;}
#c7{ background:pink;}
#c8{ background:pink;}
/*轮播图*/
#focus {width:1000px;height:320px;overflow:hidden; position:relative;}
#focus ul {height:320px; position:absolute;}
#focus ul li {float:left;width:1000px;height:320px;overflow:hidden; position:relative;}
#focus ul li div {position:absolute;overflow:hidden;}
#focus ul li img {width:1000px;height:320px;}
#focus .btnBg {position:absolute;width:1000px;height:20px;left:0;bottom:0;background:#000;}
#focus .btn {position:absolute; width:1000px; height:20px;right:0; bottom:0; text-align:right;}
#focus .btn span {display:inline-block; width:25px; height:10px;font-size:0; margin-right:10px;cursor:pointer;background:#fff;}
#focus .btn span.on {background:#fff;}
#focus .preNext {width:50px;height:50px; position:absolute; top:50%; margin-top:-25px;cursor:pointer;}
#focus .pre{left:0;background:url(../images/prev.png);}
#focus .next{right:0;background:url(../images/next.png);}