Sublime编写html中div布局和span行内元素组合_css span拼接商品名-程序员宅基地

一、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组合而成的一个简单的商品

本文链接：https://blog.csdn.net/weixin_45734905/article/details/130114194

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

Java毕业设计基于SpringBoot vue城镇保障性住房管理系统

首页图片轮播房源信息房源详情申请房源公示信息公示详情登录注册个人中心留言反馈后台管理登录个人中心修改密码个人信息用户管理房屋类型房源信息管理房源申请管理住房分配管理留言板管理轮播图管理公示信息管理角色：用户管理员大家可。

xhadmin多应用SaaS框架之智慧驾校H5+小程序v1.1.5正式发布！

xhadmin 是一套基于最新技术的研发的多应用 Saas 框架，支持在线升级和安装模块及模板，拥有良好的开发框架、成熟稳定的技术解决方案、提供丰富的扩展功能。为开发者赋能，助力企业发展、国家富强，致力于打造最受欢迎的多应用 Saas 系统。

【Vue3源码学习】— CH3.4 baseCreateRenderer 详解

在 baseCreateRenderer 中，定义了多种方法，例如 patch、mountComponent、updateComponent 等，这些方法各自承担不同的渲染任务。这些定义不直接执行任何操作，而是为后续的渲染流程提供必要的工具和函数。baseCreateRenderer 更像是一个配置和定义渲染器行为的场所，而具体的渲染逻辑则是在实际调用 render 方法时，按需执行这些预定义的方法。这样的设计不仅清晰地分离了配置与执行，也使得 Vue 渲染器可以灵活地适应不同的渲染需求和环境。

ROS1快速入门学习笔记 - 10服务数据的定义和使用

三个横线作为一个区分，上面是request，下面是response；创建完之后如下所示。

017、Python+fastapi，第一个Python项目走向第17步：ubuntu24.04 无界面服务器版下安装nvidia显卡驱动

新的ubuntu24.04正式版发布了，前段时间玩了下桌面版，感觉还行，先安装一个服务器无界面版本吧安装时有一个openssh选择安装，要不然就不能ssh远程，我就是没选，后来重新安装ssh。另外一个就是安装过程中静态ip设置下在etc/netplan 文件夹下，有一个yaml文件，我的是50-cloud-init.yaml，先用ip a看看network:ethernets:enp3s0:routes:version: 2。

不是阿里P8级大佬，岂能错过这篇MySQL运维内参？啃透涨薪so easy-程序员宅基地

文章浏览阅读176次。写在前面MySQL被设计为一个可移植的数据库，几乎在当前所有系统上都能运行，如Linux、Solaris、 FreeBSD、 Mac和Windows。尽管各平台在底层(如线程)实现方面都各有不同，但是MySQL基本上能保证在各平台上的物理体系结构的一致性。因此，用户应该能很好地理解MySQL数据库在所有这些平台上是如何运作的。由于工作的缘故，笔者的大部分时间需要与开发人员进行数据库方面的沟通，并对他们进行培训。不论他们是DBA，还是开发人员，似乎都对MySQL的体系结构了解得不够透彻。很多人喜欢把M_mysql运维内参