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

智能推荐

计算机通天之路第一季:计算机硬件基础_计算机天问之路-程序员宅基地

文章浏览阅读365次。时间:2017-1-6 20:32:07 今天学习了计算硬件基础,从零开始电脑内部主要包括的几个关键1. 电源电源是电脑的供电者,没有电源一切免谈。其质量好坏,决定了电脑各个部件的电压稳定程度,当你玩着玩着就没电了,或者电压不稳,死机了,蓝屏了,你是什么感受? 2. CPU系统的核心,又称中央处理器,相当于计算机的大脑,负责:算数运算,逻辑运算,数据传输。3. 内存全称:内部存储器。特点是:体积_计算机天问之路

Ubuntu安装MySQL时出现E: Unable to locate package mysql-server 的解决方法-程序员宅基地

文章浏览阅读2.3k次,点赞5次,收藏4次。在Ubuntu系统下,利用apt-get install安装MySQL时sudo apt-get install mysql-server出现如下问题:解决的办法:使用命令sudo apt-get update更新软件源sudo apt-get update然后再输入 sudo apt-get install mysql-server 就可以安装了sudo apt-get install mysql-server..._unable to locate package mysql-server

调用超时或找不到服务器,进入某个功能(如:基础档案、填制凭证等)提示:连接超时或数据服务器连接失败...-程序员宅基地

文章浏览阅读89次。用友软件增加明细科目时提示新增会计科目是,提示上级科目已经使用,新增科目将自动改为上级科目的设置已经使用的科目如何增加明细科目在软件操作过程中,经常会遇到对已经使用的科目,要求增加其明细科目的问题。科目已经使用,有两种情形:1、该科目没有期初余额或本期发生数,但在月末转账定义中使用。2、该科目已经有期初余额或本期发生数。下面分别就这两种情形的处理方法,分别进行介绍。情形1:该科目没有期初余额或本期..._调用超时应用集成平台连接异常

东北大学c语言编程及答案,东北大学c语言编程试题及其答案.doc-程序员宅基地

文章浏览阅读730次。东北大学C语言题库第一部分( 选择题 )1、构成C语言的基本单位是________。你的答案是:正确答案是:B过程函数语句命令2、设x为整型变量,不能正确表达数学关系:55<="">x>5&&x<10x==6||x==7||x==8||x==9!(x<=5)&&(x<10)3、在C语言中,逻辑运算符的优先级从高到低的排列顺序为__..._以下有关结构体类型描述正确的是 a.结构体类型的大小为其各成员所占内存的总和b.

c语言迪杰斯拉算法,麻烦改成迪杰特拉斯算法-程序员宅基地

文章浏览阅读61次。该楼层疑似违规已被系统折叠隐藏此楼查看此楼#includeusing namespace std;const int n=5; //n表示公园图中顶点个数const int e=7; //e表示公园图中路径bool visited[n+1];#define max 32767class graph{public:int arcs[n+1][n+1]; //领接矩阵int a[n+1][n+1];..._迪特拉斯算法代码

Vue学习看这篇就够_vue看这篇-程序员宅基地

文章浏览阅读183次。Vue -渐进式JavaScript框架介绍vue 中文网 vue github Vue.js 是一套构建用户界面(UI)的渐进式JavaScript框架库和框架的区别我们所说的前端框架与库的区别?Library库,本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者代表:jQuery jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作Framework框架,是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适_vue看这篇

随便推点

【Android】adb+shell - 实现滑动、等待、返回自动化_adb shell 滑动-程序员宅基地

文章浏览阅读2.8k次。adb 模拟手机操作,获取 微信读书 时长 -> 虚荣心漫番刷广告_adb shell 滑动

uipath和python哪个好_UiPath从入门到精通视频教程-程序员宅基地

文章浏览阅读251次。匠厂出品,必属精品 Uipath中文社区qq交流群:465630324uipath中文交流社区:https://uipathbbs.comRPA之家qq群:465620839第一课--UiPath的安装与激活第二课--UiPath设计器介绍第三课--UiPath变量介绍第四课--UiPath条件判断第五课--UiPath循环第六课--UiPath整合流程控制语句第七课--UiPath邮件发送之..._uipath和python哪个好

Doolittle分解法(LU分解法)的Python实现_杜立特尔三角分解法python-程序员宅基地

文章浏览阅读7.2k次,点赞8次,收藏17次。在解一般的非奇异矩阵线性方程组的时候,或者在迭代改善算法中,需要使用LU分解法。对于一个一般的非奇异矩阵A=(a11, a12,…,a1n,a21,…ann),可分解为一个下三角矩阵L和一个上三角矩阵U。其中L的主对角线元素都是1.希望得到一个M,最后在需要的时候将M拆分为L和UM=[[u11 u12 u13 ...... u1n l21 u22 u23 ...... u2n ..._杜立特尔三角分解法python

python关键词统计_Python3 利用openpyxl 以及jieba 对帖子进行关键词抽取 ——对抽取的关键词进行词频统计...-程序员宅基地

文章浏览阅读384次。Python3 利用openpyxl 以及jieba 对帖子进行关键词抽取 ——对抽取的关键词进行词频统计20180413学习笔记一、工作前天在对帖子的关键词抽取存储后,发现一个问题。我似乎将每个关键词都存到分离的cell中,这样在最后统计总词频的时候,比较不好处理。于是,上回的那种样式:是不行的,应该把它们放到同一列(行)中,组装成一个list或tuple再进行词频统计。1.读取输出文件“t1..._openpyxl如何关键字出现计数

python在数据分析方面的应用、下列说法正确_智慧树知到大数据分析的python基础答案...-程序员宅基地

文章浏览阅读1.8k次。智慧树知到大数据分析的python基础答案在派生类中可以通过 “ 基类名 . 方法名 ()” 的方式来调用基类中的方法 .下面代码的执行结果是 : ( ) a = 10.99 print( complex(a))numpy 中求最大值方法是: ( )下面代码的输出结果是 : ( ) vlist = list( range(5)) print( vlist)计算numpy中元素个数的方法是: ( ..._关于python在数据分析方面的应用,以下说法正确的是哪些选项

win10硬盘锁怎么解除_win10如何使用bitlocker解锁硬盘加密-程序员宅基地

文章浏览阅读4.5k次。日常使用计算机的时候,有些情况下可能会遇到需要给bitlocker的加密进行解锁。win10如何使用bitlocker解锁硬盘加密?其实可在系统中直接进行操作。首先找到自己需要解锁的硬盘,右键找到需要进入的选项,初始化之后点击下一步然后再进行一系列的操作即可,具体步骤见下面详细介绍~win10如何使用bitlocker解锁硬盘加密1、选择需要加密的磁盘,然后右击,点击“启用bitlocker”;2..._csdn 硬盘带密码怎么解除