编程笔记 html5cssjs 013 HTML布局

编程笔记 html5&css&js 013 HTML布局

  • 一、使用 `<div>` 元素的网页布局
  • 二、使用 `<table>` 元素的网页布局
  • 三、布局框架
  • 小结

网页布局对改善网站的外观非常重要。请慎重设计您的网页布局。

一、使用 <div> 元素的网页布局

div 元素是用于分组 HTML 元素的块级元素。
下面的例子使用五个 div 元素来创建多列布局:

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页布局(runoob.com)</title> 
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div><div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div><div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © 9999999.com</div></div></body>
</html>

二、使用 <table> 元素的网页布局

使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。

实例

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>网页布局(runoob.com)</title> 
</head>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>网页标题</h1>
</td>
</tr>
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © 999999.com</td>
</tr>
</table>
</body>
</html>

三、布局框架

是一种用于设计和组织网页布局的结构。它可以帮助开发者将网页内容划分为不同的区域,并指定它们的位置、尺寸和样式。常见的布局框架有以下几种:

  1. 表格布局:使用HTML的table标签来创建网页布局。表格布局的优点是简单易懂,兼容性好,但缺点是不灵活,不适合响应式设计。
  2. 块级元素布局:使用HTML的块级元素(如div)来划分网页布局。块级元素布局的优点是灵活,可以轻松实现响应式设计,但缺点是需要一些CSS样式来控制元素的位置和尺寸。
  3. 栅格布局:使用CSS框架(如Bootstrap)提供的栅格系统来创建网页布局。栅格布局的优点是简单易用,适用于响应式设计,并且具有一致的样式,但缺点是需要引入额外的框架。
  4. 弹性布局:使用CSS的弹性布局(flexbox)来创建网页布局。弹性布局的优点是灵活性、响应式设计能力强,但缺点是兼容性较差。
  5. 网格布局:使用CSS的网格布局(grid)来创建网页布局。网格布局的优点是灵活性、响应式设计能力强,但缺点是兼容性较差。
    选择合适的布局框架可以根据项目需求和开发者熟悉程度来决定。

小结

具体使用哪种布局,视需要而定。

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

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

相关文章

MySQL:报错:1130-host ... is not allowed to connect to this MySql server

报错:1130-host ... is not allowed to connect to this MySql server 1、改表法 可能是你的帐号不允许从远程登陆&#xff0c;只能在localhost。这个时候只要在localhost的那台电脑&#xff0c;登入mysql后&#xff0c;更改 "mysql" 数据库里的 "user" 表…

提升数据库性能的关键指南-Oracle AWR报告

文章目录 一、了解AWR报告&#xff1a;数据库性能的仪表盘二、生成AWR报告三、解读AWR报告的关键部分1.报告开头的系统基础信息2.ADDM发现3.负载概览(Load Profile)4.参数文件5.顶级前台等待事件6.SQL 统计信息-顶级SQL7.SGA Advisory AND PAG Advisory 一、了解AWR报告&#x…

如何理解Go语言的数组

什么是数组 首先下一个定义&#xff0c;数组是对线性的内存区域的抽象。高维数组和一维数组有着同样的内存布局。&#xff08;大学生考试的时候别借鉴哈&#xff0c;这是自己下的定义&#xff0c;相当于是一篇议论文的论点。&#xff09; 线性的内存区域说白了就是连续的内存…

Mac Pycharm在Debug模式报编码(SyntaxError)错误

1. 错误信息&#xff1a; Traceback (most recent call last):File "/Library/Developer/CommandLineTools/Library/Frameworks/Python3.framework/Versions/3.9/lib/python3.9/tokenize.py", line 330, in find_cookieline_string line.decode(utf-8) UnicodeDeco…

Vue(二):计算属性与 watch 监听器

03. Vue 指令拓展 3.1 指令修饰符 可以通过 . 来指明一些指令的后缀&#xff0c;不同的后缀中封装了不同的操作&#xff0c;可以帮助我们简化代码&#xff0c;比如之前使用过的监听 enter 键的弹起&#xff0c;我们需要操作事件对象&#xff0c;来检测用户使用了哪个键&#…

linux命令tailless用法详解

当你需要查看文件的内容时&#xff0c;tail 和 less 是两个常用的命令。它们在终端中使用&#xff0c;具有不同的用法和参数&#xff0c;并适用于不同的场景。 tail 命令 tail 命令用于显示文件的末尾内容&#xff0c;常用于实时查看日志文件等场景。下面是一些常用的 tail 命…

uniapp学习之路

uniapp 学习之路 1. 下载HBuilderX2. 下载uView初始框架3. 开始学习1.更改页面背景色&#xff0c;渐变色 1. 下载HBuilderX https://www.dcloud.io/hbuilderx.html?ivk_sa1024320u2. 下载uView初始框架 https://ext.dcloud.net.cn/plugin?id15933. 开始学习 1.更改页面背景…

无需翻墙|Stable Diffusion WebUI 安装|AI绘画

前言 最近终于有机会从围墙里往外看&#xff0c;了解到外面的世界已经有了天翻地覆的变化&#xff0c;感叹万千&#xff0c;笔者在本地mac&#xff0c;windows&#xff0c;linux&#xff0c;docker部署了不下20遍后&#xff0c;整理出来的linux极简避坑安装方案&#xff0c;供…

4. 云原生之kubesphere基础服务搭建

文章目录 安装kubesphere插件服务暴露NodePort方式LoadBalancer方式安装 OpenELB部署eip资源配置网关启动网关创建路由测试网关路由ingress高级功能在服务中配置LoadBalancer 基础设施部署服务部署建议helm仓库添加helm仓库 运维相关部署gitlab部署nexus3部署harbor 研发相关 安…

回归预测 | MATLAB实ZOA-LSTM基于斑马优化算法优化长短期记忆神经网络的多输入单输出数据回归预测模型 (多指标,多图)

回归预测 | MATLAB实ZOA-LSTM基于斑马优化算法优化长短期记忆神经网络的多输入单输出数据回归预测模型 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实ZOA-LSTM基于斑马优化算法优化长短期记忆神经网络的多输入单输出数据回归预测模型 &#xff08;…

ROS仿真R2机器人之安装运行及MoveIt的介绍

R2(Robonaut 2)是NASA美国宇航局与GM通用联合推出的宇航人形机器人&#xff0c;能在国际空间站使用&#xff0c;可想而知其价格是非常昂贵&#xff0c;几百万美刀吧&#xff0c;还好NASA发布了一个R2机器人的Gazebo模型&#xff0c;使用模型就不需要花钱了&#xff0c;由于我们…

o2o生活通全开源尊享版+多城市切换+企业付款+交友IM+平台快报

搭建教程 1.把 pigo2ov282.sql 文件里面的网址 test.souho.net 全部批量替换为你的自己的 2.使用 phpmyadmin 导入 pigo2ov282.sql 到你的数据库&#xff08;直接访问/phpmyadmin 即可&#xff09; 3.修改数据库文件/conf/db.php 里的数据库连接信息&#xff08;请勿使用记事本…

蓝牙物联网移动硬件数据传输系统解决方案

随着传感器技术、网络技术和数据传输技术的不断发展&#xff0c;人们对智能设备的需求日渐增强,利用传感器技术可以对周围环境进行准确和全面的感知&#xff0c;获取到实时信息&#xff0c;从而在网络中进行传输和共享&#xff0c;再通过服务器对各种数据进行保存、分析和挖掘等…

2023-12-29 服务器开发-centos部署ftp

摘要: 2023-12-29 服务器开发-centos-部署ftp 部署ftp vsftpd&#xff08;very secure FTP daemon&#xff09;是Linux下的一款小巧轻快、安全易用的FTP服务器软件。本教程介绍如何在Linux实例上安装并配置vsftpd。 前提条件 已创建ECS实例并为实例分配了公网IP地址。 背景…

什么是泛型, 泛型的具体使用

泛型是一种在编程中使用的技术&#xff0c;它允许我们在定义类、接口和方法时使用一个或多个类型参数来代表具体的类型。 泛型的具体使用代码如下所示&#xff1a; // 定义一个泛型类 public class MyGenericClass<T> {private T value;public MyGenericClass(T value)…

使用element中el-cascader级联选择器动态懒加载以及回显 (单选)

<template><!-- 新增||修改弹框 --><el-dialog :close-on-click-modal"false" :close-on-press-escape"false" :title"title" :visible.sync"open"width"800px" append-to-body><el-form ref"for…

小型内衣洗衣机什么牌子好?口碑好的小型洗衣机

想必大家都知道&#xff0c;我们的内衣裤、袜子这些衣物对卫生方面的要求是比较的高&#xff0c;毕竟是贴身的衣物&#xff0c;因此是要分开清洗的&#xff0c;而不能够跟我们其他的大件衣服一起放入到大型洗衣机里进行混洗&#xff0c;很多就选择了分开单独的手洗&#xff0c;…

初识Sringboot3+vue3环境准备

环境准备 后端环境准备 下载JDK17https://www.oracle.com/java/technologies/downloads/#jdk17-windows 安装就下一步下一步,选择安装路径 配置环境 环境 JDK17、IDEA2021、maven3.5、vscode 后端 基础&#xff1a;javaSE&#xff0c;javaWeb、JDBC、SMM框架&#xff08;Spr…

CentOS 安装WebLogic

1.JDK 安装 cd /home/ mkdir java cd java/ tar -zxvf jdk-8u321-linux-x64.tar.gzvim /etc/profile添加以下内容到 /etc/profile JAVA_HOME/home/java/jdk1.8.0_321 CLASSPATH.:$JAVA_HOME/lib.tools.jar PATH$JAVA_HOME/bin:$PATH export JAVA_HOME CLASSPATH PATH刷新配置…

【React源码 - ReactDom.render发生了什么】

在React开发中&#xff0c;在入口文件我们都会执行ReactDom.render来讲整个应用挂载在主document中&#xff0c;那其中发生了什么&#xff0c;React是如何讲我们写的JSX代码&#xff0c;一步一步更新Fiber进而挂载渲染的呢。本文主要是基于react17.0.2的源码以及自己的理解来简…