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.mzph.cn/bicheng/58504.shtml

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

相关文章

后台管理系统的通用权限解决方案(二)SpringBoot整合Swagger Springfox实现接口日志文档

文章目录 1 Swagger介绍2 Swagger常用注解3 Swagger使用案例 1 Swagger介绍 使用Swagger&#xff0c;我们只需要按照它的规范去定义接口及接口相关的信息&#xff0c;再通过Swagger衍生出来的一系列项目和工具&#xff0c;就可以做到生成各种格式的接口文档&#xff0c;生成多…

【Spring框架】Spring框架的开发方式

目录 Spring框架开发方式前言具体案例导入依赖创建数据库表结构创建实体类编写持久层接口和实现类编写业务层接口和实现类配置文件的编写 IoC注解开发注解开发入门&#xff08;半注解&#xff09;IoC常用注解Spring纯注解方式开发 Spring整合JUnit测试 Spring框架开发方式 前言…

Redis数据安全_持久化机制

由于Redis的数据都存放在内存中&#xff0c;如果没有配置持久化&#xff0c;Redis重启后数据就全丢失了&#xff0c;于是需要开启Redis的持久化功能&#xff0c;将数据保存到磁盘上&#xff0c;当Redis重启后&#xff0c;可以从磁盘中恢复数据。 持久化机制概述 对于Redis而言…

Golang | Leetcode Golang题解之第519题随机翻转矩阵

题目&#xff1a; 题解&#xff1a; type Solution struct {m, n, total intmp map[int]int }func Constructor(m, n int) Solution {return Solution{m, n, m * n, map[int]int{}} }func (s *Solution) Flip() (ans []int) {x : rand.Intn(s.total)s.total--if y, o…

【电子通识】四线制电阻屏怎么判断是哪一路出现异常?

在文章【电子通识】四线电阻屏原理中我们聊了一下四线电阻屏触摸的原理,如电阻屏结构、如何计算坐标等方面。 那么在实际的问题分析中,如果是屏硬件问题,那我们如何去判断到底是X还是Y出现异常或是说X+还是X-,是Y+还是Y-出现问题呢? 首先要知道,XY轴为什么会出问题,其实…

高效文本编辑与导航:Vim中的三种基本模式及粘滞位的深度解析

✨✨ 欢迎大家来访Srlua的博文&#xff08;づ&#xffe3;3&#xffe3;&#xff09;づ╭❤&#xff5e;✨✨ &#x1f31f;&#x1f31f; 欢迎各位亲爱的读者&#xff0c;感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢&#xff0c;在这里我会分享我的知识和经验。&am…

推荐一款开源的免费PDF编辑工具:CubePDF Utility

CubePDF Utility是一款功能强大的开源免费PDF编辑器&#xff0c;它采用了基于缩略图的界面设计&#xff0c;为用户提供了直观且高效的PDF编辑体验。该软件特别针对那些希望以简单直观方式编辑 PDF 文件的用户而设计&#xff0c;支持多种操作&#xff0c;如合并、提取、拆分、更…

一款基于.NET8开源且免费的中小型酒店管理系统

项目介绍 TopskyHotelManagerSystem是一款基于.NET8开源、免费&#xff08;MIT License&#xff09;的中小型酒店管理系统&#xff0c;为中小型酒店提供全面的酒店管理系统解决方案&#xff0c;帮助酒店提高运营效率&#xff0c;优化客户体验。 开发目的 在现如今发展迅速的酒…

化学语言模型在创新型药物设计中的挑战与机遇

化学语言模型在创新型药物设计中的挑战与机遇 研究背景 化学生物学领域借用了语言学的类比&#xff0c;将基因密码转录和翻译为蛋白质&#xff0c;细胞通过化学信号进行相互沟通。分子可以被看作构成"化学语言"的基本单元&#xff08;见图1a&#xff09;。类似于人…

第4章 kafka broker

4.1 Kafka Broker 工作流程 4.1.1 Zookeeper 存储的 Kafka 信息 4.1.2 Kafka Broker 总体工作流程 4.1.3 Broker 重要参数 4.2 生产经验——节点服役和退役 4.2.1 服役新节点 4.2.2 退役旧节点 4.3 Kafka 副本 4.3.1 副本基本信息 4.3.2 Leader 选举流程 4.3.3 Leader …

【力扣打卡系列】滑动窗口与双指针(三数之和)

坚持按题型打卡&刷&梳理力扣算法题系列&#xff0c;语言为go&#xff0c;Day11 搜索旋转排序数组 题目描述 解题思路 单独开一个函数来判断是否被染成蓝色 以与最后一个元素的大小比较来确定在哪个段上分类讨论target、nums[key]、end的大小情况&#xff0c;来确定此处…

LabVIEW汽车状态监测系统

LabVIEW汽车状态监测系统通过模拟车辆运行状态&#xff0c;有效地辅助工程师进行故障预测和维护计划优化&#xff0c;从而提高汽车的可靠性和安全性。 项目背景&#xff1a; 现代汽车工业面临着日益增长的安全要求和客户对于车辆性能的高期望。汽车状态监测系统旨在实时监控汽…

函数基础,定义与调用。作用域,闭包函数

一、函数的定义与调用 函数是一段可重复使用的代码块&#xff0c;用于执行特定任务或计算等功能。它可以接受输入参数&#xff08;形参&#xff09;&#xff0c;并根据参数执行操作后返回结果。 函数的定义 例如在 JavaScript 中可以这样定义函数&#xff1a; function fun…

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

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

C# OpenCvSharp DNN UNet 推理

目录 效果 模型 项目 代码 下载 效果 模型 Inputs ------------------------- name&#xff1a;data tensor&#xff1a;Float[1, 3, 256, 256] --------------------------------------------------------------- Outputs ------------------------- name&#xff1a;p…

Flutter仿京东商城APP实战 用户中心基础布局

用户中心界面 pages/tabs/user/user.dart import package:flutter/material.dart; import package:jdshop/utils/zdp_screen.dart; import package:provider/provider.dart;import ../../../store/counter_store.dart;class UserPage extends StatefulWidget {const UserPage…

D52【python 接口自动化学习】- python基础之模块与标准库

day52 标准库 学习日期&#xff1a;20241029 学习目标&#xff1a;模块与标准库 -- 67 标准库&#xff1a;Python默认提供的便携功能有哪些&#xff1f; 学习笔记 标准库中的常见组件 如何通过官方文档学习标准 from urllib.request import urlopen with urlopen(http://ww…

芒果YOLO11改进:免费|注意力机制SKNet:选择性内核网络结构,不同关注会产生融合层神经元有效感受野

&#x1f4a1;&#x1f680;&#x1f680;&#x1f680;本博客 改进源代码改进 适用于 YOLO11 按步骤操作运行改进后的代码即可 YOLO11改进&#xff1a;注意力机制&#xff5c;YOLO11SKAttention改进内容&#x1f680;&#x1f680;&#x1f680; 文章目录 1. SKAttention 论文…

顺序表排序相关算法题|负数移到正数前面|奇数移到偶数前面|小于x的数移到大于x的数前面|快排思想(C)

负数移到正数前面 已知顺序表 ( a 1 , … , a n ) (a_{1},\dots,a_{n}) (a1​,…,an​)&#xff0c;每个元素都是整数&#xff0c;把所有值为负数的元素移到全部正数值元素前边 算法思想 快排的前后指针版本 排序|冒泡排序|快速排序|霍尔版本|挖坑版本|前后指针版本|非递归版…

如何在Linux系统中使用LVM进行磁盘管理

如何在Linux系统中使用LVM进行磁盘管理 LVM简介 安装LVM 在Debian/Ubuntu系统中安装 在CentOS/RHEL系统中安装 创建物理卷 准备磁盘 创建卷组 创建逻辑卷 格式化逻辑卷 挂载逻辑卷 扩展逻辑卷 扩展现有物理卷 添加新的物理卷 调整卷组 调整卷组大小 使用LVM快照 LVM监控 查…