CSS3表格布局[上]

最新推荐文章于 2023-10-14 07:00:00 发布
最新推荐文章于 2023-10-14 07:00:00 发布
阅读量511 收藏 1
点赞数
分类专栏： web 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a716121/article/details/52162686
版权

1.表格布局（不常用）


index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3传统布局[上]</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<table border="0">
	<tr>
		<td colspan="2" class="header">header</td>
	</tr>
	<tr>
		<td class="aside">aside</td>
		<td class="section">section</td>
	</tr>
	<tr>
		<td colspan="2" class="footer">footer</td>
	</tr>
</table>

</body>
</html>


style.css 

@charset "utf-8";
body{
	margin:0;
}
table{
	/*width:960px;*/
	width: 100%;
	margin:0 auto;
	border-spacing: 0px;
	border-collapse: collapse;

}

.header{
	height:120px;
	background-color: olive;
}
.aside{
	height:400px;
	width:200px;
	background-color: purple;
}
.section{
	width: 760px;
	height:400px;
	background-color: red;
}
.footer{
	height: 120px;
	background-color: gray;
}



2.浮动布局（常用）


index2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<title>CSS3传统布局[上]</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<header>
	header
</header>

<aside>
	aside
</aside>

<section>
	section
</section>

<footer>
	footer
</footer>
</body>
</html>

style2.css 

@charset "utf-8";
body{
	margin: 0 auto;
	/*border:2px solid red;*/
	/*width:960px;*/
	width: auto;
}
header{
	/*width: 960px;*/
	height: 120px;
	background-color: olive;
	margin:0 auto;
}
aside{
	/*width: 200px;*/
	width: 20%;
	height: 400px;
	background-color: purple;
	float: left;
}
section{
	width:80%;
	/*width: 760px;*/
	height: 400px;
	background-color: red;
	float: right;
}
footer{
	height: 120px;
	background-color: gray;
	/*清理浮动*/
	clear :both;

}

ppt:





fxy流年无悔
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Bootstrap CSS布局之表格
08-31
主要为大家详细介绍了Bootstrap CSS布局之表格的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
CSS3表格和表单样式
最新发布
布道师小羊的博客
10-31 2611
表格和表单样式
CSS 之 table 表格布局
weixin_45092437的博客
10-09 5922
除了使用HTML的table元素外，我们还可以通过display: table/inline-table;设置元素内部的布局类型为表格布局。并结合table-cell、table-row等相关CSS属性值可以实现HTML中table系列元素的效果，具有表头、表尾、行、单元格等概念，让元素以表格的形式进行布局。
CSS 3之 表格
程序员小白的博客
06-25 705
在显示一个表格数据时，通常都带有表格边框，用来界定不同单元格的数据； 当表格的描述标记值大于0时，显示边框； 若值为0，则不显示边框； 边框显示时，可用属性及衍生属性，以及属性对边框进行修饰，属性表示对边框进行样式、颜色和宽度设置，以达到提高样式效果的目的； 属性主要用设置表格的边框是否合并为一个单一的边框，像在标准的 HTML 中那样分开显示； 语法格式如下所示： 是默认值，表示边框会被分开，不会忽略 和 属性； 而 属性表示边框会合并为一个单一的边框，会忽略 和 属性；例子 1： 使用 属
Css之table布局:
SunPeng的博客
11-22 5452
Css之table布局:
【CSS3】grid 网格布局
Superman_H的博客
02-17 3184
# 网格布局 ( grid 布局 ) 1. 网格容器：网格容器是所有网格项的父元素；eg: 下例中类名为 container 的 div 就是网格容器 2. 网格项：网格项是网格容器的子元素；eg: 下例中类名为 item 的 div 就是网格项 ```html .container { display: grid; } 网格项 1
CSS3响应式表格布局特效代码
03-20
CSS3响应式表格布局代码，响应式设计，自适应分辨率，兼容PC端和移动端，CSS3制作响应式表格布局实例。
CSS 网页布局 表格制作实例
12-29
相反，该用TABLE的地方是提倡使用TABLE的。...最合理的方法，就是使用表格来实现表格，经过 HeTingYi 的发布以及 goos 的简化，代码如下： 页面结构： <col u00a0class=col3> 游客类别</th>
CSS display属性的table表格布局
09-24
主要为大家详细介绍了基于CSS属性display：table的表格布局的使用，即CSS display属性的table表格布局，感兴趣的小伙伴们可以参考一下
CSS3 flex布局之快速实现BorderLayout布局
09-24
所谓的布局管理器分为好多种，最常见的有流式布局管理器（FlowLayout）、边界布局管理器（BorderLayout）和表格布局管理器（GridLayout）。本文给大家介绍CSS3 flex布局之快速实现BorderLayout布局，感兴趣的朋友...
纯CSS3表格美化特效.zip
07-03
纯CSS3表格美化特效
css巧用表格布局制作table
行路-前端的博客
11-12 816
利用css表格布局制作样式
css：九宫格布局的五种方法（grid布局、flex布局、table布局、float浮动定位、inline-block+letter-spacing属性）
YangLu888
04-20 6032
css实现九宫格的五种方法：grid网格布局、flex布局、inline-block+letter-spacing属性、float浮动定位、table表格布局
css3 table表格
A12536365214的博客
10-14 1367
这些是常见的样式属性。CSS3还提供了更多高级的样式效果，如阴影、渐变、过渡等，可以用于更加复杂的表格设计。使用CSS3来美化HTML表格（table）可以提高表格的外观和可读性。
css3之网格布局
qq_42628504的博客
08-23 630
一网格布局（Grid）是最强大的 CSS 布局方案。 本文参考自 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 上图这样的布局，就是 Grid 布局的拿手好戏。 Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别
css常见布局方式
DZQ1223的博客
06-13 3224
CSS 的布局应该是 CSS 体系中的重中之重，主要的布局方式有 table 表格布局（早期），float 浮动布局、position布局和 flex 布局。布局方式优点缺点浮动布局兼容性好，支持大多数浏览器；可以实现多列布局。容易出现清除浮动问题，需要额外的样式规则来处理；不太适合复杂的布局需求，例如垂直居中和等高布局。定位布局灵活性较高，可以精确控制元素的位置；可以实现重叠布局效果。对于复杂布局，需要手动计算和调整元素的位置和尺寸。
CSS3表格之表格样式（一）
高星雨的博客
11-05 880
你好，欢迎打开我的博客，阿雨每天与你分享许多有趣新鲜的knowledge！ 最近给大家带来的是WEB前端中重要的一部分，一些有关CSS的基础知识，俗话说的好“万丈高楼平地起”，要想做一个优秀的前端人员，必须打好基础哦。 废话不多说，上干货 一，今天只要提及两个表格，分别是斑马表格和圆角表格 以下是斑马表格，效果如下 第一步，新建HTML5文档（省略） 第二步，定义表格样式，表格样式里面包括3部分...
CSS3 table — 自适应布局表格
thingir的博客
01-20 1万+
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>演示：纯CSS实现自适应布局表格</title> <style type="text/css"> body { font-family: arial; background:#fff; } table { border: 1
css3的display:table布局
热门推荐
Bessicxie的博客
11-19 3万+
当IE8发布时，它将支持很多新的CSS display属性值，包括与表格相关的属性值：table、table-row和table-cell，它也是最后一款支持这些属性值的主流浏览器。 网页元素应用上那些与表格相关的display属性值后，能够模仿出与表格相同的特性。display:table=>相当于“table”标签； display:table-row=>相当于“tr”标签； displa
css 表格布局怎么写
04-24
你还可以使用 CSS 样式来定义表格布局的样式，例如： ``` table { border-collapse: collapse; width: 100%; } th, td { text-align: left; padding: 8px; } th { background-color: #ddd; font-weight: bold...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值