2021-03-01

xiexuzhao

于 2021-03-01 16:18:29 发布

阅读量51

点赞数

分类专栏：程序

本文链接：https://blog.csdn.net/xiexuzhao/article/details/114265288

版权

程序专栏收录该内容

278 篇文章 1 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="js/jquery-3.5.1.js" type="text/javascript"></script>
<%--<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>--%>
<style>
.login
{

<%-- margin: 17px 0;
display: inline-block;
vertical-align: middle;
width: 112px;
height: 36px;
line-height: 34px;
border: 1px solid #0076fe;
text-align: center;
background-color: #0076fe;
font-size: 14px;
border-radius: 28px;
color: #fff;
box-sizing: border-box;--%>


margin: 17px 0;
display: inline-block;
vertical-align: middle;
width: 100%;
height: 36px;
line-height: 34px;
border: 1px solid #dcdcdc;
border-radius: 28px;
text-align: center;
font-size: 14px;
color: #333;
background: #fff;
box-sizing: border-box;
transition: color .3s,border-color .3s;
}
*
{
padding: 0;
margin: 0;
}
/*超链接去掉下划线 css链接下划线怎么去掉*/
a
{
text-decoration: none;
}
a:hover
{
text-decoration: none;
}
.fl
{
float: left;
}
.fr
{
float: right;
}
.topnav
{
margin: 0 auto;
width: 1200px;
height: 40px;
line-height: 40px;
background-color: #fd463e;
}
.nav
{
}
.nav ul, li
{
list-style-type: none;
}
.nav li
{
float: left;
display: inline;
margin: 0 5px 0 5px;
background-color: White;
border-radius: 28px; /*css 圆角*/
box-shadow: 0 3px 4px rgb(0 0 0 / 10%); /*css 阴影*/ /*background-image: linear-gradient(#e66465, #9198e5); css 渐变*/
}
.nav li:hover
{
background-color: Blue;
}
.nav ul, li .sub
{
position: absolute; /*脱离结构绝对定位总是会需要使用到绝对定位absolute，使用绝对定位的话经常会出现绝对定位的层脱离了文档流的问题*/
z-index: 9;
background-color: #fff;
height: 50px;
width: 100px;
border: 1px solid #ffebee;
display: none;
overflow: hidden;
}
.clear
{
clear: both;
}
.window
{
display: none;
width: 500px;
height: 600px;
background-color: #fd463e; /*div高出其它层*/
z-index: 9999; /*div水平垂直居中*/
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
<script type="text/javascript">
$(function () {
$("#open").click(function () {
if ($(".window").is(':hidden')) {
$(".window").show();
}
else {
$(".window").hide();
}
});
$("#sub").hover(function () { $(".sub").show(); }, function () { $(".sub").hide(); });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="topnav">
<ul class="nav">
<li><a href="#" id="sub">菜单<i class="fai-icon arrow-icon">
                       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 9 5"><g><g><polyline points="0.5 0.5 4.5 4.5 8.5 0.5" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round"></polyline></g></g></svg>
                   </i></a>
<div class="sub">
b</div>
</li>
<li><a href="#" id="A1">菜单</a> </li>
<li><a href="#" id="A2">菜单</a> </li>
<li><a href="#" id="A3">菜单</a> </li>
</ul>
<div class="fr">
<a href="javscript:void(0)" id="open" class="login">注册</a>
</div>
</div>
<div class="clear">
</div>
<div>
<div class="window">
</div>
</div>
</form>
</body>
</html>