阴阳师界面部分练习01

示例一：界面练习可自行参照：《阴阳师》手游官网《阴阳师》手游官网_唯美奇幻匠心巨制，开启唯美奇幻之旅

导航步骤：

步骤：

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") ;}/* 轮播图样式结束 */

阴阳师界面部分练习01相关推荐

linux蓝色界面,让Ubuntu7.01开机登录显示蓝色与黑色
从Ubuntu7.10正式发布开始就用ubuntu7.10了,但是总觉的那开机的黄色不太另人舒服. 我觉得kubuntu的界面很不错,蓝色 .我还是比较喜欢蓝色和黑色的结合. 现在动手告别黄色,向富有 ...
Python GUI界面编程初步 01 - GUI库的特点和选择
1 Python 的常用GUI库和特点 Tkinter: Tkinter 模块(Tk 接口)是 Python 的标准 Tk GUI 工具包的接口 .Tk 和 Tkinter 可以在大多数的 Unix ...
子弹短信APP用户体验及界面设计浅析01
子弹短信APP 子弹短信,是由北京快如科技研发.锤子科技投资的一款即时通讯App,其最大的亮点是高效沟通.它不仅支持语音输入.文本输入,同时还支持"语音输入.文字输出". 它的成就 ...
四、完成Teigha.net库对CAD看图的放大/缩小/移动实体等界面操作，图层管理器，以及CAD文件布局的切换功能
目录一.Teigha.net界面化操作 01.根据鼠标指定位置放大缩小功能 02.移动选中的实体 03.选中指定矩形范围的实体二.Teigha.net图层显示.锁定.冻结状态界面化管理 01.Kr ...
用java的robot类以及Gui 制作一个游戏(阴阳师)脚本
** 用java的robot类以及Gui 制作一个游戏(阴阳师)脚本 ** 由于阴阳师这个游戏肝度太大,就决定写一个脚本来模拟玩家的重复性操作.所以我就决定用java中的robot类中的一些方法来 ...
计算机考试新界面,整体更加简洁，Windows 10发布全新界面
整体更加简洁,Windows 10发布全新界面 2020-07-02 13:01:14 5点赞 9收藏 14评论微软一直在改进自家Windows 10的界面,以求在功能上和视觉上都做到更加简洁.早先 ...
jQuery1.4的15个新特性实例精讲
为什么80%的码农都做不了架构师?>>> jQuery 1.4 的发布超乎大家的预期,这次并非简单的修修补补,1.4 包含了很多新特性.功能增强和性能提升!本文即向您介绍这些可 ...
phpcms9.6 ueditor_PHPCMS V9.6.6 修改版
本帖最后由 zhaoxunzhiyin 于 2020-12-12 18:14 编辑 PHPCMS V9.6.6 修改版官方改了后台界面,修复bug 安装文件不检查index.html 安装完删除安装目 ...
分子克隆科研利器SnapGene，测序验证好帮手
首先需要下载软件(文末下载),然后安装,打开软件后的界面如下: 01 创建DNA文件可以点击New DNA File输入自己从数据库上下载的序列,或测序得到的系列,对于质粒,Topology选择ci ...

阴阳师界面部分练习01

导航步骤：

轮播图步骤：（只做页面结构先不做轮播效果）

阴阳师界面部分练习01相关推荐

最新文章

热门文章