制作一个简易的网页，用不同的颜色区分头部、内容以及底部，在滚动页面的过程中，底部保持不变。

最新推荐文章于 2022-07-26 15:58:25 发布
最新推荐文章于 2022-07-26 15:58:25 发布
阅读量1.1k 收藏 2
点赞数
文章标签： 网页制作 JavaScript HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chance11or/article/details/53057512
版权
这篇博客介绍了如何制作一个简单的网页，使用HTML和CSS来区分头部、内容和底部，并确保在页面滚动时底部始终保持固定。通过设置不同元素的样式，如<header>、<div>和<footer>的背景颜色和定位属性，实现了这一效果。在火狐浏览器中预览时，可以看到底部黄色区域在滚动时固定在页面底部。此外，还提到了使用浏览器的开发者工具来实时调整CSS样式，以及如何在HTML文件中保存和应用这些更改。
摘要由CSDN通过智能技术生成

制作一个简易的网页，用不同的颜色区分头部、内容以及底部，在滚动页面的过程中，底部保持不变。

1、新建一个文本文档，在文本文档中打入以下代码，另存为格式为**.html

<html>                //标签要成对的出现<html></html>

<body>


<nav>
    <img src="">
    <a href="">菜单项一</a>
    <a href="">菜单项二</a>
    <a href="">菜单项三</a>

</nav>


最低0.47元/天 解锁文章
chance11or
关注
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
程序人生
11-17 3775
Wordpress页面生成器：Elementor 插件制作网站页面教程（图文完整）
Flutter 笔记 | Flutter 可滚动组件
最新发布
川峰的博客
05-26 4400
Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚动组件，Flutter可滚
头部底部通栏，内容区域滚动布局
gaodda的博客
05-20 665
内容区域滚动布局 采用绝对定位布局 内容css .main { position: absolute; top: 80px; left: 0; right: 0; bottom: 100px; padding: 10px; overflow: auto; } 代码demo上传github（待续） ...
静态网页怎么访问导航后导航背景换颜色_设计万花筒｜网页头部内容设计
weixin_39660931的博客
12-06 204
编辑导读：头部内容在网页设计中起着非常关键的作用，并为网站的其他各个方面设定了基调。本文作者从自身工作实践出发，分享了关于头部内容设计的一些技巧，供大家一同参考和学习。无论作为设计师还是普通浏览者，大家观看一个网站时最先接触到的就是网页的头部区域，这部分内容为网站的其他各个方面设定了基调，在网页设计中起着非常关键的作用。尤其是如今简洁设计比较盛行，多数时候把头部内容设计好就变成了吸引用户眼球最好的...
js获取当前网址 选不同的栏目给颜色都变
小麦先生
04-16 1416
window.alert(document.URL);
头部和底部固定，中间内容可滚动
小时
03-25 7448
html+css的代码的展示   lang="en"> charset="UTF-8"> 上下固定，中间内容可以滚动 type="text/css"> html,body,.page{width:100%; height:100%;overflow:hidden;} .top,.con,.bottom{position:absolute; left:0; right:0;} .top{t
html头部内容尾部怎么分界,网页结构 #4 示例 - 使用 header，footer，section，aside 划分《 HTML：标记语言 》...
weixin_31175771的博客
06-09 635
下面我们使用 section ，article 这些元素去划分一下这个网页的结构 .. 比如宁皓网的首页 .. 可能先用一个大标题 .. 里面的内容可能是网站的名字 ..然后再用一个 header 元素 .. 定义一个页头部分 .. 这里面可以放一些导航，搜索框之类的东西 .. 导航可以用一个 nav 包装一下 .. 它里面再用一个标题 .. 注意虽然每个部分都可以重新使用标题，也就是每个...
web网页技术学习第一阶段知识总结
weixin_44949447的博客
07-26 1938
学习了一些html的标签、属性和元素的分类，各种重要标签和CSS的各种用法和样式
前端基础知识点-每天一个基本知识点（100+个前端小知识，你是否都知道？）
m0_67394006的博客
03-02 9239
文章目录 前言 第一回合 一、知识点：cookie（21/09/06） 二、知识点：节流和防抖（21/09/07） 三、知识点：var和let以及const（21/09/08） 四：知识点：深拷贝和浅拷贝（21/09/09） 五、知识点：作用域和作用域链（21/09/10） 六、知识点：从输入URL到页面展示这中间发生了什么（21/09/11） 七、知识点：重排和重绘（21/09/12） 八、知识点：TCP和UDP（21/09/13） 九、知识点：三次握手（21/09/15） 十、知识点：绝对定位和相对定
仿QQ空间底部弹出菜单
06-10
仿QQ空间底部弹出菜单，具体实现原理是PopupWindow
手机端自适应底部导航条，带小图标的
02-26
这是一个手机端的自适应底部导航条，带小图标的，包括雪碧图。
整套网页头部和底部的内容一样，只切换中间的内容（自己的项目总结）
java_zhaoyanli的专栏
11-29 3589
做页面的时候，一定先分析好是否需要写一些公共的东西来调用，千万不要做没用工！！！ 1，写的时候标注好注释，方便代码多容易乱，无头绪的问题发生。 2，对于遮罩层和弹出框可以写在主页，遮罩层要全部遮住！ 3，对于header.html里面的按钮，点击按钮会弹出弹框的问题，可以把弹框写在index.html里面，在header.js里面控制， eg: $('.pwd').cli
微信小程序开发关于分享功能中怎么定义同一个页面中不同的按钮触发不同的分享内容,或者右上角的分享和页面中分享
miracle
02-09 1万+
微信小程序分享中分为点击右上角的分享和点击按键(即是button组件)的分享.而不同按键的分享可以通过id属性来区分,具体实现如下:.js页面中代码 //分享功能 onShareAppMessage: function (res) { var that = this; //分享的类型为按键类型 if (res.from == "button")...
mysql 序列化缓存到txt文件查找数据与直接查找数据 性能对比，13,601条数据文件缓存平均0.085秒后只需0.025秒 推荐 程序员导航网http://www.je666.com
10-24 3159
推荐 程序员导航网http://www.je666.com CREATE TABLE IF NOT EXISTS `ylmf_site_search` (   `id` int(11) NOT NULL,   `displayorder` int(11) NOT NULL,   `pinyin` varchar(255) CHARACTER SET gbk NOT NULL,
DIV悬浮在页面底部或头部
热门推荐
u010565174的博客
07-16 2万+
样式.xuanfu{ left: 0; position: fixed; bottom: 0;//这里换成top:0;就悬浮在头部 width: 100%; z-index: 100; }htmlxuanfu">这里是要悬浮的内容
常用网页背景颜色
liaomin416100569的专栏
08-05 2万+
网页背景颜色 　 A B C D 1   #FFFFFF   #FFFFF0   #FFFFE0   #FFFF00 2 . #FFFAFA   #FFFAF0   #FFFACD   #FFF8D
农产品HTML网页制作：头部信息设置教程
在"农产品HTML网页制作-设置网页头部信息"这一教程中，主要探讨了如何运用HTML5进行网页设计与制作的基本原则和结构。首先，制作网页时应遵循HTML5的规范，注意标签的正确使用，如HTML5文档头部相关标记，包括`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值