利用html，css，js（轮播图）完成一个简易的太极拳宣传页面（附带源码）

最新推荐文章于 2024-05-11 23:02:38 发布
最新推荐文章于 2024-05-11 23:02:38 发布
阅读量360 收藏 10
点赞数 11
文章标签： html css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53211817/article/details/136131448
版权

先上效果：

首页代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<title>首页</title>
		<link rel="shortcut icon" href="image/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="js/swiper3/swiper.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		<!--header头部-->
		<div class="header">
			<div class="main">
				<!--logo-->
				<div class="logo">
					<a href="index.html"><img src="image/logo.png"/> 云上太极</a>
				</div>
				
				<!--导航-->
				<ul class="nav">
					<li><a href="index.html" class="active">首页</a></li>
					<li><a href="lishi.html">历史</a></li>
					<li><a href="liupai.html">流派</a></li>
					<li><a href="wenchuang.html">文创商品</a></li>
					<li><a href="lianxi.html">联系我们</a></li>
				</ul>
			</div>
		</div>
		
		<!--内容居中-->
		<div class="main">
			
			<!--轮播图-->
			<div class="swiper-container">
			    <div class="swiper-wrapper">
			        <div class="swiper-slide">
			            <img src="image/banner1.jpg"/>
			        </div>
			        <div class="swiper-slide">
			            <img src="image/banner2.jpg"/>
			        </div>
			        <div class="swiper-slide">
			            <img src="image/banner3.jpg"/>
			        </div>
			    </div>
			    <!--指示器-->
			    <div class="swiper-pagination"></div>
			    <!--左右切换按钮-->
			    <div class="swiper-button-prev"></div>
			    <div class="swiper-button-next"></div>
			</div>
			
			
			<!--基本信息-->
			<div class="info">
				
				<h2 class="headtitle">基本信息</h2>
				
				<p>
					太极拳，非物质文化遗产，是以中国传统儒、道哲学中的太极、阴阳辩证理念为核心思想，集颐养性情、强身健体、技击对抗等多种功能为一体，结合易学的阴阳五行之变化，中医经络学，古代的导引术和吐纳术形成的一种内外兼修、柔和、缓慢、轻灵、刚柔相济的中国传统拳术。
				</p>
				
				<p>
					1949年后，被国家体委统一改编作为强身健体之体操运动、表演、体育比赛用途。中国改革开放后，部分还原本来面貌；从而再分为比武用的太极拳、体操运动用的太极操和太极推手。
				</p>
				
				<p>
					传统太极拳门派众多，常见的太极拳流派有陈氏、杨氏、武氏、吴氏、孙氏、和氏等派别，各派既有传承关系，相互借鉴，也各有自己的特点，呈百花齐放之态。由于太极拳是近代形成的拳种，流派众多，群众基础广泛，因此是中国武术拳种中非常具有生命力的一支。
				</p>
				<p>
					2020年12月，联合国教科文组织保护非物质文化遗产政府间委员会第15届常会将“太极拳”项目列入联合国教科文组织人类非物质文化遗产代表作名录。
				</p>
				
				
				
				<h2 class="headtitle">名称由来</h2>
				
				
				<p>
					太极拳属武术一大拳系。太极拳这个名称是因为拳法变幻无穷，遂用中国古代的“阴阳”、“太极”这一哲学理论来解释拳理而被命名的。
				</p>
				
				<p>
					“太极”一词源出《周易·系辞》：“易有太极，是生两仪。”“太”就是大的意思，“极”就是开始或顶点的意思。宋朝周敦颐在《太极图说》中第一句话就是“无极而太极”，并非说太极从无极产生，而是“太极本无极”之意，意即“太极”是产生万物的本源，含有至高、至极、绝对、唯一之意。太极拳取的也是这个意思。太极图是我国古人的一种最原始的世界观，拳术和太极说的结合，逐步形成了太极拳术。
				</p>
				
				<p>
					太极拳一词，最早见于署名王宗岳的《太极拳论》。根据文献和口头资料，王宗岳的遗作，是清直隶广平府永年县（今河北省永年县）武澄清（1880年-1884年），在任职河南省舞阳县县令时，得于县属北舞渡镇家盐店，时间约在清咸丰二年（1852年）或稍晚的一段时间里。由于有无王宗岳此人，研究者迄今尚无定论，近十余年来有人还提出《太极拳论》是武禹襄（1812年-1880年）的化名之作。不管上述议论谁是谁非，有一点可以肯定：王宗岳《太极拳论》的原件，谁也没有看到过。
				</p>
				
				<p>
					武禹襄的长甥李亦畲（1832年-1892年）于光绪七年（1881年）将王宗岳武禹囊的拳论和自身体会，手书三册传世，俗称“老三本”。自藏本封面题名《太极拳论》，下注“后附小序并五字诀”。赠郝和本封面题名《王宗岳太极拳论》，下注“后附小序并五字诀”。这是迄今发现最早的太极拳理论著述。“太极拳”之名、王宗岳和武禹襄的拳论见诸于文字记载的，均首先出于此抄本。
				</p>
				
				<p>
					1928年定稿的《清史稿》，在《卷五百五・列传二百九十二・艺术四》中记载：“清中叶，河北有太极拳，云其法出自山西王宗岳……至清末，传习者颇众云。”这是太极拳之名见诸官方史书的最早记载。说“河北有太极拳……传习者颇众”，证明永年人杨禄禅、武禹襄所传拳术已正式定名为太极拳了。
				</p>
				
				
			</div>
			
			
			
			
			<!--底部版权信息-->
			<div class="footer">
				Copyright &copy; 太极拳 版权所有
			</div>
			
			
		</div>
		
		<script src="js/swiper3/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
		    // 轮播图配置
		    var swiper = new Swiper('.swiper-container', {
		        pagination: '.swiper-pagination',
		        paginationClickable: true,
		        loop : true,
		        autoplay : 3000,
		        autoplayDisableOnInteraction : false, // 用户滑动后继续自动滑动
		        simulateTouch : false,// 禁止鼠标滑动
		        prevButton:'.swiper-button-prev',
		        nextButton:'.swiper-button-next',
		    });
			
		</script>
		
	</body>
</html>

“历史”代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<title>历史</title>
		<link rel="shortcut icon" href="image/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		
		<!--header头部-->
		<div class="header">
			<div class="main">
				<!--logo-->
				<div class="logo">
					<a href="index.html"><img src="image/logo.png"/> 云上太极</a>
				</div>
				
				<!--导航-->
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="lishi.html" class="active">历史</a></li>
					<li><a href="liupai.html">流派</a></li>
					<li><a href="wenchuang.html">文创商品</a></li>
					<li><a href="lianxi.html">联系我们</a></li>
				</ul>
			</div>
		</div>
		
		<!--内容居中-->
		<div class="main">
			
			
			<!--历史-->
			<div class="lishi">
				
				<div class="text">
					<p>
						尽管太极拳创始难以定论，但是从太极拳定名以来，陈长兴以后的太极拳演变线索是较清晰和公认的，这构成了现代意义的传统太极拳主体。根据拳理著作、动作形态可以看出从明末清初以来的太极拳演变、发展历程。						
					</p>
					<p>
						陈王廷时期的七个套路，经过五传至陈长兴、陈有本一代，原有的108势长拳和太极拳二至五路，已逐渐被舍弃，很少有人练习，取而代之的是陈氏太极拳一路和炮捶（现称之为二路）。一路又分演出老架、新架。新架与老架架势一样宽大，扬弃了原有的一些高难动作，新架随后又出现了赵堡架，代表人物有陈清萍。关于赵堡太极拳的渊源问题，据杜元化所著《太极拳正宗》中记载，是王林祯传蒋发传邢喜怀→张楚臣→陈敬佰→张宗禹→张彦传陈清萍，也有人称陈青萍学拳于陈有本，后人赘于赵堡，所传拳势与老架相同，但是突出了圆形运动特点。从陈王庭早先拳套中的腾空一字腿落地、双手落地、双足先后向上蹬踢等动作，到流传下来的陈氏一路，逐渐简化了原有套路，使之更加适宜大多数人习练，预示了太极拳朝着健身、群众性方向发展。
					</p>
					
				</div>
				
				<div class="image">
					<img src="image/lishi1.jpg"/>
				</div>
				
				<div class="text2">
					<p>
						这个时期正式出版的理论著作，主要有陈微明、许禹生、孙禄堂、吴鉴泉、陈鑫等人的专著。19世纪20年代初开始用照相技术，对动作拍照制版，给后人留下珍费季照，突出的有杨澄甫、吴鉴泉、孙禄堂、陈发科的举势照片，陈鑫的《陈氏太极奉围说》，杨澄甫的《体用全书》，孙禄堂的《太极拳学》等，都是最为重要的著作。特别值得一提的是武禹襄、李亦畲及王宗岳的拳论，显未正式出版但确是经典之作，对太极拳发展起薯极其重要的作用，指导着太极拳的发展。
					</p>
					<p>
						杨禄禅从学于陈长兴老架陈氏太极章，以陈氏一路为蓝本，逐渐形成了杨氏太极拳体系。杨禄禅（1799—1872年）到北京传拳，为了适应大众健身学习的需要，开拓了改编拳套，再经过其三子健候（1839—1917年）修改为中架子，最后由健候三子澄甫（1883—1936年）定型为大架子，成为动作好展大方，无跳跃发力，流传最广的杨氏太极奉，其它架势的杨氏太极拳，由于其动作难度或其它原因，并没有广泛流传。
					</p>
					<p>
						其中，得传于杨禄禅和其次子班候（1837—1892年）小架子的全佑，经全佑之子吴鉴泉（1870-1942年）进一步修润，形成了动作小巧紧凑，速度均匀，不纵不跳，风格与杨氏同一趋向的太极拳，定型为吴氏太极拳。
					</p>
					<p>
						武禹襄（1812—1880年），曾从杨禄禅学陈氏老架，后又从陈青萍学习新架，又严格按《太极拳论》参悟太极拳，从而创造了武氏太极拳，经李亦畲（1832—1892年）进一步完善，最终定型为武氏太极拳，拳架动作形态上有了独到之处，在拳套编排结构上类似杨氏和陈氏，但动作形态上高度抽象概括，仅以“起、承、开、合”其至“开合”二字概括所有技法，强调开合虚实，架式紧凑，独树一帜。
					</p>
					<p>
						孙禄堂（1861—1892年）擅长形意、八卦，又向郝为真学习武氏太极拳，参合三派之长，创造了架高步活的太极拳，突出进步必跟，退步必撒，开合相接的特点，定型为孙氏太极拳。
					</p>
					<p>
						陈长兴之曾孙陈发科（1887—1957年）于1928年去北京传拳，成为陈氏太极拳的中兴者并确立了陈氏太极拳的地位，广泛开始传播动作螺旋缠绕，松活弹抖，有顿足发力的陈氏太极拳。
					</p>
					<p>
						纵观五氏太极拳，陈氏太极拳以一路为主，其它四氏太极拳，都有着相似的套路顺序、谱名、动作名称。在动作形态上，几个主要流派，都以扩大或缩小动作原型为手段，创造自己拳势，这和几个流派创始人的自身条件和习拳根基有关，如个人身材、学识等，杨澄甫定型大架与其身材显然有关，孙禄堂擅长形意、八卦在孙氏太极拳中显而易见，武氏取法舍形，主敬主静，没有脱离其受宋明理学的影响。
					</p>
				</div>
				
				<div class="image2">
					<img src="image/lishi2.jpg"/>
				</div>
				
			</div>
			
			
			<!--底部版权信息-->
			<div class="footer">
				Copyright &copy; 版权所有
			</div>
			
			
		</div>
		
		
		
	</body>
</html>

“流派”代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<title>联系我们</title>
		<link rel="shortcut icon" href="image/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		
		<!--header头部-->
		<div class="header">
			<div class="main">
				<!--logo-->
				<div class="logo">
					<a href="index.html"><img src="image/logo.png"/> 云上太极</a>
				</div>
				
				<!--导航-->
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="lishi.html">历史</a></li>
					<li><a href="liupai.html" class="active">流派</a></li>
					<li><a href="wenchuang.html">文创商品</a></li>
					<li><a href="lianxi.html">联系我们</a></li>
				</ul>
			</div>
		</div>
		
		<!--内容居中-->
		<div class="main">
			
			
			<div class="liupai">
				
				<table>
					<tr>
						<td colspan="3" class="bold">以姓氏命名</td>
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E9%99%88%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">陈氏太极拳（陈王廷）</a></td>
						<td><a href="https://baike.baidu.com/item/%E6%9D%A8%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">杨氏太极拳（杨露禅）</a></td>
						<td><a href="https://baike.baidu.com/item/%E5%90%B4%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">吴氏太极拳（吴鉴泉）</a></td>
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E6%AD%A6%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3/868462?fromModule=lemma_inlink" target="_blank">武氏太极拳（武禹襄）</a></td>						
						<td><a href="https://baike.baidu.com/item/%E5%AD%99%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">孙氏太极拳（孙禄堂）</a></td>						
						<td><a href="https://baike.baidu.com/item/%E8%B5%B5%E5%A0%A1%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">赵堡太极拳（蒋发）</a></td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E9%83%91%E5%AD%90%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">郑子太极拳（郑曼青）</a></td>						
						<td><a href="https://baike.baidu.com/item/%E5%92%8C%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">和氏太极拳（和兆元）</a></td>						
						<td><a href="https://baike.baidu.com/item/%E7%8E%8B%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">王氏太极拳（王雷）</a></td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E8%91%A3%E6%B0%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">董氏太极拳（董英杰）</td>						
						<td>田氏太极拳</td>						
						<td><a href="" target="_blank">熊氏太极拳</a></td>						
					</tr>
					<tr>
						<td><a href="" target="_blank">侯氏太极拳（侯春秀）</a></td>						
						<td>郝氏太极拳</td>						
						<td><a href="" target="_blank">傅氏太极拳（傅振嵩）</a></td>						
					</tr>
					<tr>
						<td>沙氏太极拳（沙国政）</td>						
						<td>顾氏太极拳（顾汝章）</td>						
						<td>宋氏太极拳（宋远桥）</td>						
					</tr>
					<tr>
						<td>张氏太极拳（冼孟豪）</td>						
						<td>樊氏太极拳（樊桂或称樊锦洲）</td>						
						<td>李氏太极拳（李瑞东）</td>						
					</tr>
					<tr>
						<td><a href="" target="_blank">洪氏太极拳（洪均生）</a></td>						
						<td>王振华九式太极拳</td>						
						<td>孟氏太极拳（孟连福）</td>						
					</tr>
					<tr>
						<td colspan="3" class="bold">非姓氏命名</td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E6%AD%A6%E5%BD%93%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">武当太极拳</a></td>						
						<td><a href="https://baike.baidu.com/item/%E5%85%AB%E5%8D%A6%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">八卦太极拳</a></td>						
						<td><a href="https://baike.baidu.com/item/%E5%BF%BD%E9%9B%B7%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">忽雷太极拳（李景炎）</a></td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E7%A6%85%E9%97%A8%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">禅门太极拳</a></td>						
						<td><a href="https://baike.baidu.com/item/%E8%85%BE%E6%8C%AA%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">腾挪太极拳（李作智）</a></td>						
						<td>意象太极拳（陈庆华）</td>						
					</tr>
					<tr>
						<td>宗岳门太极拳</td>						
						<td><a href="https://baike.baidu.com/item/%E7%8E%84%E9%97%A8%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">玄门太极拳</a></td>						
						<td>龙岳太极拳（张伯夷）</td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E4%B8%9C%E5%B2%B3%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">东岳太极拳</a></td>						
						<td>猴形太极拳（丁鹤翔）</td>						
						<td>蛇雀太极拳</td>						
					</tr>
					<tr>
						<td>游龙太极拳（犹龙太极拳）</td>						
						<td><a href="https://baike.baidu.com/item/%E9%BE%99%E5%BD%A2%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">龙形太极拳</a></td>						
						<td>龙蛇太极拳</td>						
					</tr>
					<tr>
						<td>峨嵋太极拳</td>						
						<td><a href="https://baike.baidu.com/item/%E9%B8%B3%E9%B8%AF%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">鸳鸯太极拳</a></td>						
						<td>形意太极拳</td>						
					</tr>
					<tr>
						<td>平衡太极拳</td>						
						<td>循经太极拳</td>						
						<td>松溪太极拳（太极长拳、问津拳）</td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E5%A6%82%E6%84%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">如意太极拳（石明）</a></td>						
						<td>昆仑太极拳（陈太平）</td>						
						<td>原地太极拳（胡启贤）</td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E5%9D%90%E5%BC%8F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">坐式太极拳（吴家轮椅太极拳）</a></td>						
						<td>十三势太极拳（太极十三势）</td>						
						<td>无极门太极拳</td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E5%9B%9B%E7%BB%B4%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">四维太极拳（薛安日）</a></td>						
						<td>如是太极拳</td>						
						<td><a href="https://baike.baidu.com/item/%E5%85%BB%E7%94%9F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">养生太极拳</a></td>						
					</tr>
					<tr>
						<td><a href="https://baike.baidu.com/item/%E4%B8%89%E6%98%9F%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">三星太极拳（李蓉）</a></td>						
						<td><a href="https://baike.baidu.com/item/%E7%AE%80%E5%8C%96%E5%A4%AA%E6%9E%81%E6%8B%B3?fromModule=lemma_inlink" target="_blank">简化太极拳（国家体育运动委员会）</a></td>						
						<td>九式太极拳养生功</td>						
					</tr>
				</table>
				
				
			</div>
			
			
			<!--底部版权信息-->
			<div class="footer">
				Copyright &copy; 版权所有
			</div>
			
			
		</div>
		
		
		
	</body>
</html>

“文创商品”代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<title>文创商品</title>
		<link rel="shortcut icon" href="image/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		<!--header头部-->
		<div class="header">
			<div class="main">
				<!--logo-->
				<div class="logo">
					<a href="index.html"><img src="image/logo.png"/> 云上太极</a>
				</div>
				
				<!--导航-->
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="lishi.html">历史</a></li>
					<li><a href="liupai.html">流派</a></li>
					<li><a href="wenchuang.html" class="active">文创商品</a></li>
					<li><a href="lianxi.html">联系我们</a></li>
				</ul>
			</div>
		</div>
		
		<!--内容居中-->
		<div class="main">
			
			<div class="wenchuang">
				
				<ul>
					<li>
						<div class="image">
							<img src="image/wenchuang1.jpg"/>
						</div>
						<div class="title">
							太极拳图解
						</div>
						<div class="price">
							￥399
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang2.jpg"/>
						</div>
						<div class="title">
							太极拳疗养
						</div>
						<div class="price">
							￥299
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang3.jpg"/>
						</div>
						<div class="title">
							和我一起学太极儿童绘本
						</div>
						<div class="price">
							￥99
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang4.jpg"/>
						</div>
						<div class="title">
							太极动漫绘本
						</div>
						<div class="price">
							￥129
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang5.jpg"/>
						</div>
						<div class="title">
							云上太极伴手礼盒
						</div>
						<div class="price">
							￥129
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang6.jpg"/>
						</div>
						<div class="title">
							云上太极陶瓷镇纸
						</div>
						<div class="price">
							￥129
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang7.jpg"/>
						</div>
						<div class="title">
							云上太极书签
						</div>
						<div class="price">
							￥129
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang8.jpg"/>
						</div>
						<div class="title">
							云上太极盲盒摆件
						</div>
						<div class="price">
							￥129
						</div>
					</li>
					<li>
						<div class="image">
							<img src="image/wenchuang9.jpg"/>
						</div>
						<div class="title">
							老年人用太极音乐播放器
						</div>
						<div class="price">
							￥129
						</div>
					</li>
				</ul>
				
			</div>
			
			
			
			<!--底部版权信息-->
			<div class="footer">
				Copyright &copy; 太极拳 版权所有
			</div>
			
			
		</div>
		
		
		
	</body>
</html>

“联系我们”代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="renderer" content="webkit" />
		<title>联系我们</title>
		<link rel="shortcut icon" href="image/favicon.ico" />
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		
		
		<!--header头部-->
		<div class="header">
			<div class="main">
				<!--logo-->
				<div class="logo">
					<a href="index.html"><img src="image/logo.png"/> 云上太极</a>
				</div>
				
				<!--导航-->
				<ul class="nav">
					<li><a href="index.html">首页</a></li>
					<li><a href="lishi.html">历史</a></li>
					<li><a href="liupai.html">流派</a></li>
					<li><a href="wenchuang.html">文创商品</a></li>
					<li><a href="lianxi.html" class="active">联系我们</a></li>
				</ul>
			</div>
		</div>
		
		<!--内容居中-->
		<div class="main">
			
			
			<div class="lianxi">
				
				
				<ul>
					<li>
						<strong>联系电话：</strong>139-3333-2305
					</li>
					<li>
						<strong>QQ号码：</strong>903152874
					</li>
					<li>
						<strong>地址：</strong>河北省保定市河北大学新校区
					</li>
				</ul>
				
				
					
				
				<div class="input">
					<p>
						姓名：
					</p>
					<input type="text" placeholder="请输入姓名" />
				</div>
				
				<div class="input">
					<p>
						邮箱：
					</p>
					<input type="text" placeholder="请输入邮箱" />
				</div>
				
				<div class="input">
					<p>
						内容：
					</p>
					<textarea placeholder="请输入内容"></textarea>
				</div>
				
				<div class="input">
					<button>提交</button>
				</div>
					
					
				
				
			</div>
			
			
			<!--底部版权信息-->
			<div class="footer">
				Copyright &copy; 版权所有
			</div>
			
			
		</div>
		
		
		
	</body>
</html>

css代码：

body {
  background-color: #f5f5f5;
}
* {
  padding: 0;
  margin: 0;
  color: #000;
  border: 0;
  outline: none;
  text-decoration: none;
  box-sizing: border-box;
  list-style: none;
}
img {
  width: 100%;
}
.main {
  width: 1000px;
  margin: 0 auto;
  background-color: #fff;
}
.header {
  height: 100px;
  line-height: 100px;
  background-color: #333;
  overflow: hidden;
}
.header .logo {
  float: left;
}
.header .logo a {
  color: #fff;
  font-size: 30px;
}
.header .logo img {
  width: 100px;
  vertical-align: middle;
}
.header .nav {
  float: right;
}
.header .nav li {
  float: left;
  margin-left: 50px;
}
.header .nav li a {
  color: #fff;
}
.header .nav li a:hover {
  color: gold;
}
.header .nav li a.active {
  color: gold;
  font-weight: bold;
}
.swiper-container {
  width: 100%;
  height: 580px;
}
.swiper-container .swiper-slide {
  position: relative;
}
.swiper-container .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.headtitle {
  font-size: 24px;
  border-left: 6px solid #4F9CEE;
  padding-left: 20px;
  margin-bottom: 30px;
}
.info {
  padding: 50px 20px;
  overflow: hidden;
}
.info p {
  text-indent: 2em;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
}
.info ul {
  overflow: hidden;
  margin-bottom: 50px;
}
.info ul li {
  float: left;
  width: 50%;
  padding: 10px 0;
  border-bottom: 1px dotted #ccc;
}
.info ul li span {
  font-size: 12px;
}
.info ul li span:nth-child(1) {
  display: inline-block;
  width: 100px;
  color: #777;
}
.info table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}
.info table th,
.info table td {
  text-align: center;
  padding: 10px;
  border: 1px solid #ccc;
}
.info table th {
  background-color: #ddd;
}
.wenchuang ul li {
  display: flex;
  justify-content: space-between;
  padding: 50px;
  margin-bottom: 40px;
  border: 1px dashed #ccc;
}
.wenchuang ul li .image {
  width: 40%;
  padding: 30px;
}
.wenchuang ul li .image img {
  transition: 0.5s;
}
.wenchuang ul li .image img:hover {
  transform: scale(1.1);
}
.wenchuang ul li .title {
  width: 40%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
}
.wenchuang ul li .price {
  font-size: 20px;
  font-weight: bold;
  color: orangered;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lishi {
  padding: 50px 20px;
  overflow: hidden;
}
.lishi p {
  text-indent: 2em;
  line-height: 1.5;
  margin-bottom: 15px;
  color: #333;
}
.lishi .text {
  float: left;
  width: 500px;
}
.lishi .image {
  float: right;
  width: 420px;
}
.lishi .text2 {
  float: left;
  width: 100%;
}
.lishi .image2 {
  float: left;
  width: 100%;
}
.liupai {
  padding: 50px 20px;
  overflow: hidden;
}
.liupai table {
  width: 100%;
  border-collapse: collapse;
}
.liupai table .bold {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
}
.liupai table td {
  padding: 20px;
  border: 1px solid #ccc;
}
.liupai table td a {
  color: #136ec2;
}
.liupai table td a:hover {
  text-decoration: underline;
}
.lianxi {
  padding: 50px 20px;
  overflow: hidden;
}
.lianxi ul {
  display: flex;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px dashed #ccc;
  flex-wrap: wrap;
}
.lianxi ul li {
  width: 33%;
}
.lianxi .input {
  width: 600px;
  margin: 0 auto;
  margin-bottom: 30px;
}
.lianxi .input p {
  margin-bottom: 10px;
  font-weight: bold;
}
.lianxi .input input {
  width: 100%;
  border: 1px solid #ccc;
  font-size: 16px;
  padding: 10px;
}
.lianxi .input textarea {
  width: 100%;
  height: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  resize: none;
  font-size: 16px;
}
.lianxi .input button {
  display: inline-block;
  width: 100%;
  padding: 10px 0;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}
.lianxi .input button:hover {
  background-color: #666;
}
.footer {
  padding: 50px 0;
  border-top: 1px solid #eee;
  text-align: center;
}

hbu小菜鸡
关注
  • 11
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
使用html+css实现一个静态页面（化妆品公司 5页_含源码）
11-22 533
HTML网页设计制作大作业（div+css） 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
模仿淘宝首页html+js+css（附带源码）
yingshuangtu的博客
08-06 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、实现效果截图二、代码1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、实现效果截图 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、代码 1.引入库 代码如下（示例）：
使用html+css+js实现一个静态页面（含源码）
qq_38515380的博客
04-08 355
👒 公司官网网站 、企业官网、酒店官网、等网站的设计与制作。🏷️ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站
基于Html+Css+javascript的网页制作（旅游主题）
11-22 302
HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为（1）html文件：其中index.html是首页、其他html为二级页面； （2）css文件：css全部页面样式,文字滚动, 图片放大等； （3）js文件：js实现动态轮播特效, 表单提交, 点击事件等等（网页中运用到js代码）(1)首页：进入网页中看到的第一个页面(LOGO、公司名称、导航、banner
HTML+CSS淘宝首页[web课设代码+模块说明+效果图]
心态的博客
05-11 8295
HTML+CSS淘宝首页[web课设代码+模块说明+效果图](共1800行代码)
html多个好看的背景动态效果（附源码）
热门推荐
xcLeigh
12-09 3万+
html多个好看的背景动态效果，html背景动态效果，里面带有五种好看的，酷炫的动态背景效果，图片轮动动态背景效果，星空流星动态背景效果，动态美女背景效果，动态屋雨背景效果，动态街道背景效果，动态夜幕背景效果，可以直接嵌套在在自己的代码里。
用HTML+CSS做一个漂亮简单的轻量级图片相册博客网站(web前端期末大作业)
有问必答，欢迎打扰，项目开发，网页设计
10-17 797
👩‍🔬个人博客网站、👨‍🔬个人主页介绍、个人简介、个人博客设计制作 、等网站的设计与制作。🏷️ 大学生个人HTML网页设计作品，采用DIV CSS布局制作，页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+J
喀什旅游网页设计 html源码 4页 html+css+JavaScript
m0_37916936的博客
04-24 126
dw、hbuilder、vscode、sublime等编辑软件都可打开运行修改图片文字代码。【旅游类】4页喀什旅游网页 首页带JavaScript轮播图。主要分为 首页、新疆喀什的旅游景点、景区推荐、旅游服务。每个页面对应一个css文件 附带网页截图 可删除。网页比较简单，适合初学者。用到的是flex弹性布局。
HTML5+CSS3实现小米商城 （完整版）
m0_63512120的博客
07-20 1万+
做了一个小米商场的网页，用HTML5+CSS3做出来的，在文章最后附带 网页所有的源码和图片素材供大家参考。原创不易，大家有任何问题都可在评论区指出。
html+css+js写轮播图
03-20
用HTML和css和js写的轮播图，图片自己可以去找，简单的逻辑已经写出来了，学会这个差不多就可以写一些小的项目了，适合初学者去学习，逻辑不难理解，大家可以看看代码。
使用html+js+css 实现页面轮播图效果(实例讲解)
10-19
下面小编就为大家带来一篇使用html+js+css 实现页面轮播图效果(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
HTML+CSS+JS 制作仿优酷视频焦点轮播图
06-08
通过HTML+CSS+JS 制作的仿优酷视频焦点轮播图，JS代买中有代码注释，新手或是初学者可根据提供的代码注释进行二次开发。
html+css3D轮播图片
01-29
【html+css】3D轮播图片，69行代码实现3D旋转轮播图
Vue3 - 修改浏览器标题 htmlWebpackPlugin.options.title 的值
良月柒
05-11 28
配置项来访问 webpack 的配置，然后找到 HtmlWebpackPlugin 的插件实例，并修改它的。是 HtmlWebpackPlugin 的一个选项，用于设置生成的 HTML 文件的标题。在 Vue CLI 4.x 中，在这个示例中，我们使用。选项为你想要的新标题。文件来修改这个选项。将修改后的配置返回。
html--魔方
stqer的博客
05-05 849
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> :root { --cube-size: 50vmin; --side-size: calc(var(--cube-size) /
Html + Express 实现大文件分片上传、断点续传、秒传
m0_71349739的博客
05-11 199
在日常的网页开发中，文件上传是一项常见操作。通过文件上传技术，用户可以将本地文件方便地传输到Web服务器上。这种功能在许多场景下都是必不可少的，比如上传文件到网盘或上传用户头像等。然而，当需要上传大型文件时，可能会遇到以下问题：1.：由于文件大小较大，上传过程可能会耗费较长时间。2.：如果在上传过程中出现意外情况导致上传中断，用户需要重新开始整个上传过程，这会增加用户的不便。3.：通常，服务端会对上传的文件大小进行限制，这可能导致无法上传大型文件。
springboot和html怎么实现文件上传
m0_74749208的博客
05-07 475
文件怎样上传
HTML【常用的标签】、CSS【选择器】
最新发布
gangain的博客
05-11 663
CSS 概述 • CSS 指层叠样式表 (Cascading Style Sheets) • 样式定义如何显示 HTML 元素 • 是为了解决内容与表现分离的问题 • 多个样式定义可层叠为一 • 样式通常存储在样式表中
html css js实现简易轮播图
06-28
要实现简易轮播图，我们需要使用 HTML、CSS 和 JavaScript。 1. 首先，在 HTML 中创建轮播图的容器元素，如 <div class="swiper-container"></div>。 2. 在 CSS 中设置容器元素的宽度和高度，以及每个轮播项（即...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

hbu小菜鸡

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值