html做下拉列表效果

文章目录

html做下拉列表效果

今天我们来实现一下这个界面。

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><style>body{margin: 0;}.clearfix {overflow: auto;}.shadow_box{box-shadow: 0px 3px 10px 1px #888888;}.up-leader {background-color: #333; list-style-type: none;text-align: center;position:sticky;margin: 0;padding: 0;}.up-leader li:not(.dropdown) {display: inline-block;font-size: 20px;padding: 20px;}.up-leader li a, .dropbtn{display: inline-block;color: white;text-align: center;padding: 14px 16px;text-decoration: none;}.up-leader li.dropdown{display: inline-block;font-size: 20px;padding: 20px;}.dropdown:hover {background-color: dodgerblue;}.dropdown-content {display: none;position: absolute;background-color: #f9f9f9;min-width: 160px;box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);z-index: 1;}div.dropdown-content a {color:#000000;padding: 12px 16px;text-decoration: none;display: block;text-align: left;}.dropdown-content a:hover {background-color: #f1f1f1;}.dropdown:hover .dropdown-content {display:block;}div.sticky{position: sticky;top: 0;background:azure;text-align: center;}.img1{float: left;clear:left;margin-left:100px;opacity: 0.8;overflow: auto;}.side-leader ul{list-style-type: 0;margin: 0;padding: 0;width: 7%;height: 100%;background-color:rgb(147, 171, 235) ;position:fixed;overflow: auto;border-radius: 25px;}.side-leader ul li a{display: block;color:#000;padding: 8px 16px;text-decoration: none;font-family:"黑体";}li:hover:not(.dropdown){background-color: #555;color: white;}</style><title>XR官网</title></head><body><div class=" clearfix shadow_box"><img class="img1" src="img/4.png" width="60px" height="60px "  /></div><div class="sticky  "><ul class="up-leader"><li><a href="#home">Home</a></li><li><a href="#news">News</a></li><li><a href="#contact">Contact</a></li><li class="dropdown"><a class="dropbtn" href="index.html">Our World</a><div class="dropdown-content"><a href="#">Link 1</a><a href="#">Link 2</a><a href="#">Link 3</a></div></li></ul></div><div class=" side-leader "><ul ><li><a href="index.html">核心科技</a></li><li><a href="index.html">党政板块</a></li><li><a href="index.html">经营情况</a></li><li><a href="index.html">未来发展</a></li><li><a href="index.html">联系我们</a></li></ul></div><div style="padding-bottom: 2000px;"></div></body>
</html>

直接上所有代码。

html做下拉列表效果相关推荐

QML用径向渐变做波纹效果
要做波纹效果,用径向渐变是最简单的.QML中有两个RadialGradient径向渐变,一个是QtGraphicalEffects模块中的,另一个是QtQuick.Shapes模块中的(Shapes是 ...
给文字做涂鸦效果的五种实现方案
介绍在很多创意网站上,我们都会见到很多文字涂鸦效果,本期我们就介绍五种方法来实现这些文字涂鸦效果,康康如何通过前端技术,一起来让你的网页更有创意吧. 当然在做之前,我们先准备一张涂鸦纹理图哟~ 正文 ...
php打字文本,怎么做打字效果视频制作文字像打字那样出现并且有打字声音的视频画面文字一个一个出...
看电影或是电视剧的时候,会出现这样的一个字幕效果,就是在视频画面上字幕文字像打字那样画面文字一个一个出现并且有打字声音,有没有人跟我一样好奇的这样的字幕是怎么制作出来的,呵呵呵,我们一定要对身边的所有 ...
CorelDRAW中如何做正片叠底效果
我们知道,PS中经常会运用图片的混合模式来做一些效果,那么在CorelDRAW中有没有所谓的图层的混合模式,其实CDR软件中给我们提供了很多用于改变图像色相饱和度的合并模式,但它不是单独列在某一区域, ...
如何对手机网页底部悬浮广告代码做翻转效果，这样做就好了
如何对手机网页底部悬浮广告代码做翻转效果,这样做就好了首先你要有悬浮层,然后给予CSS赋样式,样式如下: //作者:xycms //update:20190442 //QQ:364500483 va ...
网络推广怎么做有效果
现在大部分公司都有在做网络推广,但是真正做的好的却不多,那么网络推广怎么做有效果呢?一米软件总结了以下几点: 1.网络推广定位网络营销推广要做出效果来,离不开你前期的定位,定位正确了,你的网络营销推 ...
css如何做玻璃效果_拓展训练之后的效果保持工作该如何做？
很多企业参加完拓展培训后都面临一个问题--如何延续拓展培训效果?公司出钱出力,希望团队更有战斗力,有更好的精神面貌投入工作,更好地解决公司内部管理问题.可谓是劳苦功高.然而,外因要通过内因起作用.拓展 ...
关于火狐中使用jquery的animate做动画效果的问题解决
好久没来写日记了,手上有点生分了,这次由于之前做过的一个图片切换效果,一直是在IE和CHROME下完成的,没有在火狐下测试,过了一阵子后在火狐上浏览时发现,图片切换似乎没有任何反应,这里将过程进行了一 ...
python能做什么效果_python对于做SEO主要有什么作用？
一直没完整的解释这个问题,这边详细说下吧.准确说不是Python对SEO有什么作用,而是会一门程序语言对SEO有什么用.Python仅是诸多程序语言中,个人评估下来最为推荐的一种,但用其它程序语言一般 ...

html做下拉列表效果

html做下拉列表效果

文章目录

html做下拉列表效果相关推荐

最新文章

热门文章