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

这篇具有很好参考价值的文章主要介绍了静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

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

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

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

主要内容

1、首页

首页用html标签分割成多个区域,每个区域都是用子div标签继续进行更加细致的分割,并且使用css设置样式,将每个区域想显示的效果用css设计出来,最后根据px单位进行划分,精准的分割页面格式化。
静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

最上方使用li标签+css设计制作的菜单导航,还有使用js实现的轮播图,可以自动切换图片,
或者点击下方的按钮可以手动切换图片。
静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

代码:

<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标签嵌入一些图片,使得网页整体更加的美观。
静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

代码:

在这里插入代码片<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>
3、关于我们

该页面使用了form表单技术,可以填写并且提交文字信息,密码会被****字符代替,不会泄露密码,其他的名字则直接用明文的input标签。
静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

4、其他

该网站页面过多,我这里就不进行一一列举说明了,我放出一些页面的图片即可。
静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X),期末课程设计,html,css,javascript

总结

想要看具体效果的同学,可以访问这个链接:
https://www.bilibili.com/video/BV11e411i7g8/?vd_source=5f425e0074a7f92921f53ab87712357b
具体的代码也在该链接下。文章来源地址https://www.toymoban.com/news/detail-819079.html

到了这里,关于静态网页设计——中医中药网(HTML+CSS+JavaScript)(dw、sublime Text、webstorm、HBuilder X)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包