【基于HTML5的网页设计及应用】——float实现页面布局

🎃个人专栏:

🐬 算法设计与分析:算法设计与分析_IT闫的博客-CSDN博客

🐳Java基础:Java基础_IT闫的博客-CSDN博客

🐋c语言:c语言_IT闫的博客-CSDN博客

🐟MySQL:数据结构_IT闫的博客-CSDN博客

🐠数据结构:​​​​​​数据结构_IT闫的博客-CSDN博客

💎C++:C++_IT闫的博客-CSDN博客

🥽C51单片机:C51单片机(STC89C516)_IT闫的博客-CSDN博客

💻基于HTML5的网页设计及应用:基于HTML5的网页设计及应用_IT闫的博客-CSDN博客​​​​​​

🥏python:python_IT闫的博客-CSDN博客

🐠离散数学:离散数学_IT闫的博客-CSDN博客

​​​​​​🥽Linux:​​​​Linux_Y小夜的博客-CSDN博客

🚝Rust:Rust_Y小夜的博客-CSDN博客

欢迎收看,希望对大家有用!

目录

🎯功能简介

🎯代码解析

🎯核心代码

🎯效果展示


🎯功能简介

这段代码实现了一个基本的网页布局,包括头部、左侧内容、右侧内容和底部。具体功能如下:

1. 头部(header):高度为 200px,带有边框,外边距分别为 4px(上)、4px(右)、2px(下)、4px(左)。
2. 左侧内容(leftside):宽度为 294px,高度为 500px,带有边框,左浮动,外边距分别为 2px(上)、2px(右)、2px(下)、4px(左)。
3. 右侧内容(rightside):宽度为 490px,高度为 500px,带有边框,左浮动,外边距分别为 2px(上)、4px(右)、2px(下)、2px(左)。
4. 底部(footer):高度为 78px,带有边框,外边距分别为 2px(上)、4px(右)、4px(下)、4px(左),使用 `clear: both` 清除浮动。

整体容器宽度为 800px,水平居中显示,且包含了一些基本的样式重置(设置所有元素的内边距和外边距为 0)。

这个布局可以作为一个基础模板,在此基础上可以继续扩展和添加其他元素和样式来构建更复杂的页面布局。

🎯代码解析

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><!-- 这里是 CSS 样式 -->
</head>
<body><div class="one"><div class="header">header</div><div class="leftside">leftside</div><div class="rightside">rightside</div><div class="footer">footer</div></div>
</body>
</html>

        这是基本的 HTML 结构,包含一个 div 容器,用于包裹整个页面。在这个容器中有四个子 div 元素,分别表示头部、左侧、右侧和底部。


<style>*{margin: 0;padding: 0;}.one{width: 800px;border: 1px solid;margin: 0 auto;}.header{height: 200px;border: 1px solid;margin: 4px 4px 2px 4px;}.leftside{width: 294px;height: 500px;border: 1px solid;float: left;margin: 2px 2px 2px 4px;}.rightside{width: 490px;height: 500px;float: left;border: 1px solid;margin: 2px 4px 2px 2px;}.footer{height: 78px;border: 1px solid;margin: 2px 4px 4px 4px;clear: both;}
</style>

这是 CSS 样式,定义了各个元素的样式。其中包含了以下定义:

  • *{margin: 0; padding: 0;}:将所有元素的外边距和内边距设置为 0。
  • .one{width: 800px; border: 1px solid; margin: 0 auto;}:将容器的宽度设置为 800 像素,边框设置为 1 像素实线,用 margin: 0 auto 将其水平居中。
  • .header{height: 200px; border: 1px solid; margin: 4px 4px 2px 4px;}:将头部元素的高度设置为 200 像素,边框设置为 1 像素实线,用 margin: 4px 4px 2px 4px 设置上、右、下、左外边距。
  • .leftside{width: 294px; height: 500px; border: 1px solid; float: left; margin: 2px 2px 2px 4px;}:将左侧元素的宽度设置为 294 像素,高度设置为 500 像素,边框设置为 1 像素实线,使用 float: left 让其左浮动,用 margin: 2px 2px 2px 4px 设置上、右、下、左外边距。
  • .rightside{width: 490px; height: 500px; float: left; border: 1px solid; margin: 2px 4px 2px 2px;}:将右侧元素的宽度设置为 490 像素,高度设置为 500 像素,边框设置为 1 像素实线,使用 float: left 让其左浮动,用 margin: 2px 4px 2px 2px 设置上、右、下、左外边距。
  • .footer{height: 78px; border: 1px solid; margin: 2px 4px 4px 4px; clear: both;}:将底部元素的高度设置为 78 像素,边框设置为 1 像素实线,用 margin: 2px 4px 4px 4px 设置上、右、下、左外边距,使用 clear: both 清除浮动。

🎯核心代码

 <div class="one"><div class="header">header</div><div class="leftside">leftside</div><div class="rightside">rightside</div><div class="footer">footer</div></div>

🎯效果展示

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

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

相关文章

【软件设计师】常见的算法设计方法——迭代法

&#x1f413; 迭代法 什么是迭代法 迭代法&#xff0c;作为一种重要的算法思想&#xff0c;在计算机科学、数学以及其他多个领域中都有着广泛的应用。那么&#xff0c;什么是迭代法呢&#xff1f; 简单来说&#xff0c;迭代法是一种通过不断重复某个过程来逐步逼近问题解的方…

Java基础-运算符,表达式和语句

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 一、Java 运算符 算术运算符 关系运算符 位运算符 逻辑运算符 赋值运算符 条件运算符&#xff…

游戏寻路之A*算法(GUI演示)

一、A*算法介绍 A*算法是一种路径搜索算法,用于在图形网络中找到最短路径。它结合了Dijkstra算法和启发式搜索的思想,通过综合利用已知的最短路径和估计的最短路径来优化搜索过程。在游戏自动寻路得到广泛应用。 二、A*算法的基本思想 在图形网络中选择一个起点和终点。维护…

常用的17个运维监控系统(必备知识)

1. Zabbix Zabbix 作为企业级的网络监控工具&#xff0c;通过从服务器&#xff0c;虚拟机和网络设备收集的数据提供实时监控&#xff0c;自动发现&#xff0c;映射和可扩展等功能。 Zabbix的企业级监控软件为用户提供内置的Java应用服务器监控&#xff0c;硬件监控&#xff0c…

QGIS编译(跨平台编译)之五十五:libtasn1编译(Linux、MacOS环境下编译)

文章目录 1、libtasn1介绍2、libtasn1下载3.Linux下编译5.MacOS下编译1、libtasn1介绍 Libtasn1(GNU Libtasn1)是一个用于操作 ASN.1(Abstract Syntax Notation One,抽象语法表示一)数据结构的开源库。ASN.1 是一种描述结构化数据的标准,广泛应用于网络通信和数据交换领域…

Python web框架fastapi中间件的使用,CORS跨域详解

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Fastapi 景天的主页&#xff1a;景天科技苑 文章目录 fastapi中间件与CORS1、中间件1.创建中间件方法2.中间件里面添加响应头…

alzet渗透泵技术手册,你收藏了吗?

alzet渗透泵技术手册之使用方向&#xff0c;ALZET 渗透泵是用于小鼠、大鼠和其他实验动物研究的小型植入式泵。这些微型泵以连续和受控的速率输送药物、激素和其他测试剂&#xff0c;持续时间从一天到六周不等&#xff0c;无需外部连接或频繁处理。其无人值守操作消除了实验室人…

跨地域传文件时 面临的安全、效率等问题要如何解决?

近年来&#xff0c;企业在异国、异地设立分支机构的越来越多&#xff0c;在日常经营中&#xff0c;企业总部和分支机构间存在平行、垂直及互相交叉的管理模式和业务往来需求&#xff0c;因此&#xff0c;大型企业存在必然的跨地域传文件场景&#xff0c;比如跨地理域文件交换、…

Java函数式接口使用

if (mbd.isSingleton()) {sharedInstance this.getSingleton(beanName, () -> {try {return this.createBean(beanName, mbd, args);} catch (BeansException var5) {this.destroySingleton(beanName);throw var5;}}); 函数式接口&#xff1a;可以将lamba表达式作为参数放…

揭秘麦肯锡的方法:产品经理解决问题指南

您是否想知道世界上最成功的产品经理如何始终如一地提供不仅满足而且超出预期的解决方案&#xff1f;秘密可能就在于世界上最负盛名的咨询公司之一麦肯锡公司所磨练的方法论。本文深入探讨了麦肯锡的问题解决流程&#xff0c;该流程专为希望提升水平的产品经理量身定制。 01. 麦…

2024最新AI大模型产品汇总

文章目录 1. 写在前面2. 效率工具3. 聊天机器人4. 应用开发工具5. Prompt工具与社区6. 通用基础大模型7. 训练框架8. 开源数据集9. 推理与部署平台及工具 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致…

Java MySQL数据库面试题(二)

Java MySQL数据库面试题&#xff08;二&#xff09; 前言1、说下Innodb和 myisam的区别吗&#xff1f;Innodb引擎&#xff1a;myisam引擎&#xff1a; 2、MySQL 如何优化 DISTINCT&#xff1f;3、如何查询表第1000到1020条记录&#xff1f;4、可以使用多少列创建索引&#xff1…

Flutter整体框架

Flutter整体框架由三部分组成&#xff1a;Framework、Engine和Embedder。 Framework Framework提供了一个用 Dart 语言编写的现代、反应式框架&#xff0c;由许多抽象的层级组成。它包括一套丰富的布局、动画、绘制、手势UI组件及配套代码&#xff0c;以及更基础的异步、文件、…

李沐动手学习深度学习——4.5练习

1. 在本节的估计问题中使用λ的值进行实验。绘制训练和测试精度关于λ的函数。观察到了什么&#xff1f; 修改代码运行如图所示&#xff0c;可以发现对于lamda值的变化而言&#xff0c;对于训练loss和测试loss的影响不大。但是如果λ 太大后&#xff0c;train和test的loss会变得…

WPF 控件模板

控件模板 WPF的 ControlTemplate 是一种用于定义和自定义控件的外观和结构的模板&#xff0c;它可以完全替换控件的默认模板&#xff0c;实现个性化和复杂的效果。WPF 的 ControlTemplate 有以下几个特点: ControlTemplate 是一个 XAML 元素&#xff0c;它可以包含任何类型的 U…

重拾C++之菜鸟刷算法第7篇---二叉树(上)

二叉树 理论基础 次序关系 前中后序 ( VLR, LVR, LRV ) VLR: 前表示根节点在前面&#xff0c;遍历顺序即中左右 LVR: 中表示根节点在中间&#xff0c;遍历顺序即左中右 LRV: 后表示根节点在后面&#xff0c;遍历顺序即左右中 遍历方式 DFS &#xff08;深度优先遍历&…

Databend 开源周报第 134 期

Databend 是一款现代云数仓。专为弹性和高效设计&#xff0c;为您的大规模分析需求保驾护航。自由且开源。即刻体验云服务&#xff1a;https://app.databend.cn 。 Whats On In Databend 探索 Databend 本周新进展&#xff0c;遇到更贴近你心意的 Databend 。 支持多语句事务…

基于dashscope在线调用千问大模型

前言 dashscope是阿里云大模型服务平台——灵积提供的在线API组件。基于它&#xff0c;无需本地加载大模型&#xff0c;通过在线方式访问云端大模型来完成对话。 申请API key 老规矩&#xff1a;要想访问各家云端大模型&#xff0c;需要先申请API key。 对于阿里云&#x…

STM32(14)USART

USART:一种片上外设&#xff0c;用来实现串口通信&#xff0c;就是stm32内部的串口 USART简介 串并转换电路 串行通信和并行通信 串行&#xff1a;一根数据线&#xff0c;逐个比特位发送 为什么要串并转换 移位寄存器 USART的基本模型 通过查询SR&#xff08;状态寄存器&…

简介IP地址证书如何申请

IP地址证书通常包含在SSL/TLS证书中&#xff0c;根据验证级别可分为域名验证型(DV)、组织验证型(OV)。对于直接绑定IP地址的场景&#xff0c;需选择支持IP地址验证的SSL证书。 跟常见的域名证书一样&#xff0c;IP地址证书在申请过程中同样需要验证IP的所有权&#xff0c;常见的…