Sublime编写html中div布局和span行内元素组合

小白成长札记

于 2023-04-12 19:11:07 发布

阅读量494

点赞数

文章标签： html css 前端

本文链接：https://blog.youkuaiyun.com/weixin_45734905/article/details/130114194

版权

一、div

首先介绍div布局，<div> 可定义文档中的分区或节。

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>div标签</title>
</head>
<body>

	<!-- 
	div ===》 divison 双标签
	独立成和行，可以设置宽高 == 》块级元素
	布局容器，页面主要布局就是使用div标签来划分网页的，本身没有任何意义，可以在里面嵌套其他标签
	 -->
<div style="height:200px; width: 200px; background-color: pink;">我是div标签</div>
<div>我是div标签2号</div>
<div>
	<h1>hello world</h1>
	<p>我是p标签</p>
</div>
</body>
</html>

div还可以设置内部内容对齐方式和文字的粗细，大小，以及自己本身的边框大小和颜色等

<div style="height:650px; width:500px;  border:1px solid black; text-align: center; font-size: 20px; font-weight: bold; ">

二、span

其次简单来介绍一下span用于对行内元素的组合作用，span，是一个Html标签，标签被用来组合文档中的行内元素，支持HTML的全局属性。要注意span不具有分行的作用。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>荣耀80详情页</title>
</head>
<body>
	<div style="height:650px; width:500px;  border:1px solid black; text-align: center; font-size: 20px; font-weight: bold; ">
		<img src="./image/honor2.jpg" alt="图片加载失败" style="width:300px; " title="荣耀80详情" align="center">
		<br>
		<br>
			<p >
					<span style="color:black; font-weight:normal; font-size:27px">
						
					Honor 80</span>
			</p>
			<!-- <h3 align="center" style="color:grey;">高性能长续航，5000万像素超清双摄</h3> -->
			<p>
				<span style="color:#ADADAD; font-weight:lighter;">	

				高性能长续航，5000万像素超清双摄
				</span>
			</p>
			<p align="center" style="color:orange;" >
				<span style="color:#FF9224; font-weight: normal; font-size: 27px;">699元起</span>
			</p>
	</div>
</body>
</html>

上面代码是利用div和span组合而成的一个简单的商品