静态网页设计——中医中药网（HTML+CSS+JavaScript）(dw、sublime Text、webstorm、HBuilder X)

news2024/9/28 3:37:00

前言

声明：该文章只是做技术分享，若侵权请联系我删除。！！
感谢大佬的视频：https://www.bilibili.com/video/BV11e411i7g8/?vd_source=5f425e0074a7f92921f53ab87712357b

源码：https://space.bilibili.com/565112134

使用技术：HTML+CSS+JS（静态网页设计）
主要内容：一个关于中医中药的网站。

主要内容

1、首页

首页用html标签分割成多个区域，每个区域都是用子div标签继续进行更加细致的分割，并且使用css设置样式，将每个区域想显示的效果用css设计出来，最后根据px单位进行划分，精准的分割页面格式化。
在这里插入图片描述

最上方使用li标签+css设计制作的菜单导航，还有使用js实现的轮播图，可以自动切换图片，
或者点击下方的按钮可以手动切换图片。
在这里插入图片描述

代码：

<div class="nav_bg">
		<ul class="nav">
			<img src="images/logo.png">
			<li><a href="inddex.html"><font color="#AB7B4D">网站首页</font></a></li>
			<li><a href="01.html"><font color="#AB7B4D">名贵中药</font></a></li>
			<li><a href="02.html"><font color="#AB7B4D">中药功效</font></font></a></li>
			<li><a href="03.html"><font color="#AB7B4D">中药新发展</font></a></li>
			<li><a href="05.html"><font color="#AB7B4D">中药知识大全</font></a></li>
			<li><a href="04.html"><font color="#AB7B4D">关于我们</font></a></li>
		</ul>
	</div>

2、名贵中药

该页面使用p标签和人span标签嵌入许多文本，将关于网站主题的介绍全部写到网页中，文字排版根据字数来进行，使用不会出现不协调的情况。在文字旁边，使用img标签嵌入一些图片，使得网页整体更加的美观。
在这里插入图片描述

代码：

在这里插入代码片<div class="zhongyao">
		<img class="tu"src="images/m1.png">
		<br>
		<br>
		<p><font color='#AB7B4D'><strong>藏红花：</strong></font>是一种鸢尾科番红花属的多年生花卉，也是一种常见的香料。是一种名贵的中药材，具有强大的生理活性。为秋植球根花卉，藏红花原产欧洲南部。喜冷凉湿润和半阴环境，较耐寒，宜排水良好、腐殖质丰富的沙壤土。pH值5.5-6.5。球茎夏季休眠，秋季发根、萌叶。10月下旬开花，花朵日开夜闭。</p>
		<p><font color='#AB7B4D'><strong>功效：</strong></font>其干燥柱头味甘性平，能活血化瘀，散郁开结，止痛。用于治疗忧思郁结，胸膈痞闷，吐血，伤寒发狂，惊怖恍惚，妇女经闭，血滞月经不调，产后恶露不尽，瘀血作痛，麻疹，跌打损伤等。国外用作镇静、驱风剂。活血化瘀，凉血解毒，解郁安神。温毒发斑、忧郁痞闷、惊悸发狂。</p>
	</div>