常规网页布局

news2024/9/28 7:21:28

单列布局1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局1-头主尾等宽</title>
	<style>
		.container {
			max-width: 960px; /*设置最大宽度为固定值*/
			margin: 0 auto;  /*设置内部子块元素左右居中*/
		}
		.header {
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF80;
		}
		.main {
			height: 600px;  /*只需设置高度,宽度继承父元素*/
			background-color: #80007F;
		}
		.footer {
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF06;
		}
	</style>
</head>
<body>
	<h4>基本思路:</h4>
	<p>1.头部,主体,尾部全部放在一个容器内统一设置</p>
	<p>2.子块只须设置高度即可</p>
	<!-- DOM结构 -->
	<div class="container">
		<div class="header">头部</div>
		<div class="main">主体</div>
		<div class="footer">尾部</div>
	</div>
</body>
</html>

单列布局2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>单列布局2-头尾自适应主体固宽</title>
	<style>
		.container {
			max-width: 960px; /*设置最大宽度为固定值*/
			margin: 0 auto;  /*设置内部子块元素左右居中*/
		}
		.header {
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF80;
		}
		.main {
			height: 600px;  /*只需设置高度,宽度继承父元素*/
			background-color: #80007F;
		}
		.footer {
			height: 50px;  /*只需设置高度,宽度继承父元素*/
			background-color: #21FF06;
		}
	</style>
</head>
<body>
	<h4>基本思路:</h4>
	<p>1.头部,尾部单独放在一个容器内,仅设置height高度</p>
	<p>2.头部,尾部内容区仍与主体等宽</p>
	<p>3.主体单独放在一个容器内,并设置左右自动margin: auto</p>
	<h4>CSS样式无需修改,只需调整一下DOM结构即可</h4>
	<!-- DOM结构 -->
	
		<div class="header">
			<div class="container">头部</div>
		</div>
		<div class="main">
			<div class="container">主体</div>
		</div>
		<div class="footer">
			<div class="container">尾部</div>
		</div>
</body>
</html>

两列布局1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局1:左侧固定,右主体自适应</title>
</head>
<style>
	.left {
		width: 200px;
		height: 600px;
		background-color: skyblue;
		float: left;
	}
	.main {
		height: 600px;
		background-color: cyan; 
		margin-left: 200px;
	}
</style>
<body>
	<h4>基本思路:</h4>
	<p>1.左侧固定宽度,并设置左浮动</p>
	<p>2.右侧主体仅设置margin-left,将区块向右拉过左侧宽度即可</p>
	<div class="left">左侧</div>
	<div class="main">主体</div>
</body>
</html>

两列布局2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局2:右侧固定,左边主体自适应</title>
</head>
<style>
	.right {
		width: 200px;
		height: 600px;
		background-color: skyblue;
		float: right;
	}
	.main {
		height: 600px;
		background-color: cyan; 
		margin-right: 200px;
	}
</style>
<body>
	<h4>基本思路:</h4>
	<p>1.右侧固定宽度,并设置右浮动</p>
	<p>2.左侧主体仅设置margin-right,将区块向右拉过右侧宽度即可</p>
	<div class="right">右侧</div>
	<div class="main">主体</div>
</body>
</html>

两列布局3

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局3:左右二列宽度固定[浮动]</title>
</head>
<style>
	.container {
		width: 960px; 	
		margin: 0 auto;
		background-color: yellow;
		overflow: hidden; /*允许子元素撑开父级区块*/
	}
	.clear {
		-ms-zoom: 1;
	}
	.clear:after {
		content: '';
		display: block;
		clear:both;
	}
	.left {
		width: 200px;
		height: 600px;
		background-color: skyblue;
		float: left;  /*向左浮动*/
	}
	.right {
		width: 750px;
		height: 600px;
		background-color: cyan; 
		float:right;  /*向右浮动*/
	}
</style>
<body>
	<h4>基本思路:</h4>
	<p>1.要给左右二列添加一个父级区块</p>
	<p>2.给左右二个区块设置浮动float:left/right</p>
	<p>3.给父区块添加after伪类让子块撑开父级</p>

	<div class="container">
		<div class="left">左侧</div>
		<div class="right">右侧</div>
	</div>
	
</body>
</html>

两列布局4

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>两列布局4:左右二列宽度固定[绝对定位]</title>
</head>
<style>
	.container {
		/*父区块必须设置绝对定位*/
		position: absolute;
		left:0;  /*左边起始定位点*/
		right:0; /*右边起始定位点*/
		margin: auto; /*左右边距自动挤压,即自动居中*/

		/* 设置最大宽度，可以避免出现水平滚动条 */
		max-width: 960px; /*宽度一定要设置*/
	}
	.left {
		/*设置左边栏定位起始点*/
		position: absolute;
		top:0;
		left:0;

		width: 200px;
		height: 600px;
		background-color: skyblue;
	}
	.right {
		/*设置右边栏定位起始点*/
		position: absolute;
		top:0;
		right:0;

		width: 750px;
		height: 600px;
		background-color: cyan; 
	}
</style>
<body>
	<h4>基本思路:</h4>
	<p>1.要给左右二列添加一个父级区块,并设置定位属性 <br>
	2.给左右二个区块分别使用绝对定位<br>
	3.父区块一定要设置宽度width</p>

	<div class="container">
		<div class="left">左侧</div>
		<div class="right">右侧</div>
	</div>
	
</body>
</html>

三列布局1

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局1:float+margin</title>
	<style>
		.left {
			width: 200px; 
			height:600px;
			background-color: cyan;
			float:left;  /*左侧向左浮动对齐*/
		}
		.right {
			width: 200px; 
			height:600px;
			background-color: cyan;
			float:right; /*右侧向右浮动对齐*/
		}
		.main {
			height:600px;
			margin-left: 200px;  /*从左边挤出200px*/
			margin-right: 200px; /*从右边挤出200px*/
			background-color: #FD8008;
		}

	</style>
</head>
<body>
	<h4>基本思路:<span style="color:red">float+margin</span></h4>
	<p>1.与二列布局极相似 <br>
	2.左右二列采用浮动+宽度布局<br>
	3.中间内容区使用margin挤区来<br>
	4.DOM顺序:<span style="color:red">必须先写二侧,再写主体,否则右侧会被挤下去</span><br>
	5.二列布局其实也是由它修改而来:去掉右侧.right,并去掉主体中的maring-right即可</p>

	<div class="left">左侧</div>
	<div class="right">右侧</div>
	<div class="main">内容</div>

</body>
</html>

三列布局2

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>三列布局2:position+margin</title>
	<style>
		.container {  /*定位父级*/
			position: absolute;
			left:0;
			right:0;
		}
		.left {
			width: 200px; 
			height:600px;
			background-color: cyan;
			position: absolute;
			top:0;
			left:0;
		}
		.right {
			width: 200px; 
			height:600px;
			background-color: cyan;
			position: absolute;
			top:0;
			right:0;
		}
		.main {
			height:600px;
			margin-left: 200px;  /*从左边挤出200px*/
			margin-right: 200px; /*从右边挤出200px*/
			background-color: #FD8008;
		}

	</style>
</head>
<body>
	<h4>基本思路:<span style="color:red">postion+margin</span></h4>
	<p>1.与二列定位布局极相似 <br>
	2.左右二列绝对定位+宽度布局<br>
	3.中间内容区使用margin挤区来<br>
	4.二列布局其实也是由它修改而来:去掉右侧.right,并去掉主体中的maring-right即可<br>
	5.推荐添加一个定位父级</p>


	<div class="container">
		<div class="left">左侧</div>
		<div class="right">右侧</div>
		<div class="main">内容</div>
	</div>
	

</body>
</html>

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Delphi 中TImageCollection和TVirtualImageList 控件实现high-DPI

Delphi 中TImageCollection和TVirtualImageList 控件实现high-DPI

一、概述RAD Studio允许你通过使用TImageCollection组件和TVirtualImageList组件&#xff0c;在你的Windows VCL应用程序中包含缩放、高DPI、多分辨率的图像。这两个组件位于Windows 10面板中&#xff1a;注意&#xff1a;如果你使用FireMonkey进行跨平台应用&#xff0c;请看T…
阅读更多...
用VSCode在共用服务器上使用连接自己的Docker容器进行开发

用VSCode在共用服务器上使用连接自己的Docker容器进行开发

问题描述 我们实验室有一台很牛的Linux服务器&#xff0c;核多卡多硬盘大&#xff0c;它是大家共用的&#xff0c;组里给我们每个人都创建了一个普通用户&#xff0c;没有sudo权限&#xff0c;所以不能用apt。 但是每个人对开发环境的需求都是不一样的&#xff0c;比如我要用…
阅读更多...
年前无情被裁，面试大厂的这几个月…

年前无情被裁，面试大厂的这几个月…

2月份了&#xff0c;金三银四也即将来临&#xff0c;在这个招聘季&#xff0c;大厂也开始招人&#xff0c;但还是有很多人吐槽说投了很多简历&#xff0c;却迟迟没有回复… 另一面企业招人真的变得容易了吗&#xff1f;有企业HR吐槽&#xff0c;简历确实比以前多了好几倍&…
阅读更多...
【手写 Vuex 源码】第五篇 - Vuex 中 Mutations 和 Actions 的实现

【手写 Vuex 源码】第五篇 - Vuex 中 Mutations 和 Actions 的实现

一&#xff0c;前言 上一篇&#xff0c;主要介绍了 Vuex 中 getters 的实现&#xff0c;主要涉及以下几个点&#xff1a; 将选项中的 getters 方法&#xff0c;保存到 store 实例中的 getters 对象中&#xff1b;借助 Vue 原生 computed&#xff0c;实现 Vuex 中 getters 的数…
阅读更多...
有趣的Hack-A-Sat黑掉卫星挑战赛——跟踪卫星

有趣的Hack-A-Sat黑掉卫星挑战赛——跟踪卫星

国家太空安全是国家安全在空间领域的表现。随着太空技术在政治、经济、军事、文化等各个领域的应用不断增加&#xff0c;太空已经成为国家赖以生存与发展的命脉之一&#xff0c;凝聚着巨大的国家利益&#xff0c;太空安全的重要性日益凸显[1]。而在信息化时代&#xff0c;太空安…
阅读更多...
TMC2660驱动及调试记录

TMC2660驱动及调试记录

TMC2660 一款优秀的电机驱动芯片&#xff0c;驱动简单。 理论就看这篇&#xff1a;TMC260/TMC2660/TMC262步进电机驱动 或者直接看手册&#xff0c;手册也不复杂。 使用SPI通信&#xff0c;通过SPI配置参数。支持直接使用SPI和Step/Dir方式控制两种控制步进电机的方式。 TMC…
阅读更多...
【C语言】数据结构-二叉树

【C语言】数据结构-二叉树

主页&#xff1a;114514的代码大冒险 qq:2188956112&#xff08;欢迎小伙伴呀hi✿(。◕ᴗ◕。)✿ &#xff09; Gitee&#xff1a;庄嘉豪 (zhuang-jiahaoxxx) - Gitee.com 引入 我们之前已经学过线性数据结构&#xff0c;今天我们将介绍非线性数据结构----树 树是一种非线性的…
阅读更多...
面试官问我：说说你对Spring MVC的理解

面试官问我：说说你对Spring MVC的理解

文章目录什么是MVC模式MVC的原理图2.1 分析工作原理3.1 组件说明&#xff1a;3.1.1 组件&#xff1a;核心架构的具体流程步骤什么是MVC模式 MVC&#xff1a;MVC是一种设计模式 MVC的原理图 2.1 分析 M-Model 模型&#xff08;完成业务逻辑&#xff1a;有javaBean构成&#x…
阅读更多...
C++11的异步操作让多线程开发变得简单

C++11的异步操作让多线程开发变得简单

C11的异步操作简介一、std::future1.1、future的类型1.2、future的使用1.3、使用示例二、std::packaged_task三、std::promise总结简介 C提供如下的异步操作接口&#xff1a; std::future &#xff1a;异步指向某个任务&#xff0c;然后通过future特性去获取任务函数的返回结…
阅读更多...
1. RNN神经网络初探

1. RNN神经网络初探

目录1. 神经网络与未来智能2. 回顾数据维度和神经网络3. 文本转变为词向量1. 神经网络与未来智能 2. 回顾数据维度和神经网络 循环神经网络&#xff0c;主要用来处理时序的数据&#xff0c;它对每个词的顺序是有要求的。 循环神经网络如何保存记忆功能&#xff1f; 当前样本只…
阅读更多...
Window10开放某个端口

Window10开放某个端口

需求&#xff1a;由于防火墙原因&#xff0c;开放某个端口:如9999 在开始那里搜索防火墙-进入防火墙 第一步&#xff1a;核实是否启动了防火墙&#xff0c;之后进行 第二步&#xff1a;点击“高级设置”&#xff0c;→“入站规则”→“新建规则”→“端口”→ “下一步” …
阅读更多...
【前端领域】3D旋转超美相册（HTML+CSS）

【前端领域】3D旋转超美相册（HTML+CSS）

世界上总有一半人不理解另一半人的快乐。 ——《爱玛》 目录 一、前言 二、本期作品介绍 3D旋转相册 三、效果展示 四、详细介绍 五、编码实现 index.html style.css img 六、获取源码 公众号获取源码 获取源码&#xff1f;私信&#xff1f;关注&#xff1f;点赞&…
阅读更多...
基于微信小程序的游戏账号交易小程序

基于微信小程序的游戏账号交易小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…
阅读更多...
【C++初阶】十二、STL---反向迭代器的实现

【C++初阶】十二、STL---反向迭代器的实现

目录 一、反向迭代器 二、反向迭代器的实现 一、反向迭代器 之前的模拟实现vector、list 的时候&#xff0c;这些都是实现了正向迭代器&#xff0c;反向迭代器都没有实现&#xff0c;这里就要实现反向迭代器 反向迭代器也是适配器&#xff08;配接器&#xff09;的一种&#…
阅读更多...
在阿里干了2年的测试，总结出来的划水经验

在阿里干了2年的测试，总结出来的划水经验

测试新人 我的职业生涯开始和大多数测试人一样&#xff0c;开始接触都是纯功能界面测试。那时候在一家电商公司做测试&#xff0c;做了一段时间&#xff0c;熟悉产品的业务流程以及熟练测试工作流程规范之后&#xff0c;效率提高了&#xff0c;工作比较轻松&#xff0c;这样我…
阅读更多...
代码随想录第55天（动态规划）：● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

代码随想录第55天（动态规划）：● 309.最佳买卖股票时机含冷冻期 ● 714.买卖股票的最佳时机含手续费

一、最佳买卖股票时机含冷冻期 题目描述: 思路和想法&#xff1a; 这道题相较于之前的题目&#xff0c;注重对状态的分析&#xff0c;这里分为四个状态。 &#xff08;1&#xff09;状态一&#xff0c;买入状态 dp[i][0] 操作一&#xff1a;前一天就是持有状态&#xff08;状…
阅读更多...
day39【代码随想录】动态规划之

day39【代码随想录】动态规划之

文章目录前言一、不同路径&#xff08;力扣62&#xff09;二、不同路径||&#xff08;力扣63&#xff09;三、最小路径和&#xff08;力扣64&#xff09;前言 1、不同路径 2、不同路径|| 3、最小路径和 一、不同路径&#xff08;力扣62&#xff09; 一个机器人位于一个 m x n…
阅读更多...
MyBatis-Plus分页插件和MyBatisX插件

MyBatis-Plus分页插件和MyBatisX插件

MyBatis-Plus分页插件和MyBatisX插件六、插件1、分页插件a>添加配置类b>测试八、代码生成器1、引入依赖2、快速生成十、MyBatisX插件1、新建spring boot工程a>引入依赖b>配置application.ymlc>连接MySQL数据库d>MybatisX逆向生成2、MyBatisX快速生成CRUD申明…
阅读更多...
学习open62541 --- [74] 软链接的妙用

学习open62541 --- [74] 软链接的妙用

一 原理 在同一台电脑里&#xff0c;可能会有多个工程同时用到open62541&#xff0c;比较简单的办法是每个工程都拷贝一份open62541源码&#xff0c;但是这样会造成空间浪费&#xff0c;而且open62541的源码包本身也不小。 对于Linux用户来说&#xff0c;可以使用软链接来解决…
阅读更多...
【Python学习笔记】28.Python3 错误和异常

【Python学习笔记】28.Python3 错误和异常

前言 作为 Python 初学者&#xff0c;在刚学习 Python 编程时&#xff0c;经常会看到一些报错信息&#xff0c;在前面我们没有提及&#xff0c;这章节我们会专门介绍。 Python3 错误和异常 Python 有两种错误很容易辨认&#xff1a;语法错误和异常。 Python assert&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023