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

智能推荐

docker-pptp_docker pptp 807-程序员宅基地

文章浏览阅读1.5k次。docker pull ubuntusudo modprobe nf_conntrack_pptpecho nf_conntrack_pptp | sudo tee /etc/modules-load.d/pptp.confdocker run -i -t --privileged=true ubuntu:latest /bin/bashapt-get -y updateapt-get -y_docker pptp 807

UE4中自定义用于sequence的变量和函数_蓝图 操作 sequence-程序员宅基地

文章浏览阅读1.5k次,点赞3次,收藏9次。UE4中自定义用于sequence的变量和函数https://zhuanlan.zhihu.com/p/136962130ue4进化了sequence这个系统,每个版本都在进化,使得这个工具越来越好用,好用到我们甚至我们在做游戏的时候,任意的过场都可以拿他来制作,可以说是美术的利器。绝大部分美术在短时间内就能学会ue4的sequence并用它做出绚烂的画面,但是,这只限制与一般的单机游戏的过场,如果我们希望把它做成游戏里的事件的过场,比如触发事件后的表现,就有不少欠缺了。最主要的是,因为角色在游_蓝图 操作 sequence

plant simulation 关于产线工人搬运method优化_plant工人-程序员宅基地

文章浏览阅读341次。怎样优化一人四机搬运流程,不会出现workerpool手上有工件在工位前发呆,导致后工位的停止_plant工人

okhttp response.body().contentLength()=-1_解决okhttp content-length -1-程序员宅基地

文章浏览阅读6k次。问题:在使用okhttp下载文件的时候拿到的文件长度为-1解决思路1.看服务器返回的请求头是否含有Content-Lengthcmd 打开命令窗口输入 curl -i +下载链接窗口显示 connect-length 是有数值的2.看返回的content-typecontent-type类型https://www.runoob.com/http/http-content-type.html第一个返回text/plain; charset=utf-8 表示文本类型..._解决okhttp content-length -1

关于使用aspectjx出现 java.util.zip.ZipException: zip file is empty_aspectjtools zip file is empty-程序员宅基地

文章浏览阅读3.4k次。首先在demo中是没有问题的,然后集成到正式项目中就报了这个错,反复对比了好几次配置都一样的(有种情况是集成了但是不使用也会报错没找到类xxx)。先Googlegoogle发现该项目的issues里面也有很多人遇到这个问题。https://github.com/HujiangTechnology/gradle_plugin_android_aspectjx/issues/101h..._aspectjtools zip file is empty

vc十六进制字符串转十进制整数_vc 16进制转10进制-程序员宅基地

文章浏览阅读736次。原理看图说话代码实现DWORD Func_hex_to_dec(const char* szHex);int main(){ Func_hex_to_dec("F3E4"); system("pause"); return 0;}DWORD Func_hex_to_dec(const char* szHex){ DWORD dwResult = NULL; CHAR s..._vc 16进制转10进制

随便推点

开发内功修炼视频课程上线-程序员宅基地

文章浏览阅读77次。无论是对于准备参加校园招聘、社会招聘的同学,还是想在工作中持续提升技术能力的同学,深度地理解计算机硬件、Linux 内核底层原理都是非常重要的。我之前给大家分享技术主要是通过公众号、纸质出版书等途径。其中《深入理解Linux网络》入围了2022年中国开发者影响力IT图书榜单。新的一本讲 CPU 原理、进程调度、内存管理方面的书也已经审稿中,预计明年会出版。但图文的表达力还是有限,更多的读者希望我能...

inputstream.available()方法-程序员宅基地

文章浏览阅读4.2k次。看到一篇有用的文章 遂转载获取网页文件大小的方法:url = new URL("http://158.46.34.140/index1.jpg");HttpURLConnection httpconn = (HttpURLConnection)url.openConnection();int length=httpconn.getContentLength();_inputstream.available

Xpath定位——xpath helper插件_xpath helper 使用id定位-程序员宅基地

文章浏览阅读2.5k次。XPath helper插件概述xPath Helper插件是什么? xPath helper是一款Chrome浏览器的开发者插件,安装了xPath helper后就能轻松获取HTML元素的 xPath,程序员就再也不需要通过搜索html源代码,定位一些id去找到对应的位置去解析网页了。XPath helper插件功能介绍google插件XPath Helper可以支持在网页点击元..._xpath helper 使用id定位

JAVA-微信支付关于APP下单_微信下单时签名作用-程序员宅基地

文章浏览阅读561次。我在网上查找了很多关于微信支付的案例很多但是部分讲的不是很细节,自己拿过来以后不知道如何去使用比较乱。我这几天研究了一下微信的支付v2的文档目前自己还是一个头脑简单的码农如果我哪里有啥不对的欢迎大家来指点一下,谢谢大家!!!!!!!!!!!!!我们都知道微信支付的app相关的接口是要封装好app传过来的相关参数数据打包给前端来唤起支付,其中最令人头疼的可能就是签名。好多人你不理解签名是怎么回事。其实理解了微信支付文档,其实一点也不难。签名就是客户端发数据给后台,后台打包下单参数签名一次,把返回的数据做处_微信下单时签名作用

Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-4.3.xsd)解決-程序员宅基地

文章浏览阅读4.8k次,点赞4次,收藏2次。问题:Javaweb项目在myclipse中spirng配置文件 xml有小红叉Problems:Referenced file contains errors (http://www.springframework.org/schema/beans/spring-beans-3.0.xsd). 解决: 办法一:Eclipse 中选中项目点击 Progect –>clean 清理一下,删除缓存。

opencv logPolar()和linearPolar()_cv2.linearpolar-程序员宅基地

文章浏览阅读9.5k次,点赞13次,收藏30次。logPolar是把数据从笛卡尔转到对数极坐标系,linearPolar把数据从笛卡尔坐标系转到极坐标坐标系。说到笛卡尔坐标系到极坐标系的转换,大家并不陌生,公式如下:设(x, y)为极坐标的一点,()为转换中心,()为转换后的结果,则笛卡尔转到对数极坐标系的转换多了一层对数,可表示如下这里log以自然数e为底。接下来,首先分析一下logPolar和linearPola..._cv2.linearpolar

推荐文章

热门文章

相关标签