html基础之好看的header

自己编写了一个适用的header（仅用于学习），部分运用了JQ（可以有弹窗table，可以自己设计），运用JQ可以自己下载或者运用在线的JQ

这是我用的在线JQ的链接放在这了：

html代码：

<div class="header-div"><ul class="header-ul"><li class="header-li"><em><b style="color: white;" id="toubu">我的首页</b></em></li><li class="header-li"><a href=""><em>课程</em></a><i class="tagging">热门</i></li><li class="header-li"><a class="" href=""><em>江湖</em></a></li><li class="header-li"><a class="" href=""><em>专栏</em></a></li><li class="header-li"><a class="header-download" href="/download"><em>下载</em></a><script>$(".header-download").mouseover(function(){$(".tanchuang").css("display","block")})$(".header-download").mouseleave(function(){$(".tanchuang").css("display","none")})</script></li><li class="header-li"><a class="" href="https://www.baidu.com/"><em>导航</em></a></li><div class="land-div"><li class="land-li"><a href="land.html" target="_top"><em>登录</em></a></li></div></ul></div>

 <table class="tanchuang" ><tr><th>项目</th><th colspan="3">可下载</th></tr><tr><td colspan="4">暂时无法下载哦~</td></tr></table>

css代码：

a:hover{color: rgb(10, 10, 10);
}
a{text-decoration: none;color:white;
}
.header-div{width: 1408px;height: 20px;padding: 8px 16px;background-color:  rgb(0 0 0 / 73%);border-radius: 10px;
}
.tagging{font-size: 3px;width: 24px;height: 16px;color: #fdfcfc;background-color: red;padding: 0px 6px;border-radius: 20px ;border: 1px;position: absolute;top: 11px;}
.header-ul{margin-block-start: 0px;margin-block-end: 0px;width: 1408px;height: 20px;overflow: hidden;white-space: nowrap;padding: 0%;
}.header-li{list-style: none;float: left;margin-left: 20px;width: 100px;
}.land-li{list-style: none;float: right;padding-right: 30px;
}
.tanchuang{border: 1px solid black;border-spacing: 0px;border-collapse: collapse;position: relative;left: 480px;top: 0px;display: none;width: 99px;}
td,th{border: 1px solid black;text-align: center;}

html基础之好看的header相关推荐

python-12：怎么在爬虫代码中伪装header
2019独角兽企业重金招聘Python工程师标准>>> 还是这张图,我们看到,header中有很多信息,究竟哪一个是我们需要的呢其实有可能一个也不需要,有可能全部都需要,这取决于你 ...
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程（97 个视频）
React + Redux + Express + Mongodb 零基础开发完整大型商城网站视频教程(97 个视频) mern 架构零基础开发完整电商网站 React + Redux + Expre ...
Windows上最全wsl2使用配置，包含基础配置、高级配置、开发工具、机器学习环境配置、机器人与自动驾驶环境配置（如Ros及百度的无人驾驶系统apollo）、服务器及Web开发环境配置等等
Windows上最全wsl2使用配置,包含基础配置.高级配置.开发工具.机器学习环境配置.机器人与自动驾驶环境配置(如Ros及百度的无人驾驶系统apollo).服务器及Web开发环境配置等等. 文章比 ...
[WPF] UserControl vs CustomControl
原文:[WPF] UserControl vs CustomControl 介绍 WPF中有两种控件:UserControl和CustomControl,但是这两者有什么区别呢?这篇博客中将介绍两者之 ...
基于React的贪吃蛇游戏的设计与实现
代码地址如下: http://www.demodashi.com/demo/11818.html 贪吃蛇小游戏(第二版) 一年半前层用react写过贪吃蛇小游戏https://github.com/c ...
Nginx 配置学习
官方文档一.概述 Nginx的配置放在配置文件nginx.conf/etc/nginx/nginx.conf中,大概的结构如下: main # 全局配置events { # nginx工作模式配置} ...
信息编码 — 进大厂必备底层能力之一（文末有彩蛋）
3月18日 20:00 由C站白月光,20年码龄的技术VC大咖为大家带来信息编码 - 进大厂必备底层能力之一,以下为直播文字实录: 今晚主题是一个偏底层的话题:[计算机信息编码]. 为什么选择这个话 ...
2021 年最新的个人录制的前后端真正的免费编程学习视频
2021 年最新的个人录制的前后端真正的免费编程学习视频我这里有视频教程,全部是我自己辛苦录的,有兴趣的可以看下. 诱人的 React 免费视频教程 - 基础篇(14 个视频 - 已完结) 诱人的 ...
以太网帧与ieee 802.3帧
http://zhidao.baidu.com/question/93567501.html http://blog.csdn.net/wzw200/archive/2009/07/23/437305 ...

html基础之好看的header

html基础之好看的header相关推荐

最新文章

热门文章