css:动画高级垂直导航栏王者荣耀导航栏

垂直导航栏

<!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" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">a {display: block;width: 120px;height: 50px;line-height: 50px;text-decoration: none;text-align: center;color:#fff;}.red {background-color: red;}.red:hover {width: 180px;background-color: purple;}.skyblue {background-color: skyblue;}.skyblue:hover {width: 180px;background-color: red;}.pink {background-color: pink;}.pink:hover {width: 180px;background-color: orange;}.purple {background-color: purple;}.purple:hover {width: 180px;background-color: blue;}.orange {background-color: orange;}.orange:hover {width: 180px;background-color: green;}</style>
</head>
<body><a class="red" href="#">导航项</a><a class="pink" href="#">导航项</a><a class="skyblue" href="#">导航项</a><a class="purple" href="#">导航项</a><a class="orange" href="#">导航项</a>
</body>
</html>

王者荣耀导航栏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>* {margin: 0;padding: 0;}li {list-style: none;}/*导航栏通栏背景*/.bg {position: relative;border-bottom: 1px solid #000;background-color: rgba(0 ,0 ,0, 0.8);}.logo {margin-top: 16px;float: left;width: 200px;height: 54px;background: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/logo.png) 0 0 no-repeat;}.nav {width: 1200px;height: 83px;margin: 0 auto;}.drop {position: absolute;width: 100%;height: 0;background-color: rgba(0 ,0 ,0, 0.7);transition: height .5s ease;}.box {margin-top: 42px;height: 1100px;background: url(https://ossweb-img.qq.com/upload/webplat/info/yxzj/20210916/6208970056642.png) center top no-repeat;}.nav ul {float: left;margin-left: 25px;}.nav li {float: left;}.nav a {display: block;width: 121px;height: 83px;line-height: 83px;color: #c9c9dd;font-size: 18px;text-decoration: none;text-align: center;}.nav a:hover {color: #e4b653;background: url(https://game.gtimg.cn/images/yxzj/web201706/images/comm/index.png) 0 0 no-repeat;}/*鼠标经过bg盒子 让drop高度变高*/.bg:hover .drop{height: 360px;}</style>
</head>
<body><div class="box"><div class="bg"><div class="nav"><div class="logo"></div><ul><li><a href="#"> 网站首页 </a></li><li><a href="#"> 网站首页 </a></li><li><a href="#"> 网站首页 </a></li><li><a href="#"> 网站首页 </a></li><li><a href="#"> 网站首页 </a></li><li><a href="#"> 网站首页 </a></li><li><a href="#"> 网站首页 </a></li></ul></div><div class="drop"></div></div></div>
</body>
</html>

css:动画高级垂直导航栏王者荣耀导航栏相关推荐

7.20王者荣耀导航栏1
最近在写王者荣耀官网网页,后续会和大家分享自己的成品,今天呢,给大家分享一下王者荣耀导航栏的写法,会有不足之处,还会加以改进导航栏的html我将其分为左中右三个区域 <header>&l ...
画火柴人动画的手机软件_王者荣耀玩家画的火柴人造型的英雄图五的英雄你能猜出是谁吗...
王者荣耀中英雄的形象已经让很多玩家印象深刻了,而很多民间画师画出来的英雄也很好看,不过民间画师他们的画功还是有差距的,一些比较不熟练的他们就会直接把英雄画成火柴人的样子,今天我们就来欣赏几张火柴人版的 ...
爬取虎牙之一：（王者荣耀主播信息普通爬取）
使用工具 jsoup 对于新手而言,jsoup无疑是最简单的抓取工具之一,强大的解析能力让人方便使用,对于我们新手而言,获取只是看过爬虫书或者资料用简单的例子爬取所有链接,想要爬取想要的内容,首先要熟 ...
HTML5期末大作业：游戏类网站设计——王者荣耀(60页) HTML+CSS+JavaScript
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 游 ...
仿写王者荣耀官方静态网站-腾讯游戏（HTML+CSS）
1.简介我根据王者荣耀腾讯官方网站仿写的静态网站, 目录 1.简介 2.HTML 部分 3.CSS部分 font.css index.css 2.HTML 部分 <!DOCTYPE html& ...
自定义动画 animate || 案例：王者荣耀手风琴效果分析
自定义动画 animate <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
【CSS】课程网站横版导航栏 ( 横版导航栏测量及样式 | 代码示例 )
文章目录一.盒子测量及样式 1.总体盒子测量及样式 2.左侧盒子测量及样式 3.中间盒子测量及样式 4.右侧盒子测量及样式二.横版导航栏代码示例 1.HTML 标签结构 2.CSS 样式 3.显示 ...
【Linux云计算架构：第三阶段-Linux高级运维架构】第25章—— 搭建jumperserver管理王者荣耀数万台游戏服务器
本节内容: 34.1 Jumpserver堡垒机概述-部署Jumpserver运行环境 34.2 安装Coco组件 34.3 安装Web-Terminal前端-Luna组件-配置Nginx整合各组件 ...
JQuary效果（自定义动画，王者荣耀效果案例）
一,自定义动画自定义动画非常强大,通过参数的传递可以模拟以上所有动画,方法为:animate() 语法规范如下: 1,语法 animate(params,[speed],[easing],[fn]) ...

css:动画高级垂直导航栏王者荣耀导航栏

css:动画高级垂直导航栏王者荣耀导航栏相关推荐

最新文章

热门文章

css:动画 高级垂直导航栏 王者荣耀导航栏

css:动画 高级垂直导航栏 王者荣耀导航栏相关推荐

最新文章

热门文章

css:动画高级垂直导航栏王者荣耀导航栏

css:动画高级垂直导航栏王者荣耀导航栏相关推荐