7.20王者荣耀导航栏1

最近在写王者荣耀官网网页，后续会和大家分享自己的成品，今天呢，给大家分享一下王者荣耀导航栏的写法，会有不足之处，还会加以改进

导航栏的html我将其分为左中右三个区域

   <header><div class="nav"><!-- 左边区域 --><div class="logo1"><img src="img/header.img/logo1.png" alt=""></div><!-- 中间区域 --><div class="game-intro"><ul><li><h2>游戏资料</h2><h5>DATA</h5></li><li><h2>内容中心</h2><h5>CONTENTS</h5></li><li><h2>赛事中心</h2><h5>MATCH</h5></li><li><h2>百态王者</h2><h5>CULTURE</h5></li><li><h2>社区互动</h2><h5>COMMUNITY</h5></li><li><h2>玩家支持</h2><h5>PLAYER</h5></li><li><h2>IP新游</h2><h5>NEW GAMES</h5></ul></div><!-- 右边区域 --><div class="login"><img src="img/header.img/hero.png" alt=""><h4>欢迎登陆</h4><span>登陆后查看游戏战绩</span></div></div></header>

CSS样式

body{background-image: url(../img/header.img/bg.webp);width: 100%;
}
header{height:84px ;background-color:rgba(0,0,0,.8) ;
}.nav{
width: 1250px;
height: 84px;
margin: 0 auto;
/* background-color: red; */
}
/* nav左边区域 */
.logo1{float: left;
}
.logo1 >img{margin-top:20px ;
}
/* nav中间区域 */
.game-intro{float: left;width: 805px;height: 84px;margin-left: 40px;
}
.game-intro>ul>li{float: left;width:115px ;height:84px ;
}.game-intro>ul>li>h2{text-align: center;font-size: 20px;margin-top: 23px;color: #fff;font-weight: 500;
}
.game-intro>ul>li>h5{text-align: center;font-size: 12px;color: #fff;margin-top: 8px;font-weight: 500;
}
/* hover效果 */
.game-intro>ul>li:hover{background-color: rgb(31,51,47);border-bottom:4px solid rgb(243,194,88);
}
.game-intro>ul>li:hover >h2{color:rgb(243,194,88) ;
}
.game-intro>ul>li:hover >h5{color:rgb(243,194,88) ;
}
/* nav右边区域 */
.login {float: right;width: 182px;margin-top: 20px;cursor: pointer;
}.login img {display: block;border: 1px solid rgb(243,194,88);border-radius: 50%;float: left;margin-right: 8px;
}.login h4 {font-weight: 400;font-size: 16px;color: #fff;
}.login span {font-size: 14px;color: #858792;
}

关于下拉框的实现，请关注后续更新

导航栏的部分虽大同小异，但经过几天的练习以及在自己写项目的过程当中，发现自己还是有许多许多不足之处，还是有许多需要注意的地方，比如一些标签的使用，浮动之后的布局等，但这也不是什么难事。加油吧！何惧黑夜漫漫，黎明终将到来！共勉

7.20王者荣耀导航栏1相关推荐

css:动画高级垂直导航栏王者荣耀导航栏
垂直导航栏 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...
爬取虎牙之一：（王者荣耀主播信息普通爬取）
使用工具 jsoup 对于新手而言,jsoup无疑是最简单的抓取工具之一,强大的解析能力让人方便使用,对于我们新手而言,获取只是看过爬虫书或者资料用简单的例子爬取所有链接,想要爬取想要的内容,首先要熟 ...
导航栏: UINavigationBar用法
来源:雨松MOMO 利用代码在屏幕中添加一个标题栏,并且在标题栏左右两方在添加两个按钮,点击后响应这两个按钮. 这里设置标题栏的显示范围. 1 //创建一个导航栏 2 UINavigationBar ...
使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
20+顶尖高校同时开打《王者荣耀》！实际上是一场科研battle，你能信？
金磊假装发自王者峡谷量子位报道 | 公众号 QbitAI 不是吧,不是吧. 一群学霸聚集在一起,竟然是为了打<王者荣耀>?! 而且还是来自清北.中科院.浙大等20余所顶级学府的那种 ...
20行 Python 代码爬取王者荣耀全英雄皮肤 | 原力计划
作者 | wangweijun 责编 | Elle 出品 | CSDN 博客引言王者荣耀大家都玩过吧,没玩过的也应该听说过,作为时下最火的手机MOBA游戏,咳咳,好像跑题了.我们今天的重点是爬取王 ...
20行Python代码爬取王者荣耀全英雄皮肤改进版
0 写在前面看了大神的这篇CSDN:20行Python代码爬取王者荣耀全英雄皮肤访问量那么高,忍不住想要蹭一下热点,但是蹭归蹭,总得有点货才行,于是我品我细品,发现其代码总体有三点我觉得值得改进的地 ...
[转载]20行Python代码爬取王者荣耀全英雄皮肤
20行Python代码爬取王者荣耀全英雄皮肤,这是高手.原文链接: https://blog.csdn.net/qq_42453117/article/details/103190981 除了语言学习 ...
简单20行代码爬取王者荣耀官网1080p壁纸
简单20行代码爬取王者荣耀官网1080p壁纸 # -*- coding: utf-8 -*- # @Time : 2020/12/13 18:08 # @Author : ningfangcong i ...

7.20王者荣耀导航栏1

7.20王者荣耀导航栏1相关推荐

最新文章

热门文章