html

<body>
        <div class="box1">
           <div></div>
           <div></div>
        </div>
        <!-- 设置2个盒子 -->
        <div class="box2">
            <a href="#">首页</a>
            <a href="#">新闻中心</a>
            <a href="#">新手指南</a>
            <a href="#">游戏大厅</a>
            <a href="#">视频图片</a>
            <a href="#">游戏下载</a>
            <a href="#">论坛</a>
        </div>
        <!-- 导航栏 -->
        </body>
</html>
css
body{
    background-image: url("../img/main_bg.jpg");
    background-size:1400px 600px;
   background-repeat: no-repeat;
   background-color: black;
}
/* 引入背景 缩图调整 */
.box1>div:nth-child(1){
    background-image: url("../img/nav_spr.png");
    margin: auto;
    margin-top: 150px;   
    width: 482px;
    height: 40px;
    background-position: -353px -20px;
}
/*  导航栏上图标引入*/
.box1{
    display: flex;
    justify-content: center;
}
/* 内容格式调整 */
.box1>div:nth-child(2){
    background-image: url("../img/nav_spr.png");
    position: absolute;
    margin: auto;
    margin-top: 180px;  
    width: 1185px;
    height: 54px;
    background-position: 0px -80px;
    margin-left: -10px;
}
/* 导航栏二图片引入 */
.box2{
    margin-left: 100px;
    width: 1148px;
    height: 73px;
    font-size: 0;
    display: flex;
    margin-top: 5px;
    justify-content: space-between;
}
/* 导航栏外图标调整 */
.box2>a:first-child{
    background-image: url("../img/nav_spr.png");
    margin: auto; 
    width: 164px;
    height: 73px;
    font-size: 20px;
    background-position: -0px -150px;
}
/* 图标文字对齐 */
.box2>a:nth-child(2),.box2>a:nth-child(3),
.box2>a:nth-child(4),.box2>a:nth-child(5),
.box2>a:nth-child(6){
    background-image: url("../img/nav_spr.png");
    margin: auto; 
    width: 164px;
    height: 73px;
    font-size: 20px;
    background-position: -705px -153px;
}
/* 设置6个框框，包含文字和图片*/
.box2>a:last-child{
    background-image: url("../img/nav_spr.png");
    margin: auto; 
    width: 164px;
    height: 73px;
    font-size: 20px;
    background-position: -1027px -153px;
}
/* 图标引入 */
a:first-child:hover{
    background-image: url("../img/nav_spr.png");
    background-position: -256px -373px;
}
/*图标引入  */
a:nth-child(2):hover,a:nth-child(3):hover,
a:nth-child(4):hover,a:nth-child(5):hover,
a:nth-child(6):hover{
    background-image: url("../img/nav_spr.png");
    background-position: -256px -373px;
}
/* 6个表格设置 */
a:last-child:hover{
    background-image: url("../img/nav_spr.png");
    background-position: -256px -373px;
}
a{
    color: beige;
    text-align: center;
    text-decoration: none;
    line-height: 80px;
}
/*导航效果设置  */

html背景图星际导航图练习的更多相关文章

  1. 冒泡，setinterval，背景图的div绑定事件，匿名函数问题

    1.会冒泡到兄弟元素么? $(function(){ $("#a").click(function(){alert("a")}) $("#b" ...

  2. 在Excel表里面插入背景图

    工作中我们会经常用到MS Excel,通常我们打开MS Excel,里面的工作表都是空白单调的背景.当然了,MS Excel可以在工作簿里面插入背景图片.那么问题来了,如果你没有安装Microsoft ...

  3. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  4. 关于背景图相对父容器垂直居中问题 —— vertical-align 和 line-height 之间的区别

       html css <div class="register-wrapper"> <div class="register"> &l ...

  5. CSS高效开发实战:CSS 3、LESS、SASS、Bootstrap、Foundation --读书笔记（1）设定背景图

    技术的新发展,除计算机可以接入互联网之外,平板电脑.智能手机.智能电视等其他设备均可访问互联网.在多设备时代,构建多屏体验也不是听说的那么难. 但是这也增加了学习CSS的难度?不知道如何上手,只懂一点 ...

  6. 使用Canvas绘制背景图

    原文  http://www.imququ.com/post/use-canvas-as-background-image.html 最近iCloud Web的Beta版换了UI,整体风格变得和iOS ...

  7. texturepacker打包图片，场景切换时背景图有黑边

    在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...

  8. JS编写背景图切换

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. 给textarea添加背景图

    给textarea添加背景图用的好也很有意思哦. <style type="text/css"> textarea{ background: url(img/carto ...

随机推荐

  1. 【oracle入门】Oracle数据库11g企业版主要优点

    高可靠性.能够尽可能地放置服务器故障.站点故障和人为错误的发生. 高安全信息.可以利用行级安全性.细粒度审计.透明的数据加密和数据的全面会议确保数据安全和遵守法规. 更好的数据管理.轻松管理最大型数据 ...

  2. Idea 2017.3以后版本的破解

    自从升级到idea2017.3之后,之前的license server破解方法貌似已失效.于是找到大神用的破解插件,很好很强大. 安装好idea之后不要打开软件,从http://idea.lanyus ...

  3. jquery中filter的用法

    一.filter的参数类型可分为两种 1.传递选择器 $('a').filter('.external') 2.传递过滤函数 $('a').filter(function(index) {       ...

  4. PTA——乘2后不变

    PTA 7-49 Have Fun with Numbers #include<stdio.h> #include<string.h> #define N 21 int mai ...

  5. Cache架构设计

    Cache策略 定时过期策略 定时过期的好处是Cache节点的个数符合实际需求,不会造成资源滥用和服务器压力 定时过期适合访问量较大,实时性要求不高的情况 如果访问量小,定时过期会造成Cache命中率 ...

  6. 【自动化测试：笔记一】adb命令

    1.查看当前连接的设备数 adb devices 2.连接设备 adb connect <设备名> 3.安装卸载app adb install packagesname adb unins ...

  7. day02-python与变量

    1.堆区开辟空间存放 变量值  2.将存放 变量值 空间的地址提供给栈区  3.栈区为变量名开辟空间存放提供来的地址 变量直接相互赋值 定义变量的优化机制 定义变量与重新赋值

  8. Spring事务原理

    Spring事务的本质是对数据库事务的封装支持,没有数据库对事务的支持,Spring本身无法提供事务管理功能.对于用JDBC操作数据库想要用到事务,必须经过获取连接——>开启事务——>执行 ...

  9. keepalived 高可用配置

    下载地址:http://www.keepalived.org/software/keepalived-1.2.12.tar.gzht 安装方法:1. ./configure 可能出现的错误 !!! O ...

  10. 被称为“开发者神器”的GitHub，到底该怎么用？

    被称为“开发者神器”的GitHub,到底该怎么用? 原文:https://baijiahao.baidu.com/s?id=1594232691312740966&wfr=spider& ...