css_day5---初识div+css

最新推荐文章于 2025-10-20 13:24:43 发布

原创最新推荐文章于 2025-10-20 13:24:43 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#html #网页设计

☛Web前端同时被 2 个专栏收录

38 篇文章

订阅专栏

------ CSS

8 篇文章

订阅专栏

本文介绍了Div+CSS的基本概念及优势，通过一个简单的案例演示了如何利用Div+CSS进行网页布局，展示了代码如何组织以及样式如何定义。

Day5

●div+css简介

Div元素是用来为HTML文档内大块的内容提供结构和背景的元素

CSS（Cascading style Sheets层叠样式表单）

它是一种用来表现HTML或XML等文件式样的计算机语言。

Div+css是网站标准中常用术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML中不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。

可以这样简单理解div+css：

Div是用于存放内容（文字、图片、元素）的容器。

Css是用于指定放在div中的内容如何显示，包括这些内容的位置和外观。

示意图如下：

快速体验案例：

test1.html:

<html>
	<!--引入my.css文件-->
	<head>
		<title>test1</title>
		<link href="my.css" type="text/css" rel="stylesheet"/>
		</head>
			<body>
			<div class="style1">
			<table>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				<tr><td>12</td><td>12</td><td>12</td><td>12</td></tr>
				</table>
				</div>
				</body>
	</html>

my.css:

/*类选择器*/
.style1{
	width:300px;
	height:200px;
	border: 1px solid blue;
	margin:0 auto;
	}
	
	/*父子选择器*/
	/*级联选择器*/
	.style1 table{
		border:1px solid black;
		width:298px;
		height:198px;
		}
		
		.style1 table td{
			border:1px solid black;
			text-align:center;/*对齐方式*/
		}

运行结果：