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. spring(一、原理、IOC、AOP、依赖注入)

    1.spring原理 内部最核心的就是IOC了,动态注入,让一个对象的创建不用new了,可以自动的生产,这其实就是利用java里的反射,反射其实就是在运行时动态的去创建.调用对象,Spring就是在运 ...

  2. message box

    QMessageBox 弹出框上的按钮设置为中文   Qt 默认的弹出框上的按钮式英文,虽然也知道是什么意思,但终究不如中文看着顺眼. QMessageBox box(QMessageBox::War ...

  3. struts2 自定义异常拦截器配log4j

    log4j.rootLogger = debug,stdout,F log4j.appender.stdout = org.apache.log4j.ConsoleAppender log4j.app ...

  4. java 中异常处理示例并捕获完整异常内容

    public class Test { public static void main(String[] args) { try { int a = 1; int b = 0; int c = a/b ...

  5. Python垃圾回收详解:引用计数+标记清理+分代回收

    Python采用的是引用计数机制为主,标记-清理和分代收集两种机制为辅的策略. 1.引用计数 python中一切皆对象,所以python底层计数结构地就可以抽象为: 引用计数结构体{ 引用计数; 引用 ...

  6. linux --- 1.初始linux

    一.计算机简单认识 1.服务器的硬件 ①输入单元:键盘,鼠标,读卡器,触摸屏,手写板 ②主机部分:主板,cpu,显卡,内存条,硬盘,网卡,声卡,电池,散热器 ③输出单元:显示器,打印机 2.内存,cp ...

  7. 第十二章 NIO

    12.NIO 12.1 Java NIO 概述 1课时 12.2 Java NIO.2 之Path.Paths 与 Files 的使用 1课时 12.3 自动资源管理 1课时 12.4 缓冲区(Buf ...

  8. Docker之数据卷Volume（七）

    一.简介   Docker数据卷(volume)机制.volume是存在于一个或多个容器中的特定文件或文件夹,这个目录以独立于联合文件系统的形式在宿主机中存在,并为数据的共享与持久化提供便利. 1)v ...

  9. Day 09 函数基础

    函数初级 简介 # 函数是一系列代码的集合,用来完成某项特定的功能 优点 '''1. 避免代码的冗余2. 让程序代码结构更加清晰3. 让代码具有复用性,便于维护''' 函数四部分 '''1. 函数名: ...

  10. Linux服务器调教日常

    本文为Linux服务器调教日常,不保证正确. 1. sshd配置: https://www.cnblogs.com/byeyear/p/9289063.html 2. 禁止普通用户su 1. 编辑/e ...