设计学校官网框架

最新推荐文章于 2024-03-26 11:26:31 发布

qq_37443216

最新推荐文章于 2024-03-26 11:26:31 发布

阅读量1.2k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：网页设计

本文链接：https://blog.youkuaiyun.com/qq_37443216/article/details/70941726

网页设计专栏收录该内容

2 篇文章

订阅专栏

这是一个设计学校官网导航框架的示例，使用HTML和CSS实现了一级及二级菜单。当鼠标悬停在一级菜单上时，对应的二级菜单会显示出来，具有响应式的视觉效果和简洁的布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{margin:0px;
padding:0px;}
#mm{width:990px;/*设置UL的基础属性，一般一级导航只需要设置宽、高*/
height:40px;
/*background:url(../../../All%20Users/Documents/My%20Pictures/%E7%A4%BA%E4%BE%8B%E5%9B%BE%E7%89%87/Water%20lilies.jpg) repeat-x;
background:blue;*/}
#mm li{width:110px;/*每一个LI的基础属性，宽，高，背景颜色*/
height:40px;
background:red;/**/
list-style-type:none;/* 取消项目列表默认符合*/
float:left;/*浮动方式，左对齐*/
color:#0C3;/*字体颜色*/
font-size:16px;/*字体大小*/
text-align:center;/*文字水平对齐方式：居中对齐*/
line-height:40px;/*垂直方向对齐方式，居中*/
}
.erji{width:110px;/*二级导航的基础属性，宽*/
height:auto;/*此处由于二级导航的个数不确定，所以高度请使用自动*/
display:none;/*显示方式：隐藏*/
}
#mm li:hover .erji{display:block;/*对id为mm的无序列表下面的每一个li在鼠标经过的时候，对每一个叫类erji的无序列表执行显示方式：区块显示*/
opacity:0.4;/*透明度，取值范围0-1.1为完全不透明*/}
#mm li:hover .erji li{background:#0C3;
color:white;
font-family:"华文行楷";
}
</style>
</head>

<body>
<ul id="mm">
<li>学院概况
<ul class="erji">
<li>学院简介</li>
<li>学院领导</li>
<li>学院荣誉</li>
<li>学院概况</li>
</ul>

</li>
<li>学院概况<ul class="erji">
<li>学院简介</li>
<li>学院领导</li>
<li>学院荣誉</li>
<li>学院概况</li>

<li>学院简介</li>
<li>学院领导</li>
<li>学院荣誉</li>
<li>学院概况</li>

</ul>
</li>
<li>学院概况</li>
<li>学院概况</li>
<li>学院概况</li>
<li>学院概况</li>
<li>学院概况</li>
<li>学院概况</li>
<li>学院概况</li>

</ul>
</body>
</html>