1.一般logo的处理居中显示

  <body><div class="header"><div class="header_wrapper area"><!-- 左边 --><div class="left_area"><h1 class="logo"><a href="#"></a></h1><div class="left_center">111</div></div><!-- 右边 --><div class="right">right</div></div></div></body>

 <style>.header {height: 84px;background: rgba(0, 0, 0, 0.8);line-height: 84px;}/* 整体flex布局，两端 */.header .area {display: flex;justify-content: space-around;}/* 分别左右各占一部分 */.header .area .right {background-color: aqua;}/* 左边的自己里面也是flex布局 */.header .left_area {display: flex;}
/* 设置左边里面第一部分的图标居中显示 */.header .left_area .logo a {position: relative;top: 50%;transform: translate(0, -50%);display: block;width: 200px;height: 54px;background: url(./img/logo_header.png);}</style>

2.左边导航栏的布局

这里采用ul>li列表标签，通过每个li里面包一个a标签，然后再包括一个span标签，使之分别两行显示

    <ul class="nav_list"><li class="item"><a href="#">游戏资料<span class="tes">DATA</span></a></li><li class="item"><a href="#">内容中心<span class="tes">CONTENTS</span></a></li><li class="item"><a href="#">赛事中心<span class="tes"> MATCH</span></a></li><li class="item"><a href="#">百态王者<span class="tes">CULTURE</span></a></li><li class="item"><a href="#">社区互动<span class="tes">COMMUNITY</span></a></li><li class="item"><a href="#">玩家支持<span class="tes">PLAYER</span></a></li><li class="item"><a href="#">IP新游<span class="tes">NEW GAMES</span></a></li></ul></div>

  .left_area .nav_list {display: flex;}.left_area .nav_list .item {width: 110px;}.left_area .nav_list .item a {display: block;color: #c9c9dd;font-size: 18px;line-height: 30px;text-align: center;}.left_area .nav_list .item a .tes {font-size: 12px;/* 独占一行,行内元素 */display: block;color: #858792;}

3.右边登录模块

    /* 分别左右各占一部分 */.header  .right {display: flex;/* 图片文字居中 */align-items: center;}.header  .right .image img{border: 1px solid #d9ad50;border-radius: 50%;}.header  .right .info a {padding-left: 5px;color: #ffffff;font-size: 16px;}.header .right .info p {padding-left: 5px;color: #858792;font-size: 12px;}

 <div class="right"><a href="#" class="image"><img src="./img/logo_header2.png" alt=""/></a><div class="info"><a href="#" class="right_login">欢迎登录</a><p class="right_game">登录后查看游戏战绩</p></div></div>

王者荣耀静态页面头部代码设计（2）相关推荐

王者荣耀静态页面头部代码设计（1）
1.首先先定义好盒子的高度和位置,以及中间内容使用flex布局去占据两端 .top {border: 1px solid #f5f5f5;}.top .area {height: 41px;/* 采用 ...
王者荣耀静态页面中间代码设计（1）
这个部分分为三个小部分 1.第一部分是一个图片加导航栏,这里还没有实现轮播图效果 <div class="news-section"><div class=&qu ...
王者荣耀T恤图案图形设计大赛—英雄台词字体设计
王者荣耀T恤图案图形设计大赛-英雄台词字体设计保留作者信息禁止商业使用修改作品禁止更改版权信息 -如果王者出一个类似NBA的数据的话,我绝对是助攻王,场均助攻5.6次,哈哈 -最近闲暇时经常和奶 ...
普歌-允异团队-【Java实例】一起做一个简单的王者荣耀RPG吧！从设计思路到代码实现一条龙！-登录与注册（IO流）/记录时间/属性面板呈现
[Java实例]-王者荣耀RPG-从设计思路到代码实现前言一.案例分析 1. 设计理念 2. 功能设计 (1)登录与注册 (2)游戏时间记录 (3)选择游戏模式 (4)游戏地图 (5)生物属性二 ...
手机qq表白代码大全可复制_《王者荣耀》苹果空白代码怎么打苹果空白代码输入教程...
导读王者荣耀苹果空白代码是什么?王者荣耀名字提示重复时,大家第一反应就是改名字了,如果实在喜欢这个名字不想改的话,可以通过一些特殊方法处理,比如名字上加特殊符号,还有一个方法就是在名字上加上空白名 ...
王者荣耀主页面html,CSS3实现王者荣耀匹配人员加载页面的方法
玩过王者的应该都熟悉,这个页面的效果.为什么要实现这个效果了? 第一:王者这么火,电竞这么火. 第二:主要还是来学习 CSS3 的线性.径向渐变.旋转.缩放以及动画. 图形解析 1.背景(径向渐变) ...
mysql制作html静态网页6_将数据库中的所有内容生成html静态页面的代码
将数据库中的所有内容生成html静态页的代码,比较简单了,有需要的朋友可以参考下. 复制代码代码如下: require_once("conn.php"); if($_GET['a ...
C#语言: 生成静态页面核心代码
using System; using System.Data; using System.Configuration; using System.Web; using System.Net; usi ...
oppo watch安装王者荣耀，adb完整代码及步骤
1.手表进入设置-其他设置-关于手表- 2.多次点击'版本号',打开开发者调试 3.返回到'其他设置'中,查看底部'开发者选项',打开usb调试 4.连接电脑,选择调试,和文件传输 5.电脑安装adb ...

王者荣耀静态页面头部代码设计（2）

1.一般logo的处理居中显示

2.左边导航栏的布局

3.右边登录模块

王者荣耀静态页面头部代码设计（2）相关推荐

最新文章

热门文章