html制作星际图,html背景图星际导航图练习

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;

}

/*导航效果设置  */