前端新手上路之css布局篇(单列布局)

最新推荐文章于 2024-04-03 19:26:57 发布
最新推荐文章于 2024-04-03 19:26:57 发布
阅读量232 收藏
点赞数
分类专栏： html 和css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linglingzi001/article/details/103392951
版权

单列布局1

头部和底部占满浏览窗口，内容限定宽度并居中
单列布局1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.header,.content,.footer{
				text-align: center;
			}
			.header{
				width: 100%;
				background-color: #ac8daf;
			}
			.content{
				width: 1200px;
				margin: 0 auto;
				background-color:#ddb6c6;
			}
			.footer{
				width: 100%;
				background-color: #ac8daf;
			}
		</style>
	</head>
	<body>
		<div class="header">头部导航栏</div>
		<div class="content">中间内容区</div>
		<div class="footer">尾部导航栏</div>
	</body>
</html>

单列布局2

限定最大宽度，超过最大宽度时自适应显示，水平居中
单列布局2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				max-width: 1300px;
				margin: 0 auto;
			}
			.header,.content,.footer{
				text-align: center;
			}
			.header{
				background-color: #ac8daf;
			}
			.content{
				background-color:#ddb6c6;
			}
			.footer{
				background-color: #ac8daf;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="header">头部导航栏</div>
		</div>
		<div class="wrap">
			<div class="content">中间内容区</div>
		</div>
		<div class="wrap">
			<div class="footer">尾部导航栏</div>	
		</div>
		
	</body>
</html>

下一篇：两栏布局

小白彡不白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+CSS实现单列布局水平居中布局
09-27
在网页设计中，布局是至关重要的，而单列布局水平居中则是常见且实用的一种布局方式。本文将详细探讨如何使用HTML和CSS实现这一布局，以及它的优缺点和实际应用。 1. **父元素text-align:center; 子元素：inline-...
CSS常见布局整理
Web_boom的博客
01-03 2806
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
CSS布局整理（单列布局、几种常见的双列布局&三列布局）
weixin_42479421的博客
08-20 2032
整理了CSS中的单列、双列、三列布局。 从浮动、绝对定位、Flex、Grid等角度讲解双列布局和三列布局。另外，三列布局还有圣杯布局、双飞翼布局。
html + css 布局技巧总结 ——单列布局，2024前端者真的太难了
最新发布
2401_83974087的博客
04-03 945
走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！缺点：兼容性差，如果进行大面积的布局可能会影响效率。/* 绝对定位实现垂直居中 */
CSS布局
小琪大琦的blog
09-09 170
一、单列布局 1. 等宽的单列布局 header,content 和 footer 等宽的单列布局 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
两列布局中单列定宽单列自适应布局的6种思路
weixin_34290352的博客
05-02 97
前面的话 　　说起自适应布局方式，单列定宽单列自适应布局是最基本的布局形式。本文将从float、inline-block、table、absolute、flex和grid这六种思路来详细说明如何巧妙地实现布局   float 【思路一】float 　　说起两列布局，最常见的就是使用float来实现。float浮动布局的缺点是浮动后会造成文本环绕等效果，以及需要及时清除浮动。如果各浮动元...
前端入门html和css布局
07-20
5. CSS Grid和Flexbox的结合：这两种布局方式可以互补，为更复杂的设计提供解决方案，例如，使用Grid处理整体布局，而Flexbox处理内部元素的对齐和排列。 学习前端开发，了解并熟练掌握HTML和CSS布局是至关重要的。...
WEB前端学习:CSS学习_CSS布局
01-08
CSS布局 文章目录CSS布局一、display二、标准三、浮动四、多列浮动布局1....该篇讲的是CSS布局，主要用于确定CSS盒子的位置 一、display display: block; 值 意义 none 元素被清除，相当于不存在常用于隐藏元素
高效学习CSS布局之道
11-26
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
CSS Grid布局教程之网格单元格布局
12-13
前面花了两篇内容（《CSS Grid布局教程之什么是网格布局》和《CSS Grid布局教程之浏览器开启CSS Grid Layout汇总》）为这篇文章做足了铺垫。或许你想知道的是如何使用？各位看官不用太急，接下来通过各种实例向大家...
CSS布局——单列布局
Ace_Arm的博客
07-13 1884
单列布局有以下两种形式： 第一种：一栏布局实现方法： 代码 效果： 第二种：一栏布局（通栏）实现方法： 代码 效果： 其实单列布局是最为基础和简单的一种，实现方法并不局限于以上两种，大家可自由发挥，找到更多的方法来实现。...
多列布局和单列布局的练习
m0_63122857的博客
12-08 209
今天是单列布局和多列布局的简单练习多的不说上代码 <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="div.css"> </head> <body> <hr color="#000"> <div class="a1"&g
CSS常见的布局方式
m0_70274157的博客
04-30 4741
====== 常见的单列布局有两种： header,content 和 footer 等宽的单列布局 header 与 footer 等宽,content 略窄的单列布局 ![](https://img-blog.csdnimg.cn/dbb55f3d98db47fb8ac999a7398e4f23.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmF 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开
常用布局简介（单列布局、两列布局、三列布局、sticky footer粘连布局）
panghu_bupang的博客
12-28 2951
十分钟学会正则表达式 (一)限定符 1、?:它前面的字符需要出现0次或1次 例如：used?可以匹配到use和used 2、*:它会匹配0个或多个字符 例如：ab*c可以匹配到ac,abc,abbbbbbc 3、+:它会匹配一次及以上的字符 例如：ab+c可以匹配abc,abbbc,而不会匹配ac 4、{}:可以限定匹配的数量 例如：ab{6}c,则匹配到abbbbbbc,而要限定b的数量在2到6之间，则是ab{2,6}c，如果只是两次以上，则省略括号里的6，写成ab{2,}c (二)"或"运算符 例如：a
HTML5+CSS3学习笔记（九）前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
Yeee_F
03-30 3405
前端页面六大布局（文档流布局、浮动布局、定位布局、表格布局、弹性布局、网格布局）
HTML列表的使用与布局
吃不胖.
09-04 192
同时，还介绍了列表的嵌套以及如何使用CSS来设置嵌套列表的样式。但是，如果我们想要使用自定义的样式来标记每个项目，可以使用CSS来进行样式设置。在HTML中，我们可以将一个类型的列表嵌套到另一个类型的列表中。同样地，我们也可以使用CSS来设置描述列表的样式。同时，将无序列表的样式设置为自定义的样式，这样可以区分不同类型的列表。上面的代码将创建一个包含三个项目的有序列表，浏览器将根据默认的样式将每个项目用数字进行标记。上面的代码将创建一个包含两个项目的描述列表，浏览器将默认将名称和值用冒号进行分隔。
CSS的单列布局与二&三列布局
Just for funnnnnnnnnnnn
10-31 2367
这里介绍CSS常用的单列布局与二&三列布局，作为记录，希望自己的基本功能够更扎实。单列布局常见的单列布局有两种： header,content和footer等宽的单列布局 header与footer等宽,content略窄的单列布局 对于前者： 通过对header,content,footer统一设置width（max-width）即可得到。<div class="header">
CSS单列布局
weixin_45752307的博客
03-09 138
CSS单列布局 好久没更新博客了，一直都在写一些小demo，还有在弄一些小项目，这次就放个单列布局吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device
html-单列布局
qq_44657026的博客
10-23 384
单列布局练习 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &l...
前端面试精简篇前端面试精简篇
06-06
这篇内容是关于前端面试中常见的CSS相关知识点的精简版总结，主要涵盖了布局技巧和元素居中方法。 一、CSS相关布局方案： 1.1 左边定宽，右边自适应： - 方案1：使用`float`属性将左侧元素浮动，并通过`margin-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值