web第二次作业
代码如下
<!DOCTYPE html>
<html>
<head>
<!-- 设置页面的字符编码为utf-8，确保能正确显示各种字符 -->
<meta charset="utf-8">
<title></title>
<style>
/* 全局样式设置 */
*{
/* 将所有元素的外边距设置为0%，去除默认的外边距 */
margin: 0%;
/* 将所有元素的内边距设置为0%，去除默认的内边距 */
padding: 0%;
}
/* 菜单的样式设置，通过id选择器定位到id为menu的元素 */
#menu{
/* 设置菜单的背景颜色为蓝色 */
background-color: blue;
/* 设置菜单的宽度为整个浏览器窗口的宽度，即100% */
width: 100%;
/* 设置菜单的高度为40像素 */
height: 40px;
}
/* 菜单项的样式设置，通过类选择器定位到具有item类的元素 */
.item{
/* 使菜单项向左浮动，实现水平排列 */
float: left;
/* 设置每个菜单项的宽度为100像素 */
width: 100px;
/* 设置每个菜单项的高度为40像素，与菜单高度一致 */
height: 40px;
/* 设置行高为40像素，使菜单项内的文本垂直居中 */
line-height: 40px;
/* 设置文本在菜单项内水平居中对齐 */
text-align: center;
/* 设置菜单项的定位方式为相对定位，以便后续进行更精确的位置调整 */
position: relative;
/* 设置菜单项的文本颜色为浅灰色 */
color: lightgrey;
}
/* 当鼠标悬停在菜单项上时的样式变化 */
.item:hover{
/* 将菜单项的背景颜色改为黑色 */
background-color:black;
/* 将菜单项的文本颜色改为金色 */
color: gold;
}
/* 容器的样式设置，通过id选择器定位到id为container的元素 */
#container{
/* 设置容器的宽度为720像素 */
width: 720px;
/* 设置容器在浏览器窗口中水平居中，通过自动计算左右外边距实现 */
margin: auto;
}
/* 下拉菜单内部每个子项的样式设置，通过类选择器定位到具有down_menu类的元素下的div子元素 */
.down_menu>div{
/* 设置下拉菜单内部子项的背景颜色为蓝色 */
background-color: blue;
/* 设置下拉菜单内部子项的文本颜色为白色 */
color:white;
}
/* 下拉菜单的整体样式设置，通过类选择器定位到具有down_menu类的元素 */
.down_menu{
/* 设置下拉菜单的背景颜色为金色 */
background-color: gold;
/* 初始时将下拉菜单设置为不显示 */
display: none;
/* 设置下拉菜单的定位方式为绝对定位，以便精确控制其在页面中的位置 */
position: absolute;
}
/* 当鼠标悬停在菜单项上时，显示对应的下拉菜单，并设置其位置和尺寸 */
.item:hover>.down_menu{
/* 将下拉菜单设置为显示状态 */
display: block;
/* 设置下拉菜单的宽度为100像素，与菜单项宽度一致 */
width: 100px;
/* 设置下拉菜单的高度为40像素 */
height: 40px;
/* 设置下拉菜单的左边距为0像素，使其与对应的菜单项左对齐 */
left: 0px;
/* 设置下拉菜单的上边距为40像素，使其出现在对应的菜单项下方 */
top: 40px;
}
</style>
</head>
<body>
<div id="menu">
<div id="container">
<div class="item">游戏资料
<div class="down_menu">
<div>游戏下载</div>
<div>新手指引</div>
<div>资料库</div>
<div>开发者基地</div>
</div>
</div>
<div class="item">商城/合作
<div class="down_menu">
<div>点券充值</div>
<div>周边商城</div>
<div>道聚城</div>
<div>网吧特权</div>
<div>电竞小说</div>
</div>
</div>
<div class="item">社区互动
<div class="down_menu">
<div>视频中心</div>
<div>官方微博</div>
</div>
</div>
<div class="item">赛事官网
<div class="down_menu">
<div>全球总决赛</div>
<div>全国高校联赛</div>
</div>
</div>
<div class="item">自助系统
<div class="down_menu">
<div>封号查询</div>
<div>账号注销</div>
<div>信誉分查询</div>
<div>服务器状态查询</div>
<div>转区系统</div>
</div>
</div>
<div class="item">在线客服
<div class="down_menu">
<div>联系客服</div>
<div>消息中心</div>
<div>意见反馈</div>
<div>举报中心</div>
</div>
</div>
</div>
</div>
</body>
</html>
运行结果
原文地址：https://blog.csdn.net/2302_77662352/article/details/143590978
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！