HTML--浮动布局练习

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 整个浏览器页面 */html,body {background-color: #00005d;height: 100%;margin: 0;}.page {/* 定宽 */width: 1100px;margin-top: 0;margin-bottom: 0;margin-right: auto;margin-left: auto;/* margin:0,auto; 不支持margin的多个属性值,F12显示属性值无效*/height: 100%;}header {background-color: #869dc7;height: 150px;/* 原图像素254*150 */background-image: url(images/lighthouselogo.jpg);background-repeat: no-repeat;}h1 {color: #00005d;font-size: 55px;font-family: Verdana, Geneva, Tahoma, sans-serif;font-weight: bold;text-align: center;line-height: 150px;margin: 0;}aside {background-color: #b3c7e6;width: 180px;margin: 0;/* height: 620px; */height: calc(100% - 150px - 50px);float: left;}main {background-color: white;width: 920px;/* height: 620px; */height: calc(100% - 150px - 50px);float: right;}h2 {color: #90a5cb;padding-top: 10px;padding-left: 20px;font-weight: bold;font-size: 25px;}main p {padding-left: 20px;font-family: Verdana, Geneva, Tahoma, sans-serif;font-size: 18px;}footer {background-color: #869dc7;height: 50px;/* 如果不加clear属性,会受到中间元素float影响移动到上边 */clear: both;/* 水平居中 */text-align: center;/* 无法利用margin:0,auto;属性 借助line-height=height   */line-height: 50px;font-family: Arial, Helvetica, sans-serif;font-size: 14px;color: #00005d;}</style>
</head><body><section class="page"><header><h1>Lighthouse Island Bistro</h1></header><!-- <div class="middle"> --><aside><ulstyle="list-style: none;font-family: Arial, Helvetica, sans-serif;font-weight: bold;color: white;font-size: 20px;"><li style="color: #eae9ea;">Home</li><li>Menu</li><li>Directions</li><li>Contact</li></ul></aside><main><div style="float: right;clear: both;"><img src="images/lighthouseisland.jpg" style="padding: 20px;padding-top:40px;height: 400px;"></div><h2 style="padding-top: 20px;">Locally Roasted Free-Trade Coffee</h2><p>Indulge in the aroma of freshly ground roast coffee. Specialty drinks are available hot or cold.</p><h2>Specialty Pastries</h2><p>Enjoy a selection of our fresh-baked, organic pastries, including fresh-fruit muffins, scones,croissants, and cinammon rolls.</p><h2>Lunchtime is Anytime</h2><p>Savor delicious wraps and sandwiches on hearty, whole-grain breads with locally-grown salad, fruit,and vegetables.</p><h2>Panoramic View</h2><p>Take in some scenery! The top of our lighthouse offers a panoramic view of the countryside.Challenge your friends to climb our 100-stair tower.</p></main><!-- </div> --><footer>Copyright © 2021</footer></section>
</body></html>

定宽浮动布局,设计页面在整个浏览器页面水平居中位置,浏览器页面缩小时,仍水平居中,出现水平滚动条,显示不到的页面内容可以通过滚动条调节。

已知header高度、footer高度,使得aside的高度处于页面中间,并且不出现垂直滚动条?

cal(相对高度百分比 - 同级别元素高度1 - 同级别元素高度2);

相对高度100%--是相对父元素的高度,要求向上追溯父元素的时候有一个确切的数值(html的高度设置为100%时就是整个浏览器页面高度);另外还需要注意margin等高度,相对高度是相对父元素内容区的高度,所以要排除元素margin、padding等高度影响。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/459853.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ES6 变量的解构赋值

数组的解构赋值 对象的解构赋值 字符串的解构赋值

利用游戏引擎的优势

大家好&#xff0c;我是小蜗牛。 在当今快速发展的游戏产业中&#xff0c;选择合适的游戏引擎对开发者来说至关重要。Cocos Creator作为一款功能强大且灵活的游戏引擎&#xff0c;为开发者提供了丰富的工具和资源&#xff0c;使他们能够高效地开发出优秀的游戏。本文将探讨如何…

Python+Selenium+Pytest+POM自动化测试框架封装(完整版)

&#x1f345; 点击文末小卡片 &#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 1、测试框架简介 1&#xff09;测试框架的优点 代码复用率高&#xff0c;如果不使用框架的话&#xff0c;代码会显得很冗余。可以组装日志、报告、邮件等一些高…

【鸿蒙HarmonyOS实战:通过华为应用市场上架测试版App实现HBuilder X打包的UniApp项目的app转hap教程(邀请码)方式教程详解】

鸿蒙HarmonyOS实战&#xff1a;通过华为应用市场上架测试版App实现HBuilder X打包的UniApp项目的app转hap教程&#xff08;邀请码&#xff09;方式详解 在使用uniapp打包的鸿蒙项目的过程中&#xff0c;由于生成的是app文件&#xff0c;而hdc传给鸿蒙HarmonyOS系统需要的是hap文…

【Apache Zookeeper】

一、简介 1、场景 如何让⼀个应⽤中多个独⽴的程序协同⼯作是⼀件⾮常困难的事情。开发这样的应⽤&#xff0c;很容易让很多开发⼈员陷⼊如何使多个程序协同⼯作的逻辑中&#xff0c;最后导致没有时间更好地思考和实现他们⾃⼰的应⽤程序逻辑&#xff1b;又或者开发⼈员对协同…

名词(术语)了解--SSR/CSR

名词&#xff08;术语&#xff09;了解–SSR/CSR 什么是服务器端渲染(SSR)? 服务器端渲染是指由服务器生成完整的 HTML 页面&#xff0c;然后发送给客户端的过程。 这与客户端渲染&#xff08;CSR&#xff09;形成对比&#xff0c;后者主要依赖浏览器端的 JavaScript 来渲染…

有趣智力题(非编程题)

目录 赛马烧香问题 赛马 题目描述: 一共有36匹马 6个跑道 在没有计时器的情况下 请问: 最少进行多少次赛马 可以确定前三名? 答案:8次 图解思路: 注意下图写错了 注释没写错 图画错了 正确的是下图 烧香问题 题目描述: 有两根香 材质不均匀 但是每一根香 烧完都需要1h 请利用…

学习threejs,使用粒子实现下雪特效

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.Points简介1.11 ☘️…

Golang | Leetcode Golang题解之第517题超级洗衣机

题目&#xff1a; 题解&#xff1a; func findMinMoves(machines []int) (ans int) {tot : 0for _, v : range machines {tot v}n : len(machines)if tot%n > 0 {return -1}avg : tot / nsum : 0for _, num : range machines {num - avgsum numans max(ans, max(abs(sum…

算法练习:209. 长度最小的子数组

题目链接&#xff1a;209. 长度最小的子数组。 这里ans来统计最小长度&#xff0c;所以初始值设置为INT_MAX.最后如果ans结果还是INT_MAX时&#xff0c;说明无此数组。 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {if (nums.size(…

WPF+MVVM案例实战(十一)- 环形进度条实现

文章目录 1、运行效果2、功能实现1、文件创建与代码实现2、角度转换器实现3、命名空间引用 3、源代码下载 1、运行效果 2、功能实现 1、文件创建与代码实现 打开 Wpf_Examples 项目&#xff0c;在Views 文件夹下创建 CircularProgressBar.xaml 窗体文件。 CircularProgressBa…

《贪婪算法实战:寻找最短无序连续子数组的深度解析与实现》

🚀 博主介绍:大家好,我是无休居士!一枚任职于一线Top3互联网大厂的Java开发工程师! 🚀 🌟 在这里,你将找到通往Java技术大门的钥匙。作为一个爱敲代码技术人,我不仅热衷于探索一些框架源码和算法技巧奥秘,还乐于分享这些宝贵的知识和经验。 💡 无论你是刚刚踏…

堆的基本概念和插入删除方法的介绍

优先级队列的介绍&#xff1a; 1.1优先级队列&#xff1a;优先级队列是一种特殊的队列数据结构&#xff0c;每个元素都有一个与之关联的优先级&#xff0c;与普通队列不同&#xff0c;优先级队列中的元素是按照优先级顺序进行处理的&#xff0c;而不是简单的插入。 特点&…

雷军:对“雷军语音包”感到不适,希望停止使用

对于社交媒体上频繁出现的“雷军AI语音包”&#xff0c;雷军发声回应。10月29日&#xff0c;雷军发布视频表示&#xff1a;“最近两年AI特别火&#xff0c;技术进步特别得快&#xff0c;前段时间我在刷抖音的时候&#xff0c;经常看到很多人在玩‘雷军AI’&#xff0c;就是雷军…

分布式光伏是什么意思?如何高效管理?

分布式光伏系统是指在用户现场或靠近用电现场配置较小的光伏发电供电系统&#xff0c;以满足特定用户的需求。根据通知&#xff0c;分布式光伏系统主要有以下几类定义&#xff1a; 10kV以下电压等级接入&#xff0c;且单个并网点总装机容量不超过6MW的分布式电源&#xff1a;这…

项目1 yolov5鱼苗检测计数

yolov5鱼苗检测 1. yolov5鱼苗检测1.1. 环境配置1.2 Predict1.3 Validate1.4 Train1.5 生成 ONNX 2 代码解析2.1 模型2.2 数据集2.3 损失函数2.4 训练2.5 预测 之前做的项目&#xff0c;再回顾一下 环境&#xff1a;GPU1卡&#xff0c;CPU4核&#xff0c;每显卡12GB&#xff0c…

智能文档处理平台:免费体验智能化医疗信息提取

前提&#xff1a;医疗行业信息碎片化问题普遍&#xff0c;手工数据录入效率低且易错&#xff0c;导致数据管理难度大。本系统可帮助医疗机构在信息管理上迈向智能化&#xff0c;优化流程并提升效率。 系统概述&#xff1a; 思通数科推出的智能文档处理系统&#xff0c;专为解…

解决edge浏览器无法同步问题

有时候电脑没带&#xff0c;但是浏览器没有同步很烦恼。chrome浏览器的同步很及时在多设备之间能很好使用。但是edge浏览器同步没反应。 在这里插入图片描述 解决方法&#xff1a; 一、进入edge浏览器点击图像会显示未同步。点击“管理个人资料”&#xff0c;进入后点击同步&…

python代码中通过pymobiledevice3访问iOS沙盒目录获取app日志

【背景】 在进行业务操作过程中&#xff0c;即在app上的一些操作&#xff0c;在日志中会有对应的节点&#xff0c;例如&#xff0c;下面是查看设备实时视频过程对应的一些关键节点&#xff1a; 1、TxDeviceAwakeLogicHelper&#xff1a;wakeStart deviceId CxD2BA11000xxxx …

网络编程_day6

目录 【0】复习 并发服务器实现思路梳理 多进程 多线程 IO多路复用select 【1】setsockopt&#xff1a;设置套接字属性 socket属性 设置地址重用 【2】超时检测 必要性 超时检测的设置方法 1. 通过函数自带的参数设置 2. 通过设置套接字属性进行设置 3. alarm函数与sigaction函…