社区
CSS
帖子详情
web实训 3.19 第二次作业
是在为难我胖虎
2019-03-23 08:37:39
主要内容:导航栏(变换菜单,多级菜单) 复习js,html,还有css 2,jQuery基础:就是js框架,简单易用,代码最少。 作业要求: 导航栏 方法一:div方法的实现 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> a{ color: #FFFF99; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } #top{ padding: 10px 10px 0; font-size: 12px; font-weight: bold; margin: 1px 0 0; list-style: none; border-bottom: 8px solid #DCE6F4; overflow: hidden; background-color: #33b5e5; } .top-nav{ float: left; margin-right: 1px; background-color: #333333; position: relative; width: 80px; height: 20px; text-align: center; line-height: 20px; } .top-nav span{ position: absolute; visibility: hidden; } .top-nav:hover span{ line-height: 20px; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; padding-top: 2px; visibility: visible; top:0; left: 0; color:#FFFFFF; background:#DC4E1B; } </style> </head> <body> <div id="top"> <div class="top-nav"><a href="123">首页<span class="span">Home</span></a></div> <div class="top-nav"><a href="123">课堂大厅<span class="span">Course</span></a></div> <div class="top-nav"><a href="123">学习中心<span class="span">Learn</span></a></div> <div class="top-nav"><a href="123">关于我们<span class="span">About</span></a></div> </body> <html> 方法二:ul li方法的实现 完整代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变换菜单</title> </head> <style type="text/css"> a{ color: #FFFF99; text-decoration: none; } a:hover{ color: #FFFFFF; text-decoration: underline; } .top-nav{ padding: 10px 10px 0; font-size: 12px; font-weight: bold; margin: 1px 0 0 0; list-style: none; border-bottom: 8px solid #DCE6F4; overflow: hidden; background-color: #33b5e5; } .top-nav li{ float: left; margin-right: 1px; } .top-nav li a{ position: relative; z-index: 0; line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; } .top-nav li a span{ position: absolute; visibility: hidden; } .top-nav li a:hover span{ line-height: 20px; text-decoration: none; background: #DDDDDD; color: #666666; display: block; width: 80px; text-align: center; padding-top: 2px; visibility: visible; top:0; left: 0; color:#FFFFFF; background:#DC4E1B; } </style> <body> <div id="top"> <ul class="top-nav"> <li class="top-nav"><a href="#">首页<span>Home</span></a></li> <li class="top-nav"><a href="#">课堂大厅<span>Course</span></a></li> <li class="top-nav"><a href="#">学习中心<span>Learn</span></a></li> <li class="top-nav"><a href="#">关于我们<span>About</span></a></li> </ul> </div> </body> </html> 首页Home 课堂大厅Course 学习中心Learn 关于我们About 效果图:
...全文
44
1
打赏
收藏
web实训 3.19 第二次作业
主要内容:导航栏(变换菜单,多级菜单) 复习js,html,还有css 2,jQuery基础:就是js框架,简单易用,代码最少。 作业要求: 导航栏 方法一:div方法的实现 完整代码: Title a{ color: #FFFF99; text-decoration: none; } a:ho
复制链接
扫一扫
分享
转发到动态
举报
写回复
配置赞助广告
用AI写文章
1 条
回复
切换为时间正序
请发表友善的回复…
发表回复
打赏红包
hookee
2019-03-24
打赏
举报
回复
云计算架构师的自我修养--计算篇
2.12 CloudWatch动手实验 3.13 AWS命令行(Command Line) 3.14 IAM(Identity Access Management)角色 3.15 EC2启动时运行脚本 3.16 EFS云中的NFS 3.17 EC2 置放组 3.18 EC2 总结
3.19
EC2 测验
随书光盘资源下载/提取码(二)
3.35GB Premiere Pro CS5 DV视频制作入门与实战 2.86GB Premiere Pro CS5视频编辑剪辑实战从入门到精通 4.07GB Premiere Pro视频编辑剪辑制作完美风暴 1.96GB Pro/E Wildfire 4.0二次开发实例解析 470.87MB Pro/E ...
重要知识结构-持续更新中
第二, 你可以了解美国这边Econ PHD上的一些课,怎么上课这边 第三, 不论是在国内读博的同学还是要到这边来开始PHD生活的兄弟姐妹,可以把它当作一个你自己学东西的参考,这里面虽是我个人的偏颇之见,但是很多...
WEB
入门.七 CSS布局模型
(1) 自适应宽度的嵌套浮动布局
3.19
CSS代码片段: XHTML代码片段: 第1列 第2列 第3列 在浏览器中的运行效果如图3.1.19所示。 图3.1.19 自适应宽度 (2) 并列浮动布局 该类型为固定宽度布局。 3.20 CSS代码...
《苍穹外卖》电商实战项目(java)知识点整理(P1~P65)【上】
nginx负载均衡的配置: 在
web
servers里面定义一组服务器,用于承接访问负载: 4. nginx负载均衡的策略: 服务器不一定需要平均承接请求,可以通过更改参数赋以不同的权重: 技巧: 1. 按F12可以打开浏览器的调试...
CSS
61,112
社区成员
60,732
社区内容
发帖
与我相关
我的任务
CSS
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
复制链接
扫一扫
分享
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
加入社区
获取链接或二维码
近7日
近30日
至今
加载中
查看更多榜单
社区公告
暂无公告
试试用AI创作助手写篇文章吧
+ 用AI写文章