html背景图星际导航图练习
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;
}
/*导航效果设置 */
