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. 清楚理解const_cast类型转换

    1.任何使用原常量的地方, 已经直接编码到代码中去了.故后续转换类型并不能改变原定义 2.const_cast转换, 是使用了新指针或者引用,指向了原定义的内存,故而可以修改该内存. 使用也得用新指针 ...

  2. Ubuntu下math库函数编译时未定义问题的解决

    自己在Ubuntu下练习C程序时,用到了库函数math.h,虽然在源程序中已添加头文件“math.h”,但仍提示所用函数未定义,原本以为是程序出错了,找了好久,这是怎么回事呢? 后来上网查了下,发现是 ...

  3. macbook 下hadoop伪分布式安装

    1 准备原材料 1.1  jdk 1.8.0_171(事先安装并配置环境变量HAVA_HOME,PATH) 1.2 Hadoop 2.8.3 2 免密登陆配置(否则安装过程需要不断输入密码) 2.1 ...

  4. ubuntu 初始安装完成后的一些设置

    处于安全考虑最好,使用普通用户登录. 首先以超级用户登入系统,然后执行以下步骤 第一步:设置普通用户 以下<user_name>代表普通用户的用户名 useradd -g users -d ...

  5. 使用SURF::create()以后报错无法解析

    理论上,如果在cmake中勾选了Build_opencv_world.OPENCV_ENABLE_NONFREE以及选择了OPENCV_EXTRA_MODULES_PATH三项后,再编译INSTALL ...

  6. @angular/cli 工程 项目 配置

    如果你创建工程项目用angular-cli 你的样式文件想使用scss, 并且让ng serve自动编译它们 你可以在创建项目的时候用 ng new sassy-project --style=sas ...

  7. Discuz! X3 全新安装图文教程

    Discuz! 是腾讯旗下 Comsenz 公司推出的以社区为基础的专业建站平台,帮助网站实现一站式服务.让论坛(BBS).个人空间(SNS).门户(Portal).群组(Group).应用开放平台( ...

  8. python找递归目录中文件,并移动到一个单独文件夹中,同时记录原始文件路径信息

    运营那边有个需求. 下载了一批视频文件,由于当时下载的时候陆陆续续创建了很多文件夹,并且,每个文件夹下面还有子文件夹以及视频文件,子文件夹下面有视频文件或者文件夹 现在因为需要转码,转码软件只能对单个 ...

  9. C# datagridview大小跟随窗口动态改变(转)

    在C#中使用winform布局的时候,拖一个datagridview到窗体上面,将datagridview调整为适合窗体的大小. 但是运行之后,点击最大化按钮的时候,发现datagridview的大小 ...

  10. 原生js创建模态框(摘自:东窗凝残月 链接:https://www.cnblogs.com/dcncy/p/9076937.html)

    <!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Te ...