阴阳师界面部分练习01

最新推荐文章于 2024-08-23 06:12:23 发布
最新推荐文章于 2024-08-23 06:12:23 发布
阅读量205 收藏 4
点赞数 2
分类专栏： css HTML 文章标签： html css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59418570/article/details/129306963
版权
css 同时被 2 个专栏收录
7 篇文章 0 订阅
订阅专栏
HTML
4 篇文章 0 订阅
订阅专栏
文章详细介绍了如何使用CSS设计《阴阳师》手游官网的导航栏和轮播图。内容包括导航栏的样式设定，如背景图片、字体颜色以及下拉菜单的悬停效果，以及轮播图的结构布局，包括背景图片的居中显示、子元素定位和阴影部分的创建。此外，还提到了z-index的应用来解决元素遮挡问题。
摘要由CSDN通过智能技术生成

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

 导航步骤：

步骤：

        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") ;
 
}

/* 轮播图样式结束 */

好好学前端的欣欣同学
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jiaoben_阴阳师魂十jb_
10-04
《阴阳师：魂十攻略与自动化工具解析》 在热门手游《阴阳师》中，“魂十”（又称御魂第十层）是玩家们挑战的主要副本之一，旨在获取高级御魂以提升式神的能力。"jiaoben_阴阳师魂十jb_"这个标题暗示了一个专门针对...
基于HTML的阴阳师静态网页
li3123537691的博客
04-28 296
阴阳师静态网页
阴阳师官网导航栏 html+css
u013430418的博客
07-06 1149
通过css html实现阴阳师官网的顶部导航栏具体样式
超简单，Python爬取阴阳师游戏原声
01-20
Python爬取阴阳师游戏BGM,附完整代码爬取阴阳师游戏原声网页分析教程开始1 请求json文件并获取数据2 保存文件注意，一定要看结语完整源码 目标网址：https://yys.163.com/media/music.html 结果展示： 爬取阴阳师...
阴阳师头像框编年素材.rar
09-11
《阴阳师头像框编年素材》是一款专为阴阳师玩家设计的头像素材资源库，包含了122个高清且精美的头像，旨在提供多样化的选择，满足玩家个性化的需求。这些头像框设计独特，风格各异，既体现了游戏本身的美学特色，又...
阴阳师家园3DMAX场景模型
03-17
《阴阳师家园3DMAX场景模型》是一款专为游戏爱好者和3D建模师精心打造的资源包，其中包含了丰富的3D模型与贴图素材，主要用于构建阴阳师世界观下的各类场景。这款资源包以日本知名手游《阴阳师》为主题，为用户提供...
阴阳师桌面多开器安全不封号（自用）.rar
09-10
《阴阳师桌面多开器：安全游戏多开的探索与实践》 在网络游戏的世界里，多开器是一种受到玩家关注的工具，特别是对于那些热衷于《阴阳师》的玩家们而言，多开器能帮助他们同时管理多个账号，提高游戏效率。本文将...
HTML DOM 对象
最新发布
lly202406的博客
08-23 305
HTML DOM对象是JavaScript与HTML文档交互的桥梁。通过DOM，开发者可以轻松地访问和操作页面元素，实现动态内容和交互功能。掌握DOM是前端开发的重要技能之一。
Java学习Day33：HTML 第三章：挟魂崖
weixin_51721783的博客
08-21 983
JavaScript中，dom是一套操作文档内容的方法，可以完成查、增、删、改（先删后增）的操作。而且dom的开发效率很高，还可以用于服务器渲染、weex 开发等。本文向大家介绍JavaScript中的dom。1、什么是dom？dom，全称Document Object Model文档对象模型，是 W3C 的标准；[所有浏览器公共遵守的标准]。用于处理网页内容的方法和接口，简单的说就是一套操作文档内容的方法。2、dom组成：由HTML、CSS、事件（交互）组成。
Java学习Day32：HTML 第二章：黑风山
weixin_51721783的博客
08-20 1004
我是儿子</a> <p> <a href="#">我是孙子
【HTML】语义化
DX390609的博客
08-22 285
根据内容的结构选择合适的标签。
webpack打包html
svygh123的专栏
08-22 412
Webpack 是一个非常强大的模块打包器，它可以将各种资源（如 JavaScript、CSS、HTML 文件等）作为模块来处理和打包。对于模块化的 HTML 网站，Webpack 可以帮助你优化资源加载、管理依赖关系以及实现代码分割等功能。
html快速入门
m0_52049533的博客
08-22 436
/
原神4.8版本重点培养和抽到角色数据表：修改了添加倒计时.隐藏了抽到角色数据表删除按钮、备注列和选择列
lulei5153的博客
08-22 686
当用户修改某个字段（等级、命座、天赋）时，不仅更新当前表格的数据，还会找到另一个表格中对应的角色，并更新其数据。最后，重新渲染两个表格以显示最新的数据。这样可以确保两个表格的数据始终保持一致。
【HTML】DOCTYPE作用
DX390609的博客
08-22 256
DOCTYPE不存在或者形式不正确会导致HTML或XHTML文档以混杂模式呈现，就是把如何渲染html页面的权利交给浏览器。有多少浏览器就会有多少种展示方式，因此要提高浏览器兼容性就必须重视。CSS1 Compat：标准模式（Strick mode），浏览器使⽤W3C的标准解析渲染⻚⾯。BackCompat：怪异模式(混杂模式)(Quick mode)，默认模式，⻚⾯以⼀种⽐较宽松的向后兼容的⽅式显示。，告诉浏览器文档的类型，便于解析文档。不同渲染模式会影响浏览器对CSS代码甚至JS脚本的解析。
【HTML】用盒子模型划分网页模块
weixin_51649465的博客
08-20 999
☞ 所谓的盒子模型在HTML中就是一个盛装元素内容的容器。☞ 每个盒子模型都由元素的内容、宽高、内边距（padding）、边框（border）和外边距 （margin）组成。
Vue: v-html安全性问题
q1003675852的博客
08-22 527
本文主要记录了Vue: v-html安全性问题及其解决方案。
HTML实现俄罗斯方块
m0_65134936的博客
08-21 649
这段代码展示了如何用JavaScript实现一个基础的俄罗斯方块游戏，支持基本的方块操作、行消除和游戏状态控制。可以在此基础上添加更多功能，比如计分系统、关卡设计等。这段代码使用HTML、CSS和JavaScript实现了一个简单的俄罗斯方块游戏，包含基本的游戏逻辑、行消除功能以及暂停和继续游戏的控制。对于编程新手或正在学习新知识的程序员，可以使用ChatGPT来做助手，减少出错性和重复性代码的时间。本篇文章有用到ChatGPT-4o代码纠错，国内可稳定使用，感兴趣的大佬试试。
Java学习Day31：HTML 第一章：观音禅院
weixin_51721783的博客
08-20 3004
单词> ：元素标签 ：首先中至少有两个单词，那第一个肯定是元素标签，元素标签后跟的都是属性标签。
python 阴阳师
09-12
阴阳师是一款由日本公司 NetEase Games 开发的手机游戏，它是一款RPG和策略类游戏，玩家需要在游戏中扮演阴阳师，与各种妖怪进行战斗并收集不同的式神。如果你想在 Python 中开发一个类似的游戏，你可以使用 Pygame ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值