null - 程序员宅基地

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

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

智能推荐

【毫米波雷达】毫米波雷达接收发射信号matlab仿真_毫米波雷达仿真-程序员宅基地

文章浏览阅读872次，点赞22次，收藏26次。毫米波雷达是一种利用毫米波段电磁波来探测目标的雷达系统。它具有体积小、重量轻、功耗低、分辨率高、抗干扰能力强等优点，广泛应用于汽车、航空、航天、军事等领域。毫米波雷达的工作原理是：雷达发射机发射毫米波电磁波，电磁波遇到目标后反射，反射波被雷达接收机接收，并根据反射波的强度、频率和相位等信息来确定目标的位置、速度和姿态。毫米波雷达的接收发射信号主要包括以下几个步骤：发射信号毫米波雷达发射机产生毫米波电磁波，并通过天线发射出去。发射信号的频率、功率和波形等参数由雷达系统的设计要求决定。信号传播。_毫米波雷达仿真

matlab for,while,break和continue循环和循环控制_matlab设计问题if,while,for都包含的例题-程序员宅基地

文章浏览阅读6.4k次，点赞6次，收藏8次。for循环循环特定的次数，用end表示循环快结束。示例如下：注意n可以从1取到10，总共循环10次。while循环只要条件为真，就一直循环，用end表示循环快结束。示例如下：该程序中，设置n初值为10，然后进入while循环中。m为产生不大于n的一个随机数，当产生的随机数m和n相等时，退出循环。否则把n加1，再次循环。运行结果如下：if end条件控制if后面要和一个布尔表达式，后面再跟一个或者多个语句分割，就是一个if..end语句。运行如下：i_matlab设计问题if,while,for都包含的例题

奇舞学院JS01—如何写好原生JS_原生js怎么写-程序员宅基地

文章浏览阅读159次。1、交通灯实例<!DOCTYPE html><html><head> <title>js04-1</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href=&qu_原生js怎么写

Call Stack (most recent call first): /opt/ros/melodic/share/catkin/cmake/all.cmake:208 (safe_execu-程序员宅基地

文章浏览阅读3.4k次。CMake Error at /opt/ros/melodic/share/catkin/cmake/safe_execute_process.cmake:11 (message): execute_process(/usr/bin/python "/tmp/QtCreator-XzPzFL/qtc-cmake-iCElsmaa/catkin_generated/generate_cached_setup.py") returned error code 1Call Stack (most r_call stack (most recent call first):

模型提取-程序员宅基地

文章浏览阅读8.6k次，点赞4次，收藏19次。3D游戏模型提取、导入、导出教程这个是我的第二个教程，这个教程的主要内容是教大家如何提取3D游戏里的模型，因为有一些3D游戏里面的模型非常精致，例如有一些人物模型或者场景模型。这样大大方便了模型的制作过程。希望这个教程能对大家有用。一，下载安装 1、下载3D游戏模型提取软件，下载地址：http://pan.baidu.co_模型提取

【避免if else标准写法】阿里P7级别（年薪40w-70w）是如何避免用if else写代码_阿里规范尽量不要else if-程序员宅基地

文章浏览阅读773次，点赞16次，收藏7次。不会吧还有人用if else和switch case？三目运算符？不会吧？不会吧？大佬都是全都不用的！以JAVA为例条件判断语句的四种写法，茴字的四种写法大家不会不知道吧1.正常人写法： private static String MAN = "man"; private static String WOMAN = "woman"; @Data static class Person{ private String gender; p_阿里规范尽量不要else if

随便推点

[arcgis插件]尖锐角检查/批量处理工具-GIS程序猿_arcgis如何查尖锐角-程序员宅基地

文章浏览阅读459次。2、设置合并优先级。选择字段，设置优先级。无需优先级，可以吧文字清空，则会根据与地块有相同信息字段的值来合并。[arcgis插件]尖锐角检查/批量处理工具，支持arcgis10.2-10.8版本。7、仅仅检查选中的地块：先选中地块再执行流程。5、处理流程设置：1 处理，2 切割，3 合并。6、顺便检查选择检查狭长面、自相交、重复节点。4、存在尖锐角并且面积小于这个面积阈值，则无需切割，直接合并。可以选择shp数据、GDB或者MDB的矢量面图层。年度变更，又是尖锐角，死磕尖锐角，就不信搞不定它。_arcgis如何查尖锐角

例子：BlackBerry真正的后台运行程序，Task里面看不到的哦_黑莓手机guid-程序员宅基地

文章浏览阅读5k次。说明：1.BlackBerry_App_Descriptor.xml设置程序为Auto-run on startup，Do not display the application icon on the BlackBerry home screen2.手机开机后自动运行 BackgroundApplication3.主程序BackgroundApplication的main中，执行BackgroundThread.waitForSingleton().start();启动后台线程4.BackgroundTh_黑莓手机guid

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

一、div

二、span

智能推荐

【毫米波雷达】毫米波雷达接收发射信号matlab仿真_毫米波雷达仿真-程序员宅基地

matlab for,while,break和continue循环和循环控制_matlab设计问题if,while,for都包含的例题-程序员宅基地

奇舞学院JS01—如何写好原生JS_原生js怎么写-程序员宅基地

Call Stack (most recent call first): /opt/ros/melodic/share/catkin/cmake/all.cmake:208 (safe_execu-程序员宅基地

模型提取-程序员宅基地

【避免if else标准写法】阿里P7级别（年薪40w-70w）是如何避免用if else写代码_阿里规范尽量不要else if-程序员宅基地

随便推点

[arcgis插件]尖锐角检查/批量处理工具-GIS程序猿_arcgis如何查尖锐角-程序员宅基地

例子：BlackBerry真正的后台运行程序，Task里面看不到的哦_黑莓手机guid-程序员宅基地

oracle中查找执行效率低下的SQL_oracle 怎么抓取执行慢的sql-程序员宅基地

linux下iso8859乱码,在Linux上转换UTF-8和ISO-8859之间的文件-程序员宅基地

如何确定当前项目是采用 Vite 还是 Vue CLI 项目

如何在Linux服务器上安装Stable Diffusion WebUI

推荐文章

热门文章

相关标签