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);
})

手拉风琴式图片展示的基本原理和环形轮播图类似，这里改变的是图片显示大小，同时通过点击事件来实现大小改变。这类手拉风琴式图片展示的样式多种多样，可以是标题加图片、也可以图片加大段文字介绍，或者是让动态效果更加炫酷等等。

总结🔖

总体来说，首页的实现完成得不错，但是基本以图片的展示为主，如果添加适当的文字介绍，用户体验或许会更好。整体的UI风格不是很和谐，轮播图和后面的内容视觉效果上有点割裂，这个可以进行改进。还有就是前面提到的导航栏的元素布局和媒体响应的产生的效果有瑕疵，这个也应该改进。