WEB第二次作业

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

*{

margin: 0;

padding: 0;

}

#menu{

background-color: blue;

width: 100%;

height: 40px;

}

.item{

float: left;

width: 100px;

height: 40px;

line-height: 40px;

text-align: center;

position: relative;

color: lightblue;

}

.item:hover{

background-color: red;

color: gold;

}

#container{

width: 720px;

margin: auto;

}

.down_menu>div{

background-color: blue;

color: white;

}

.down_menu{

background-color: gold;

display: none;

position: absolute;

}

.item:hover>.down_menu{

display: block;

width: 100px;

height: 40px;

left: 0px;

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 class="item">购物车

<div class="down_menu">

<div>选取商品结算</div>

<div>清空购物车</div>

<div>删除所选的商品</div>

</div>

</div>

<div class="item">我的收藏夹

<div class="down_menu">

<div>收藏的商品</div>

<div>收藏的店铺</div>

</div>

</div>

</div>

</div>

</body>

</html>

相关推荐
杉之1 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端1 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡1 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木2 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!3 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷3 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript
自动花钱机4 小时前
WebUI问题总结
前端·javascript·bootstrap·css3·html5
拉不动的猪4 小时前
简单回顾下pc端与mobile端的适配问题
前端·javascript·面试
拉不动的猪4 小时前
刷刷题49(react中几个常见的性能优化问题)
前端·react.js·面试
snowfoootball5 小时前
基于 Ollama DeepSeek、Dify RAG 和 Fay 框架的高考咨询 AI 交互系统项目方案
前端·人工智能·后端·python·深度学习·高考