web中医药——首页设计（HTML+CSS+JS）

编程入门行业动态更新时间:2024-10-25 14:25:41

web中医药——<a href=https://www.elefans.com/category/jswz/34/1769812.html style= 首页设计（HTML+CSS+JS）"/>

web中医药——首页设计（HTML+CSS+JS）

web中医药——首页设计🐾🐾

首页包括导航栏，环形轮播图（中医药人物），动态卡片展示（中医药著作），手拉风琴式图片展示（纪录片模块，游戏模块，挑战模块展示）。用到了HTML、CSS、JS、Bootstrap、Font-awesome。

导航栏的登陆注册圆形图标有登录与否的信息提醒，这个需要连接数据库，本帖暂不做介绍。

首页总览🔖

📌展示

📌文件结构

& ttttt

& css

index.css

& img

& js

myfq.js

myptc.js

mytime.js

index1.html

📌代码

链接: gitee

导航栏🔖

📌导航栏样式

📌导航栏代码

html部分代码

  <!-- 导航栏 ************************************************************************-->
<div id="nav" class="fixed-top" style="background:url(img/nav3.jpg);background-size: cover;position: fixed;"><nav class="topnav navbar "><!-- 标题 --><div><a class="navbar-brand ml-5" href="index1.html"  style=""><img id="nav-title" src="img/logo1.png"   style="width: 40px;height: 50px;"> </a></div><!-- 显示折叠的按钮 --><div><button id = "tnavbtn" type="button" class="btn btn-secondary navbar-toggler circle" data-toggle="collapse"data-target="#sample1" style=" width: 40px;height: 50px;color:#A63126;"><span class="glyphicon glyphicon-menu-hamburger" style=""></span></button> </div><!-- 折叠隐藏的部分******************************************* --><div class="collapse navbar-collapse" id="sample1" ><!-- 导航 --><div class="navtion" style=""><ul class="navbar-nav nav-ul"><li class="nav-item"><a href="introduce.html" class="nav-link text-white">杏林春暖</a></li><li class="nav-item"><a href="book.html" class="nav-link  text-white">传世著作</a></li><li class="nav-item "><a href="video.html" class="nav-link text-white">大医精诚</a></li><li class="nav-item "><a href="game.html" class="nav-link text-white">游戏</a></li><li class="nav-item "><a href="test.html" class="nav-link  text-white">挑战</a></li></ul></div><!-- 实时时钟 --><div class="clock"><div class="leftbox" id="ltbox" style=" margin-left:50px; "><span id="lttime"> </span></div><div><span id="rtbox" style="padding-left: 10px;"> </span></div></div><!-- 登录+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ --><div ><!-- 用户登录 --><a href="login.html" target = "_self" class="login"></a><ul class="inf"></ul></div>  <!-- 用户导航 --><div class="user-nav"><ul class="navbar-nav login-ul">   <li class="user-item help"><a href="#" class="user-link text-white help">帮助</a></li></ul></div></div></div></div></nav></div>
<!--  帮助 <div class='help'> --><div class="a hidden" > <!--帮助部分隐藏--><div class="b"><a href="#">帮助</a><p>客服微信:<br>nahum1970</p><span>如有任何问题，<br>请联系工作人员<br>受理时间：工作日9:00-21:00</span></div><div class="c"><!-- --i是用来计算平面圆柱的动效延迟和距离的--w则是用来计算平面圆柱的宽度 --><div class="d" style="--i:1;--w:1.5"></div><div class="d" style="--i:2;--w:1.6"></div><div class="d" style="--i:3;--w:1.4"></div><div class="d" style="--i:4;--w:1.7"></div><div class="e" style="--i:1"></div></div><!-- 二维码 --><div class="f"></div></div>

css部分代码

/*总的****************************************************/*{/* 初始化 */font-family: 'FangSong', sans-serif ;padding: 0;margin: 0;}body{height: 100vh;}#nav{width: 100%;z-index:99;}.fixed-top{padding-left:10px; }.clock{font-size: 20px;font-family: 'FangSong', sans-serif ; /*仿宋、新宋体*/font-weight: bold;background: url('../img/fff.png') no-repeat center center;background-size: cover;color: transparent;-webkit-background-clip: text;}/*logo图片*/#nav-title{position: absolute;top: 0%;left: 0%;}.navbar-nav{padding-left:20px; }/*顶部导航栏导航*/#sample1 li:not(.infli){padding-bottom: none;list-style-type:none;font-family: 'FangSong', sans-serif ;  /*仿宋、新宋体*/font-size:20px;font-weight: bold;}.nav-ul li a{position: relative;display: block;padding: 10px 20px;text-decoration: none;text-transform: uppercase;/*将字符转为大写*/}.nav-link:link,.nav-link:visited{color:#BF6A1F;}.nav-link:hover,.nav-link:active{color:#A4BFB8;}.nav-link:before{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-top:1px solid #A63126;border-bottom:1px solid #A63126;transform: scaleY(2);/*拉长边框两倍*/opacity: 0;/*边距不显示*/transition: 0.5s;z-index: -1;}.nav-link:hover:before{transform: scaleY(1);/*拉长边框两倍*/opacity:1;}.nav-link:after{content:'';position: absolute;top: 1px;left: 0;width: 100%;height: 100%;background: #A63126;transform: scale(0);transition: 0.5s;z-index: -1;}.nav-link:hover:after{transform: scaleY(1);/*拉长边框两倍*/}/*用户登录图像变化*/.login::before{content: '';display: block;height: 50px;width: 50px;padding: 20px;border-radius: 50%;transform: translate(30px,-30px);background-image: url('../img/ar.jpg');background-size: cover;border: 4px solid #fff;z-index: 999;}.login:hover+.inf{opacity: 1;line-height: 30px;background-color: #fff;transform: translate(0px,40px);height: auto;z-index: 500;}.inf:hover{opacity: 1;line-height: 30px;background-color: #fff;transform: translate(0px,40px);height: auto;z-index: 500;
}.inf li{font-family: 'FangSong'; /*仿宋、新宋体*/list-style-type:none;text-decoration: none;font-size: 14px;}.inf{position: absolute;text-align: center;width: 150px;background-color: #e07a5f;transform: translate(-20px,-200px);border-radius: 10px;padding: 20px 0;line-height: 0;height: 0;transition: .3s;opacity: 0;}/*导航栏折叠按钮*/#tnavbtn{float:right;background-color:transparent;}/**************************************************************************//*帮助*/.a{position: relative;width: 700px;height: 400px;border: #fff 10px solid;background-color:#2A3A59;top: 120px;left: 400px;border-radius: 20px;overflow: hidden;}.b{position: absolute;width: 500px;height: 300px;left: 0;margin: 75px 50px;transition: 1s;}.b a{text-decoration: none;color: #fff;font: 900 28px 'FangSong';}.b p{/* 鼠标放开时的动画，第一个值是动画的过渡时间第二个值是延迟一秒后执行动画 */transition: .5s 1s;opacity: 0;color: rgb(30,210,200);font: 500 24px 'FangSong';}.b span{transition: .5s 1s;color: #fff;font: 500 18px 'FangSong';position: absolute;top: 70px;}.c{position: absolute;top: -130px;right: -240px;}.d,.e{position: absolute;right: calc(var(--i)*100px);width: calc(var(--w)*40px);height: 500px;overflow: hidden;border-radius: 100px;transform: rotateZ(220deg) translate(0,0);background:#D96704;transition: .5s .5s;}.d:nth-child(2){background: #C9D3F2;}.e{left: -470px;top: -140px;width: 70px;background-color: #3BBFA7;}.a:hover .c div{/* 设置延迟动画 */transition: .5s calc(var(--i)*.1s);/* 移动的轨迹 */transform: rotateZ(220deg) translate(-200px,400px);}.a:hover .b{transition: 1s .5s;left: 370px;}.a:hover .b span{transition: 1s .5s;top: 105px;}.a:hover .b p{transition: 1s .5s;opacity: 1;}.f{width: 250px;height: 250px;position: absolute;background-image: url("../img/kk.gif");background-size: cover;margin: 70px;opacity: 0;transition: .5s;}.a:hover .f{transition: 1s 1.3s;opacity: 1;}
/*大屏幕屏幕*/
@media(min-width: 745px){#nav{height: 50px;}/*大屏幕隐藏下拉按钮*/#tnavbtn{display:none;}/*搜索框*/.clock{position: fixed;top:15px;left:580px;margin: 0;padding: 0;display: flex;}/*登录*//*登录图片*/.login{text-decoration: none;display: flex;position: absolute;left: 1150px;padding-top:30px; transition: .3s;cursor: pointer;z-index: 999;}.inf{position: absolute;left: 1130px;}.con-login{position: fixed;top:50px;right:385px;margin: 0;padding: 0;display: flex;background-color:white;z-index:0;}/*------------------------------------------------------------*//*导航动态效果*/.nav-ul{position: fixed;top:10px;left:60px;margin: 0;padding: 0;display: flex;}/*用户导航栏动态样式*/.user-link:link,.user-link:visited{color:#BF6A1F;}.user-link:hover,.user-link:active{color:#4AD9CA;}.login-ul{position: fixed;top:10px;right:60px;margin: 0;padding: 0;display: flex;}.login-ul li a{position: relative;display: block;padding: 10px 20px;text-decoration: none;text-transform: uppercase;/*将字符转为大写*/}.login-ul li a:before{content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-top:1px solid #A62014;border-bottom:1px solid #A62014;transform: scaleY(2);/*拉长边框两倍*/opacity: 0;/*边距不显示*/transition: 0.5s;z-index: -1;}.login-ul li a:hover:before{transform: scaleY(1);/*拉长边框两倍*/opacity:1;}.login-ul li a:after{content:'';position: absolute;top: 1px;left: 0;width: 100%;height: 100%;background:#A62014;transform: scale(0);transition: 0.5s;z-index: -1;}.login-ul li a:hover:after{transform: scale(1);}
}
/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/*xiao屏幕 */
@media(max-width: 745px){/*顶部用户导航隐藏*/.user-nav{display:none;}.nav-link {display: flex;text-align: center;}.login{text-decoration: none;display: flex;padding-top:30px; transition: .3s;cursor: pointer;z-index: 999;}.inf{position: absolute;left: 30px;top:260px;}
}

首页导航栏大屏幕、小屏幕下样式不同，是使用了bootstrap的折叠插件，同时对导航栏的选项加入了媒体响应。不过，因为元素定位使用的是absolute，调整浏览器窗口大小时，导航栏样式改变存在瑕疵。如图：

环形轮播图🔖

📌环形轮播图样式

📌环形轮播图代码

html部分代码

<!--环型轮播图 人物*****************************************************************************************--><div class="user_callback">  <div class="user_pic" id="user_pic">   <span class="prev"></span>   <span class="next"></span>   <ul id="user_call">    <li class="user_pic1"><a href="introduce.html#introduce6"> <img src="img/rwimg/rwwwy.jpg" alt="1" width="248" height="285" /></a></li>    <li class="user_pic2"> <a href="introduce.html#introduce8"> <img src="img/rwimg/rwlsz.jpg" alt="2" width="247" height="285" /></a></li>    <li class="user_pic3"><a href="introduce.html#introduce1"> <img src="img/rwimg/rwpq.jpg" alt="3" width="248" height="285" /></a></li>    <li class="user_pic4"><a href="introduce.html#introduce5"> <img src="img/rwimg/rwssm.jpg" alt="4" width="247" height="285" /></a></li>    <li class="user_pic5"> <a href="introduce.html#introduce3"> <img src="img/rwimg/rwzzj.jpg" alt="5" width="247" height="285" /></a></li>    <li class="user_pic6"><a href="introduce.html#introduce2"> <img src="img/rwimg/rwht.jpg" alt="6" width="247" height="285" /></a></li>    <li class="user_pic7"><a href="introduce.html#introduce4"> <img src="img/rwimg/rwhps.jpg" alt="7" width="247" height="285" /></a> </li>    <li class="user_pic8"><a href="introduce.html#introduce7"> <img src="img/rwimg/rwqy.jpg" alt="8" width="247" height="285" /></a></li>   </ul>  </div>
</div>

css部分代码

/*环型轮播 */
.user_callback{background:#ccccd6;overflow:hidden;width: 100%;padding-top:50px; 
}.user_callback img{border:0;
}
.user_callback li{list-style:none;
}.user_callback #user_pic{position:relative;overflow:hidden;height:450px;width:1200px;z-index:2;margin:0 auto;
}
.user_callback #user_pic ul{width:990px;height:285px;position:relative;top:20px;left:105px;
}
.user_callback #user_pic ul li{position:absolute;
}
.user_callback #user_pic ul img{position:relative;top:0;left:0;
}.user_callback #user_pic ul .user_pic1{top:-285px;left:-231px;z-index:0;}
.user_callback #user_pic ul .user_pic2{top:-23px;left: -99.5px;z-index:2;}
.user_callback #user_pic ul .user_pic3{top: 66px;left: 68px;z-index:3;}
.user_callback #user_pic ul .user_pic4{top:110px;left:247.5px;z-index:4;}
.user_callback #user_pic ul .user_pic5{top:110px;left:495px;z-index:3;}
.user_callback #user_pic ul .user_pic6{top:66px;left:695.5px;z-index:2;}
.user_callback #user_pic ul .user_pic7{top:-23px;left:852px;z-index:1;}
.user_callback #user_pic ul .user_pic8{top:-285px;left:1000px;z-index:0;}.user_callback #user_pic ul .user_pic1 a{width:216.5px;height:248px;}
.user_callback #user_pic ul .user_pic2 a{width:225.5px;height:259px;}
.user_callback #user_pic ul .user_pic3 a{width:247.5px;height:285px;}
.user_callback #user_pic ul .user_pic4 a{width:247.5px;height:285px;}
.user_callback #user_pic ul .user_pic5 a{width:247.5px;height:285px;}
.user_callback #user_pic ul .user_pic6 a{width:247.5px;height:285px;}
.user_callback #user_pic ul .user_pic7 a{width:225.5px;height:259px;}
.user_callback #user_pic ul .user_pic8 a{width:216.5px;height:248px;}.user_callback #user_pic ul li:hover{background:#358C7C;}.user_callback #user_pic ul li.user_pic1{opacity:0.2;filter:alpha(opacity:20);}
.user_callback #user_pic ul li.user_pic2{opacity:0.6;filter:alpha(opacity:60);}
.user_callback #user_pic ul li.user_pic3{opacity:0.8;filter:alpha(opacity:80);}
.user_callback #user_pic ul li.user_pic4{opacity:1;filter:alpha(opacity:100);}
.user_callback #user_pic ul li.user_pic5{opacity:1;filter:alpha(opacity:100);}
.user_callback #user_pic ul li.user_pic6{opacity:0.8;filter:alpha(opacity:80);}
.user_callback #user_pic ul li.user_pic7{opacity:0.6;filter:alpha(opacity:60);}
.user_callback #user_pic ul li.user_pic8{opacity:0.2;filter:alpha(opacity:20);}

js部分代码

链接: gitee

环形轮播图是参考他人的实现，是通过简单的图片坐标动态改变来实现环形轮播效果。其中z-index属性十分重要。

动态卡片展示🔖

📌动态卡片展示样式

📌动态卡片展示代码

html部分代码

<!--图文展示************************************************************************************************* -->
<div class="container con_card"><div class="card" id="c1"><figure class="card__thumb"><img src="img/sj/shcbl.jpg" alt="Picture by Kyle Cottrell" class="card__image"><figcaption class="card__caption"><h2 class="card__title">《伤寒杂病论》</h2><p class="card__snippet">《伤寒杂病论》是中国传统医学著作之一，是一部论述外感病与内科杂病为主要内容的医学典籍，作者是东汉末年张仲景。</p><a href="book.html" class="card__button" style="text-decoration: none;">查看更多</a></figcaption></figure></div><div class="card" id="c2"><figure class="card__thumb"><img src="img/sj/qjf.jpg" alt="Picture by Nathan Dumlao" class="card__image"><figcaption class="card__caption"><h2 class="card__title">《千金方》</h2><p class="card__snippet">《千金方》、《千金要方》又称《备急千金要方》，是中国古代中医学经典著作之一，共30卷，是综合性临床医著，被誉为中国最早的临床百科全书。唐朝孙思邈所著。</p><a href="book.html" class="card__button" style="text-decoration: none;">查看更多</a></figcaption></figure></div><div class="card" id="c3"><figure class="card__thumb"><img src="img/sj/bcgm.jpg" alt="Picture by Daniel Lincoln" class="card__image"><figcaption class="card__caption"><h2 class="card__title">《本草纲目》</h2><p class="card__snippet">《本草纲目》中国古代药学史上部头最大、内容最丰富的药学巨著。明代李时珍撰成于1578年。它被誉为“东方医药巨典”、“中国古代百科全书”。</p><a href="book.html" class="card__button" style="text-decoration: none;">查看更多</a></figcaption></figure></div></div>

css部分代码

/*----------------------------------------------------------------*/
/*图文展示card*/
.con_card{font-size: 62.5%;display: flex;flex-wrap: wrap;justify-content: center;width: 100%;margin: 20px 0 80px;
}
.card {width: 300px;margin: 10px;background-color: white;box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.5);
}
.card:hover .card__caption {top: 50%;transform: translateY(-50%);
}
.card:hover .card__image {transform: translateY(-10px);
}
.card:hover .card__thumb::after {top: 0;
}
.card:hover .card__snippet {margin: 20px 0;
}
.card__thumb {position: relative;max-height: 500px;overflow: hidden;
}
.card__thumb::after {position: absolute;top: 0;display: block;content: '';width: 100%;height: 100%;background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 40%, rgba(255, 255, 255, 0) 100%);transition: .3s;
}
@media (min-width: 1024px) {.card__thumb::after {top: calc(100% - 140px);}
}
.card__image {transition: .5s ease-in-out;
}
.card__caption {position: absolute;top: 50%;z-index: 1;padding: 0 20px;color: white;transform: translateY(-50%);text-align: center;transition: .3s;
}@media (min-width: 1024px) {.card__caption {top: calc(100% - 110px);transform: unset;}
}
.card__title {display: -webkit-box;max-height: 85px;overflow: hidden;font-size: 23px;line-height: 28px;text-shadow: 0px 1px 5px black;text-overflow: ellipsis;-webkit-line-clamp: 3;-webkit-box-orient: vertical;
}
.card__snippet {display: -webkit-box;max-height: 150px;margin: 20px 0;overflow: hidden;font-family: 'Roboto', sans-serif;font-size: 16px;line-height: 20px;text-overflow: ellipsis;transition: .5s ease-in-out;-webkit-line-clamp: 5;-webkit-box-orient: vertical;
}
@media (min-width: 1024px) {.card__snippet {margin: 60px 0;}
}
.card__button {display: inline-block;padding: 10px 20px;color: white;border: 1px solid white;font-family: 'Roboto', sans-serif;font-size: 12px;text-transform: uppercase;text-decoration: none;transition: .3s;
}
.card__button:hover {color: black;background-color: white;
}

动态卡片展示是纯html+css实现的，这种动态卡片的样式可以在很多场景应用，比如人物介绍卡片，商品介绍卡片等等。适当改变动态效果或者卡片排版方式呈现的效果就会与众不同。同时它也加入了媒体响应，可以适用于移动端界面。

手拉风琴式图片展示🔖

📌手拉风琴式图片展示样式

📌手拉风琴式图片展示代码

html部分代码

  <!-- 图片展示**************************************************************************** -->
<div class="container con_fq"><!-- ptc 1 --><div class="item active" style="background-image: url(img/vd.png);"><div class="shadow"></div><div class="content"><div class="icon"><i class="fa fa-youtube-play" aria-hidden="true"><a href=""></a></i></div><div class="text"><div class="tit"><a href="video.html" style="color:#fff;">大医精诚</a></div><div class="sub">欢迎观看中医药纪录片，点击标题以进入...</div></div></div></div><!-- ptc2 --><div class="item" style="background-image: url(img/game.png);"><div class="shadow"></div><div class="content"><div class="icon"><i class="fa fa-gamepad" aria-hidden="true"></i></div><div class="text"><div class="tit"><a href="game.html" style="color:#fff;">游戏</a></div><div class="sub">欢迎体验中医成就配配配小游戏，点击标题以进入...</div></div></div></div><!--ptc 3  --><div class="item" style="background-image: url(img/test.png);"><div class="shadow"></div><div class="content"><div class="icon"><i class="fa fa-book" aria-hidden="true"></i></div><div class="text"><div class="tit"><a href="test.html" style="color:#fff;">挑战</a></div><div class="sub">欢迎进入中医药知识小答题，点击标题以进入...</div></div></div></div></div>

css部分代码

/*手风琴图片展示 */.con_fq{display: flex;margin-bottom: 20px;width:100%;max-width: 1100px;height: 500px;/* 溢出隐藏 */overflow: hidden;
}.item{position: relative;width: 60px;margin: 10px;cursor: pointer;border-radius: 30px;background-size: cover;background-position: center;transition: 0.5s cubic-bezier(0.05,0.61,0.41,0.95);overflow: hidden;
}.item .shadow{position: absolute;bottom: 0;left: 0;right: 0;height: 100px;transition: 0.5s cubic-bezier(0.05,0.61,0.41,0.95);
}.item .content{display: flex;position: absolute;left: 10px;right: 0;bottom: 10px;height: 40px;transition: 0.5s cubic-bezier(0.05,0.61,0.41,0.95);
}.item .content .icon{min-width: 40px;width: 40px;height: 40px;border-radius: 50%;background-color: #fff;display: flex;justify-content: center;align-items: center;font-size: 16px;
}.item:nth-child(1) .fa{color: #fc6e51;
}
.item:nth-child(2) .fa{color: #5d9cec;
}
.item:nth-child(3) .fa{color: #2ecc71;
}
.item:nth-child(4) .fa{color: #5d9cec;
}
.item:nth-child(5) .fa{color: #ac92ec;
}.item .content .text{display: flex;flex-direction: column;justify-content: center;margin-left: 10px;color: #fff;width: 100%;
}
.item .content .text div{width: calc(100% - 70px);text-overflow: ellipsis;overflow: hidden;white-space: nowrap;opacity: 0;transition: opacity 0.5s ease-out;
}.item .content .text .tit{font-weight: bold;font-size: 18px;
}.item .content .text .sub{/* 设置过渡效果延迟时间 */transition-delay: 0.1s;
}/* 选中态样式 */
.item.active{flex: 1;margin: 0;border-radius: 0.1s;
}.item.active .shadow{background: linear-gradient(to top,rgba(0,0,0,0.35) 65%,transparent);
}.item.active .content{bottom: 20px;left: 20px;
}.item.active .content .text div{opacity: 1;
}

js部分代码

//获取所有的.item元素
let items = document.querySelectorAll(".item");//设置选中状态样式
function setActive(){//遍历所有的.item样式 移出 active样式items.forEach((item) =>{item.classList.remove("active");})//为当前选中的这个添加active样式this.classList.add("active");
}
//遍历所有的.item元素 ,分别为其设置点击事件
items.forEach((item) =>{item.addEventListener('click',setActive);
})