1.首先先定义好盒子的高度和位置，以及中间内容使用flex布局去占据两端

  .top {border: 1px solid #f5f5f5;}.top .area {height: 41px;/* 采用flex布局，将顶部的左右两部分分开 */display: flex;/*如果不加上这个属性，就会使左右两部分紧挨，写了space-between就可以两边对齐  */justify-content: space-between;/* 这里盒子的宽度并不随内容的高度多大就多大，默认align-items:normal;默认原本的盒子高度*/}.top .area .left {background-color: bisque;}.top .area .right {background-color: blue;}</style><body><div class="top"><div class="top_wrapper area"><div class="left">left</div><div class="right">right</div></div></div></body>

2.进一步优化，采用精灵图和图片进行布局

<body><div class="top"><div class="top_wrapper area"><div class="left"><div class="logo"><a href="#">腾讯游戏</a></div><div class="recommed"><img src="./img/left_top1.jpg" alt="" /></div></div><div class="right"><ul><li><a href="#" class="growth">成长守护平台</a></li><li><a href="#" class="game">腾讯游戏排行榜</a></li></ul></div></div></div></body>

 <style>.top {border: 1px solid #f5f5f5;}.top .area {height: 41px;/* 采用flex布局，将顶部的左右两部分分开 */display: flex;/*如果不加上这个属性，就会使左右两部分紧挨，写了space-between就可以两边对齐  */justify-content: space-between;/* 这里盒子的宽度并不随内容的高度多大就多大，默认align-items:normal;默认原本的盒子高度*/}.top .area .left {/* 这里采用flex布局，使left里面的两个部分都能一行显示 */display: flex;/* 垂直居中 */line-height: 41px;/* background-color: bisque; */}/* 使ul里的li同一行显示 */.top .area .right ul {display: flex;/* background-color: blue; */}.top .area .right a {position: relative;display: block;margin-left: 20px;color: #464646;font-size: 14px;font-weight: 400;}.top .area .right .growth::before {content: "";position: absolute;background: url(./img/title_sprite.png);background-position: -30px 0;width: 30px;height: 30px;/* 左边图标 */left: 0;top: 0;bottom: 0;margin: auto 0;/* width: 30px;height: 30px;top: 5px;left: 5px; */}.top .area .right .growth {padding-left: 30px;}/* 伪元素 */.top .area .right .game::after {content: "";position: absolute;background: url(./img/title_sprite.png);background-position: 0 0;width: 30px;height: 30px;/* 右边图标 */right: 0;top: 0;bottom: 0;margin: auto 0;/* 透明度 */opacity: 0.2;/* 旋转90度 */transform: rotate(90deg);}.top .area .right .game {padding-right: 30px;}.top .area .left .logo a {display: block;width: 150px;text-indent: -9999px;background: url(./img/logo.png) no-repeat center center;}</style>

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

王者荣耀静态页面头部代码设计（2）
1.一般logo的处理居中显示 <body><div class="header"><div class="header_wrapper a ...
王者荣耀静态页面中间代码设计（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 ...

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

1.首先先定义好盒子的高度和位置，以及中间内容使用flex布局去占据两端

2.进一步优化，采用精灵图和图片进行布局

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

最新文章

热门文章