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

技术标签： css  前端  html  

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

 
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45734905/article/details/130114194

智能推荐

xml实体注入问题_xml注入 内容注入-程序员宅基地

文章浏览阅读618次。xml实体注入问题 https://www.owasp.org/index.php/XML_External_Entity_(XXE)_Prevention_Cheat_Sheet#SAXBuilder_xml注入 内容注入

CRM是否有效？可通过这些办法判断！_crm如何判断会员唯一性-程序员宅基地

文章浏览阅读204次。CRM就是关于客户与公司销售团队之间的客户关系管理，它是一个销售人员管理工具。作为一个工具型产品，CRM能减少更多的人为错误，提高工作效率，从而达到更好的营收。如果在使用CRM期间出现以下现象：不能从不同潜在客户来源中获取潜在客户，不能将潜在客户转化为销售订单，不能提供合适的销售渠道，不能提高销售人员的工作效率。说明你使用的CRM存在问题。如何判断CRM是否有效？为了检查CRM的有效性，销售人员可以对捕获到的潜在客户和具体需求进行跟踪。销售人员能够判断这个潜在客户是否值得做进一步的跟进，或者是否应该放_crm如何判断会员唯一性

数据库三大范式_怎么理解第三范式-程序员宅基地

文章浏览阅读617次，点赞2次，收藏3次。1.第一范式：强调的是列的原子性，即数据库表的每一列都是不可分割的原子数据项。2. 第二范式：要求实体的属性完全依赖于主关键字。所谓完全依赖是指不能存在仅依赖主关键字一部分的属性。3.第三范式：任何非主属性不依赖于其它非主属性。在实际的开发中需要考虑诸多问题，如：考虑商业化的需求和目标（成本，用户体验），数据库的性能更加重要在规范性能问题的时候，需要适当地考虑一下规范性有时候会故意给某些表增加一些冗余的字段（多表查询→单表查询）_怎么理解第三范式

electron-builder打包后找不到代码文件、打包指定资源到安装目录的问题_electron打包后没有提示安装路径什么的-程序员宅基地

文章浏览阅读115次。_electron打包后没有提示安装路径什么的

网络安全资料-程序员宅基地

文章浏览阅读1.3k次。做安全的，这里有你意想不到的东西分类： 信息于网络安全 2011-09-05 22:03 275人阅读 评论(0)收藏 举报目录(?)[+]Blogs Worth It:Forums:Magazines:Video:Methodologies:OSINTPresentations:People and Organizational:Inf

GDAL：创建矢量线、矢量面数据_gdal创建面-程序员宅基地

文章浏览阅读3.4k次，点赞2次，收藏26次。分享给有需要的人，代码质量勿喷。一、创建矢量线数据 单个要素 void xjCreateVectorLineByGDAL(QList<xjPoint> ListNode, const QString &xjSavePath) { GDALAllRegister(); OGRRegisterAll(); const char *xjDriverName =..._gdal创建面

随便推点

qt qml与c++_qt c++ qml-程序员宅基地

文章浏览阅读1.4k次，点赞3次，收藏17次。QMl是一种高效的开发UI 的语言。QML（Qt Meta-Object Language，Qt元对象语言）是一种声明式编程语言，并且它是Qt框架的一个组成部分。Action 对应QAction，提供能够绑定到导航和视图的抽象的用户界面动作。StackView 对应QStackedWidget，提供基于栈的层叠布局。TabView 对应QTabWidget，提供带有标签的基于栈的层叠布局。TabView 对应QTabWidget，提供带有标签的基于栈的层叠布局。_qt c++ qml

详述GPS原理及RTK技术应用_rtk与gps数据的融合过程-程序员宅基地

文章浏览阅读8.9k次，点赞12次，收藏100次。详述GPS原理及RTK技术应用，包括四大卫星定位系统，GPS系统组成：GPS空间部分、地面监控系统和GPS信号接收器（GPS卫星定位车载终端）；GPS定位技术（WGS-84坐标系），GPS定位原理（绝对定位原理，相对定位原理，静态相对定位，动态相对定位）；GPS实时动态定位技术RTK的工作原理以及基准站和流动站组成，GPS实时差分定位RTK技术的缺点，移动站的解算状态；GPS网络RTK技术(VRS系统)组成和原理，作业优势，还有GPS_NMEA 0183协议相关语句介绍。_rtk与gps数据的融合过程

CSS基础（超详解）-程序员宅基地

文章浏览阅读2.3w次，点赞103次，收藏800次。Css (层叠样式表)是种格式化网页的标准方式， 用于控制设置网页的样式，并且允许CSS样式信息与网页内容(由HTML语言定义)分离的一种技术。_css

Android 百度地图SDK 自动定位、标记定位_安卓开发地图获取定位-程序员宅基地

文章浏览阅读1.2w次，点赞98次，收藏201次。先看效果图,如果不是你想要的，也就不浪费你时间了，这样对大家都好。如果是你满意的那样，我们就可以开始写了，首先创建一个名为MapDemo的项目。打开AndroidManifest.xml，复制你的包名然后进入百度地图开放平台，没有注册的小伙伴先注册，已注册的就直接登录，登录进去之后找到控制台→我的应用→创建应用点击之后进入,填写相关资料输入了应用名称、选择了应用类型和启用的服务，输入了包名。还差开发版和发布版的SHA1了① 获取开发版SHA1鼠标点击右侧边栏的Gradle→ app→Ta_安卓开发地图获取定位

java特殊字符转html_html特殊字符转换（java）-程序员宅基地

文章浏览阅读431次。/** * 把文本编码为Html代码 * @param target * @return 编码后的字符串 */ public static String htmEncode(String target) { StringBuffer stringbuffer = new StringBuffer(); int ...

尚硅谷最新版JavaScript基础全套教程完整版（p48-p65）_尚硅谷javascript新书大纲-程序员宅基地

文章浏览阅读237次。尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通)一、基本数据类型和引用数据类型1.基本数据类型-string 、 number 、 Boolean 、null 、undefined2.引用数据类型-object3.区别-JS中的变量都是保存到栈内存中的，基本数据类型的值直接在栈内存中存储，值与值之间是独立存在的，修改一个变量不会影响另外一个变量。-引用数据类型（对象）是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，而变量保存_尚硅谷javascript新书大纲

推荐文章

热门文章

相关标签