html背景图星际导航图练习

最新推荐文章于 2022-08-24 17:44:09 发布
转载 最新推荐文章于 2022-08-24 17:44:09 发布 · 205 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/zhuxinpeng-looking/p/10574711.html

该博客转载了一篇关于HTML的内容，原文链接为https://www.cnblogs.com/zhuxinpeng-looking/p/10574711.html 。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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;
}
/*导航效果设置  */

转载于:https://www.cnblogs.com/zhuxinpeng-looking/p/10574711.html

强力推荐：关于谷歌ChatGPT模型用户测试的140个示例的展示与实现功能
源代码杀手的博客
01-02 1万+
ChatGPT模型是由 OpenAI 训练的大型语言模型，能够生成类人文本。通过向它提供提示，它可以生成继续对话或扩展给定提示的响应。在此存储库中，您将找到可与 ChatGPT 一起使用的各种提示。我们鼓励您将自己的提示添加到列表中，并使用 ChatGPT 生成新提示。要开始使用，只需克隆此存储库并使用 README.md 文件中的提示作为 ChatGPT 的输入。您还可以使用此文件中的提示作为创建您自己的提示的灵感。我们希望您发现这些提示很有用，并能从使用 ChatGPT 中获得乐趣！查看拥抱的脸下载 C
广州.Net+Android训练营 课程体系4.1版
gzcz2545119563的专栏
04-18 3327
--- 总学时3个月 重要升级信息： a.加入.Net for Android 和 Unity3D游戏开发，.Net也可以开发 Android/IOS 的3D游戏啦！ 1. Part1.0：.Net基础加强、数据库操作、三层架构 Part1.1：C#基础增强 核心技术课程 1.C#基础加强：属性原理、OOP高级、多态、多态的两种代码表现形式、静态
HTML css背景图练习——魔兽世界官网页面
coising的博客
01-21 610
index.css body { background: url(../CSS学习/背景图/img/bg.jpg) no-repeat center top; } .clearfix::after{ content: ""; display: block; clear: both; } .header{ width: 1198px; height: 73px; /* 文字居中 */ line-height: 73px; color
HTML导航 - 点击更改背景
weixin_34077371的博客
06-05 386
步骤一： 在须要添加效果的&lt;li&gt;标签中添加onclick事件：&lt;li onclick="setcurrent(this)"&gt; 步骤二： 加入JS代码： function setcurrent(obj){ var a = document.getElementById('父级标签id').getElementsByTagName("li"); ...
image-background:使用html和CSS创建图像背景的小练习
05-25
图像背景 描述 :memo: 使用html和css创建图像背景的小练习。 安装 :wrench: 1.-将存储git clone https://github.com/junix7/image-background.git到目录git clone https://github.com/junix7/image-background.git 2.-在您喜欢的浏览器中打开index.html 。 演示版 :optical_disk: 您可以在以下地址观看现场。 内置 :hammer_and_wrench: HTML CSS 执照 :page_with_curl: MIT许可证（MIT）。 谢谢 :wrapped_gift: 对于所有信任我的人<3
html制作星际图,html背景图星际导航图练习
weixin_30803191的博客
06-10 211
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("../i...
HTML顶部状态栏更改背景,适合做导航栏背景的图片
weixin_33427476的博客
05-30 4310
在一级菜单里设置了背景图片 二级不想要背景图片了怎么办？？加一个 #nav li ul li {background:none;}导航栏的背景，我像用其他图片的，怎么设置？想法是先拟定一个导航栏样式，PSD格式的，然后切片。然后我该怎么办让他导航栏的背景,我像用其他图片的,怎么设置? 20 想法是先拟定一个导航栏样式,PSD格式的,然后切片。然后我该怎么办让他变成导航栏呢,在带上子菜单怎么设置?....
卷积神经网络 图像识别,卷积神经网络处理图片
kfc67269的博客
08-24 1607
3、基于MATLAB语言的网络训练与仿真建立并初始化网络% ================S1 = 24;在学习阶段应该用大量的样本进行训练学习，通过样本的大量学习对神经网络的各层网络的连接权值进行修正，使其对样本有正确的识别结果，这就像人记数字一样，网络中的神经元就像是人脑细胞，权值的改变就像是人脑细胞的相互作用的改变，神经网络在样本学习中就像人记数字一样，学习样本时的网络权值调整就相当于人记住各个数字的形象，网络权值就是网络记住的内容，网络学习阶段就像人由不认识数字到认识数字反复学习过程是一样的。
CSS练手小项目
weixin_44048140的博客
06-23 1023
刚学了一些CSS和HTML视频的百度搜索哔哩哔哩然后搜索尚硅谷CSS李立超，这个视频里面有HTML和CSS视频，老师讲的我认为是非常好，反正我听得懂，然后写出了这个项目，把小米首页几乎所有的模块都实现了一下，没有学JavaScript所以有的功能就没有实现，有些布局也很勉强，通过这次写项目，让我可以自主的去解决很多问题。如果我以下的源码有问题，或者编码的格式有不好的地方希望大佬们能提出来 对比效果 首先原网站图与自定义实现对比 首先是原图 自定实现的效果 通过如上的图可以看出并不是完全一样.
各种经典源码，应有尽有
fxry6669的专栏
01-05 737
酒店管理系统(绝对经典) 这是我的一个网友发给我的,希望对你们有帮助哦 http://www.ibeifeng.com/read-htm-tid-10774.html&u=53596 【C#】学生成绩管理系统、打字练习的源代码 希望对大家有所帮助。。。 http://www.ibeifeng.com/read-htm-tid-8118.html&u=53596 C#源码100例 http://ww
导航条背景图
07-19
该资源与本人博客第二篇文章代码配合使用
带图片式导航html,js,css
06-23
带图片式导航，带图片式导航html,js,css
html+CSS样式：雪花飘落背景
04-14
详细介绍见：https://blog.youkuaiyun.com/renjingzhaozhao/article/details/105383605
html背景属性代码自学,HTML自学之旅（一）基本元素与属性练习(自写代码)
weixin_42503223的博客
05-30 90
我是按照W3school上面的教程学习的，个人觉得教程很不错，每节都有小练习，加油！都是自己敲的代码，有的书上反对自己写代码，但是我觉得因为没有基础，自己写写还是有好处的，嘿嘿，个人意见不同吧。。练习1：复制代码代码如下:This is heading 1This is heading 1This is heading 1This is heading 1This is heading 1This...
导航栏背景图片
qq_16231975的专栏
05-03 601
iOS6： 非retina：320*44 retina   ：640*88 iOS7： retina  ：640*128
HTML连载35-背景图片的练习、精灵图
weixin_44630050的博客
09-07 408
一、背景图片练习 解释：这个例子需要注意的是，我们背景图片嵌套到另一个图片之中。我们设计的注意点在于，怎么定位到我们想定位到的地方。 总结：背景图片就是一块一块的，我们想把块的位置定位好（一般就是宽和高的相等），然后再对图片在“块”中进行位置调整就可以了 <!DOCTYPE html> <html lang="en"> <head> <meta c...
HTML连载80-多重背景图片及其练习
weixin_44630050的博客
04-05 741
一、多重背景图片 1.background:url() 重复类型 位置信息,url() 重复类型 位置信息； 中间使用英文逗号隔开 2.第二种方法就是分开写 background-image:url(),url(); background-repeat:重复类型,重复类型； background-positon:位置信息,位置信息； <!DOCTYPE html> <html l...
html导航栏背景图片,页面导航栏滚动时改变导航栏背景样式及回到顶部
weixin_33169898的博客
06-04 1733
页面导航栏滚动时改变导航栏背景样式html：Demo.hero{padding-top: 409px;} HomeFeatureOverviewPricingTeamblogDownloadaaaabbb返回顶部：1、在压面 body 中的任何地方加入一下代码回到顶部回到底部在head中加入css#scroll {position:fixed; top:300...
免费下载蓝色星云PPT宇宙背景图片
该网站提供各种幻灯片背景图片的免费下载服务，非常适合需要制作与太空、星际探索等主题相关的PPT演示文稿的用户。描述中的内容还提到该图片的色彩和设计风格，即深蓝色的宇宙背景以及远处闪烁的星云，形成了一种...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值