示例一:界面练习 可自行参照:《阴阳师》手游官网 《阴阳师》手游官网_唯美奇幻 匠心巨制,开启唯美奇幻之旅
导航步骤:
步骤:
1.分盒子:大盒子包裹一个居中的盒子 居中的盒子中有十五个部分
2.写样式:
2.1导航样式:去下划线 去项目符号 改字体颜色 添加背景图
/*导航样式*/
.nav{
width: 100%;
background: url("../images/nav_back_bg_fd2505e.jpg") no-repeat center 0;
height: 60px;
position:relative;
}
/*居中的盒子*/
.wrap{
width: 1180px;
margin: 0 auto;
}
/*列表浮动 宽度行高依据原本要求设置 文字居中*/
.nav li{
float: left;
width: 78.66px;
height: 70px;
line-height: 60px;
font-size: 14px;
text-align: center;
}
/*导航栏字体颜色*/
.nav a{
color:#fff;
}
/*首页的特殊字体颜色*/
.nav-active a {
color:#000;
}
/*首页部分的特殊背景*/
.nav-active{
background: url("../images/nav_bg1_d44f09d.jpg") no-repeat ;
}
2.2写下拉样式即鼠标悬停效果:
/*悬停在列表上时悬浮出背景图片 */
.nav li:hover{
background: url("../images/nav_bg1_d44f09d.jpg") no-repeat 0 center ;
}
/*下拉菜单的样式 -绝对定位*/
.nav-list{
display: none;
left: 0;
top: 60px;
width: 100%;
height: 140px;
position:absolute;
background: url("../images/subnav_bg_5cc9309.jpg") no-repeat center 0;
}
/*确保鼠标悬停时下拉菜单为块级元素 这样就占据了空间 避免高度坍塌*/
.nav li:hover>.nav-list{
display: block;
}
如此导航部分完成,效果如图:
轮播图步骤:(只做页面结构先不做轮播效果)
1.建立盒子加入背景图片 -
这里要注意:溢出部分要用overflow:hidden去隐藏
且需要将子元素要在父元素中水平居中.,
将其往右下移动父元素宽高的一半,再将其往左上移动自己宽高的一半,
图片宽高:1920*784
css代码如下:
.banner{
width: 100%;
height:784px;
overflow: hidden;
position: relative;
}
.banner img{
/* 设置子元素在父元素中水平居中 */
position: absolute;
top:50%;
left:50%;
/* 往左上移动自己宽高的一半 */
margin-top: -392px;
margin-left: -960px;
}
如此便实现第一步:背景图片居中
但是同时也出现错误:
下拉菜单被遮挡 因此将导航对应的z-index属性设至最大即可 且改变后中间的空隙 只需将图片元素向上移即可。
z-index 堆叠顺序:
取值为负数,取值越大,层级越高,越往上
可以取负值
默认值为auto,和父元素同一等级
必须配合定位(static除外)元素使用
完成以后第二步:利用绝对定位实现阴阳师logo的添加:
.banner .logo{
width: 77px;
height: 247px;
background: url("../images/200.png") no-repeat;
position:absolute;
left: 150px;
top: 143px;
background-size: 100%;
}
第三步:依旧利用相对定位完成阴影部分
css:
.news{
width: 100%;
height: 287px;
background: url("../images/bot_head_bg_450ba6b.webp") repeat-x center bottom ;
/* 绝对定位后才能看到图片 */
position:absolute;
left: 0;
bottom: 0;
}
第四步 填内容:
这里只写雪碧图中的内容:
1.1准备容器
1.2定位(这里正好在左上角因此不用改动)
代码:
.download{
width: 145px;
height: 287px;
background: url("../images/index_z_9ac8591.png") ;
如此第一 部分就结束啦!效果如图:
全部代码如下:
<body>
<!-- 导航开始 -->
<div class="nav">
<div class="wrap">
<ul>
<li class="nav-active">
<a href="#"> 官网首页 </a>
</li>
<li>
<a href="#">新闻资讯</a>
<!-- 下拉列表 -->
<div class="nav-list"></div>
</li>
<li>
<a href="#">式神录</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">游戏攻略</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">大社区</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">泛娱乐</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">视听中心</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">主题站</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">周边商城</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">藏宝阁</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">官方渠道</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">数字藏品馆</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">福利兑换</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">系统转移</a>
<div class="nav-list"></div>
</li>
<li>
<a href="#">道具特惠</a>
<div class="nav-list"></div>
</li>
</ul>
</div>
</div>
<!-- 导航结束 -->
<!-- 轮播图开始 -->
<div class="banner">
<img src="./images/5670f94c-039d-4c82-8c20-1b9f14fed364.jpg" alt="">
<span></span>
<div class="logo"></div>
<div class="news">
<div class="wrap">
<div class="download"></div>
</div>
</div>
</div>
<!-- 轮播图结束 -->
</body>
css:
body{
max-width: 1920px;
margin: 0 auto;
}
/* 导航样式开始 */
.nav{
width: 100%;
background: url("../images/nav_back_bg_fd2505e.jpg") no-repeat center 0;
height: 60px;
/* 没有定位写相对定位(出去static以外的都可 这里需要用到fixed因此relative可改掉) */
/* position: relative; */
/* 固定定位使导航栏始终保持在页面顶部*/
position:fixed;
top: 0;
left: 0;
/* 使导航下拉菜单保持最前 */
z-index: 999;
/* text-align: center; */
}
.wrap{
width: 1180px;
margin: 0 auto;
}
.nav li{
float: left;
width: 78.66px;
height: 70px;
line-height: 60px;
font-size: 14px;
text-align: center;
}
.nav a{
color:#fff;
}
.nav-active a {
color:#000;
}
.nav-active{
background: url("../images/nav_bg1_d44f09d.jpg") no-repeat ;
}
/* 下拉列表 */
.nav li:hover{
background: url("../images/nav_bg1_d44f09d.jpg") no-repeat 0 center ;
}
.nav-list{
display: none;
left: 0;
top: 60px;
width: 100%;
height: 140px;
position:absolute;
background: url("../images/subnav_bg_5cc9309.jpg") no-repeat center 0;
}
.nav li:hover>.nav-list{
display: block;
}
/* 导航样式结束 */
/* 轮播图样式开始 */
.banner{
width: 100%;
height:784px;
overflow: hidden;
position: relative;
/* 将导航栏固定到顶部时图片跟着上去了所以要margin-top将导航栏露出来 */
margin-top: 60px;
}
.banner img{
/* 设置子元素在父元素中水平居中 */
position: absolute;
top:50%;
left:50%;
/* 往左上移动自己宽高的一半 */
margin-top: -392px;
margin-left: -960px;
}
.banner .logo{
width: 77px;
height: 247px;
background: url("../images/200.png") no-repeat;
position:absolute;
left: 150px;
top: 143px;
background-size: 100%;
}
.news{
width: 100%;
height: 287px;
background: url("../images/bot_head_bg_450ba6b.webp") repeat-x center bottom ;
/* 绝对定位后才能看到图片 */
position:absolute;
left: 0;
bottom: 0;
}
.download{
width: 145px;
height: 287px;
background: url("../images/index_z_9ac8591.png") ;
}
/* 轮播图样式结束 */