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. python rtree包查找三维空间下的最近设备

    rtree模块有2个常用的类:rtree.index.Index和rtree.index.Property.其中rtree.index.Index用于进行数据操作,rtree.index.Proper ...

  2. 温度转换-java

    java 温度转换 题目内容: 写一个将华氏温度转换成摄氏温度的程序,转换的公式是: °F = (9/5)*°C + 32 其中C表示摄氏温度,F表示华氏温度. 程序的输入是一个整数,表示华氏温度.输 ...

  3. 解决插值表达式闪烁问题 - v-cloak

    v-cloak页面在js没有加载出来的时候,不显示该部分 linux可以通过响应式设计模式,来模拟2,3G网络 <!DOCTYPE html><html><head> ...

  4. Synchronized 有几种用法？

    我们都知道 Synchronized 是线程安全同步用的,大部分程序可能只会用到同步方法上面.其实 Synchronized 可以用到更多的场合. 1.同步普通方法(锁实例对象) 这个也是我们用得最多 ...

  5. easyUI默认图标的使用

    使用格式如下: <table id="table" class="easyui-datagrid" style="width:600px;hei ...

  6. mysql悲观锁

    悲观锁与乐观锁是两种常见的资源并发锁设计思路,也是并发编程中一个非常基础的概念. 悲观锁(Pessimistic Lock) 悲观锁的特点是先获取锁,再进行业务操作,即“悲观”的认为获取锁是非常有可能 ...

  7. 如何在myeclipse中实现jquery的自动提示功能

    在web开发过程中,myeclipse中jsp可以实现自动提示功能,但是jquery代码却无法实现自动提示,需要自己一个个手动去输入,效率过低,怎么办? 工具/原料   jquery 1.8.3.js ...

  8. centos-rpm安装的mariadb,php52源码编译安装时注意点

    1.不要静态指定with-mysql 以扩展的mysql.so的形式安装 2.找不到header file之类的 要yum install mysql-devel find / -name mysql ...

  9. mysqlbinlog基于时间点恢复

    基于时间点恢复 /data/mysq/mysqlbin.000026 #mysqlbinlog文件,恢复如下内容: 注意:按照时间点恢复时,可能同一个时间点有其他的操作,要结合上下文的时间选取~ # ...

  10. HTTP Request & Response

    Request & Response header details can be found here The request method indicates the method to b ...