html+css网页开发 之 banner+导航栏悬浮在大背景上

最新推荐文章于 2024-04-22 21:56:44 发布
最新推荐文章于 2024-04-22 21:56:44 发布
阅读量3.2k 收藏 24
点赞数 2
文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43623147/article/details/111030256
版权

效果图如下： 

将上面效果图划分成四块：

  • 蓝色盒子为通栏大盒子
  • 灰色盒子为版心，要水平居中对齐
  • 紫色盒子在版心内，为subnav侧导航栏，要左对齐版心
  • 绿色盒子在版心内，为course课程表，要右对齐版心

index.html

<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 通栏大盒子 -->
<div class="banner">
最低0.47元/天 解锁文章
辣味蓓蓓酱
关注
  • 2
    点赞
  • 踩
  • 24
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML+CSS实战——学成在线项目（含源码、素材、psd文件）
weixin_45732235的博客
11-29 870
float布局
1：创建项目工程(1)
最新发布
2401_84097436的博客
05-04 698
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
CSS-学成在线页面制作案例
17902的博客
09-20 1601
1 素材 PSD源文件，PS（切片）+sublime（代码）+chrome（测试） 2 CSS属性书写顺序 1.布局定位属性：display/ position/ float/ clear/ visibility/ overflow 2.自身属性：width/ height/ margin/ padding/ border/ background 3.文本属性：color/ font/ text-decoration/ text-align/ vertical-align/ white-space/ br
浮动的4个案例详解：网易云音乐列表/导航，淘宝banner区，文字环绕
u013179804的博客
04-22 611
了解并实践了浮动以后，基本就可以完成大多数非动态元素过多的网站布局了，比如，网易云音乐，淘宝，腾讯新闻，公众号等。这篇文，主要来写 4 个浮动布局的实例。为了让你更容易了解，我们这次只主要说大体布局，先不聊太多内部填充细节。那就开始吧。其实呢，网页做多了，很多同类网站的布局都是比较相似的。比如，上述我举例的几个大网站。最后，这里只是提供了一个布局小框架，很多内部细节需要多多练习，布局就是一个框嵌套一个框，认识到这点，网站布局就入门了。熟能生巧，多多练习是王道。OK，本文完。
banner轮播图以及nav导航栏Jquery
weixin_55869175的博客
03-06 3927
轮播图
很酷的css定义的banner效果
weixin_34358365的博客
04-02 305
Top Right Banner Style #topright { position: absolute; right: 0; top: 0; display: block; height: 125px; width: 125px; background: url(TRbanner.gif) no-repeat;...
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
m0_49608552的博客
07-30 4759
css导航栏悬浮在轮播图上面，如何设置半透明悬浮效果
网页设计期末大作业+html+css
05-25
9个网页布局，学校让做的网站作业，虽然是比较基础的网页静态页面，不过我也希望你能做的规范一些，我们专业制作学生...DIV+css+js学生网站如何做？ 不靠这个吃饭--你还用自己做网站吗？ 大学生静态网页成品作业代做
html+css侧边伸缩导航栏
01-26
在这个主题中，我们将深入探讨如何使用 HTML 结构和 CSS 样式来实现一个可伸缩的侧边导航栏。 首先，让我们从 HTML 结构开始。一个基本的侧边导航栏通常包含一系列链接或按钮，这些链接可能被组织成层次结构。以下...
html+css网站模板网页设计源码-html个人网页设计模板.zip
05-10
在这个模板中，HTML文件可能包含了头部信息、导航栏、主体内容区域、页脚等常见的网页组成部分。开发者可以通过查看和修改这些标记来理解不同元素如何组织和呈现。 CSS（Cascading Style Sheets）则负责网页的样式...
大学生网页制作之美食篇html+css静态网页设计
06-14
在“大学生网页制作之美食篇html+css静态网页设计”这个项目中，学生将学习如何运用HTML、CSS以及JavaScript这三种基础的Web开发技术来创建一个以美食为主题的静态网页。这个设计实例对于初学者来说非常实用，因为它...
HTML+CSS 实现伸缩式导航栏.zip
05-09
HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 HTML+CSS 完成伸缩式导航栏 ...
HTML+css+JS制作导航和banner
qq_53541336的博客
03-05 4024
如何利用HTML、css、j制作导航和banner图，一个整体的网页这两者是少不了的，在我看来应该也是最重要的部分，刚开始学习网页制作时对于小白的我来说其实这一块还是比较难的一点，尤其是banner轮播，随着后来老师的讲解以及自己课外的学习，慢慢的也就会做了，希望这篇文章能帮助到大家。
07-[案例4]背景定位导航栏
保持好奇
10-03 84
知识点：背景定位，hover选择器，元素类型，图片整合技术。需求：在导航栏中实现鼠标移入时，产生图标变色效果。
Banner制作
yuyuyu0w0的博客
05-22 654
一，加载本地图片： 1，在XMl文件中写： 2，在MainActivity里写： 3，图片加载器： 二，加载网络图片： ** 1，一言不和先加依赖 （当然是网络的了）：** 2，加权限： <uses-permission android:name="android.permission.INTERNET" /> 3，xml文件里： 4，类里写: 5,图片加载器： PS：图片加载器知识点： 主要是ImageView加载图片的知识点（一心想复制粘贴网上的教程略略略）： 1、 setIm
【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
04-03 1371
一、Banner 栏测量 1、盒子模型尺寸测量 2、背景测量切图 二、Banner 盒子模型代码 1、HTML 标签结构 2、CSS 样式 3、显示效果
html把div做成透明背景图片,导航栏下边有背景图片,如何使DIV层背景透明
weixin_30741527的博客
06-04 532
$advlist[headerbanner]if(top == self) {top.location = 'frame.php?frameon=yes&referer='+escape(self.location);document.write('{lang frameon_column}');} else {document.write('{lang frameon_flat}'...
黑马程序员-学成在线案例-版权部份
weixin_73795744的博客
11-06 308
黑马程序员-前端-pink老师的学成在线案例-版权部分。
html+css写一个网页头部固定导航栏
07-15
当创建一个固定导航栏时，你可以使用 HTML 和 CSS 来实现。下面是一个简单的示例： HTML: ```html <!DOCTYPE html> <html> <head> <title>固定导航栏</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">关于</a></li> <li><a href="#">服务</a></li> <li><a href="#">联系我们</a></li> </ul> </nav> </header> <main> <!-- 页面内容 --> </main> <footer> <!-- 底部内容 --> </footer> </body> </html> ``` CSS (styles.css): ```css body { margin: 0; padding: 0; } header { position: fixed; top: 0; left: 0; width: 100%; background-color: #333; padding: 20px; } nav ul { list-style-type: none; margin: 0; padding: 0; } nav ul li { display: inline-block; margin-right: 10px; } nav ul li a { color: #fff; text-decoration: none; } main { margin-top: 80px; /* 确保页面内容不被导航栏遮挡 */ } footer { background-color: #333; color: #fff; padding: 20px; } ``` 在上面的示例中，我们创建了一个固定的导航栏。通过将 `<header>` 元素的 `position` 属性设置为 `fixed`，它将固定在页面的顶部。导航栏在 `<nav>` 元素中，使用无序列表 `<ul>` 和列表项 `<li>` 来创建导航链接。在 CSS 中，我们设置了导航栏的背景颜色、内边距等样式，并使用 `position: fixed` 将其固定在页面顶部。 在 `<main>` 元素中，我们使用 `margin-top` 属性来确保页面内容不被导航栏遮挡。 希望这个示例对你有所帮助！如果你有任何问题，请随时问我。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值