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

智能推荐

怎样把计算机放到手机桌面壁纸,怎么把待办事项生成电脑桌面壁纸?-程序员宅基地

文章浏览阅读221次。原标题：怎么把待办事项生成电脑桌面壁纸?我的同事张晨喜欢在工作前把每天的工作待办事项一一添加到手机便签中，这样在办公的时候就能随时查看自己的工作内容了，按照待办事项清单去一一完成，这样不仅会让她更有紧迫感和任务感，还能在无形中提高工作效率。但是张晨说了在手机便签中添加工作待办事项不方便的地方，这就是她使用的办公设备是电脑，一般需要在办公的时候，时不时的打开手机查看待办事项，这样也会分散自己的注意力..._待办事项手机壁纸

Unity VR Pico apk安装失败：INSTALL_FAILED_UPDATE_INCOMPATIBLE_pico apk 安装失败-程序员宅基地

文章浏览阅读1.4k次，点赞10次，收藏8次。PICO4企业版。安装apk，报错“安装失败。（所属的Unity项目打包的apk，被我在同一台pico4安装了20次+）_pico apk 安装失败

机器学习实战（七）_loadsimpdata-程序员宅基地

文章浏览阅读265次。title: 机器学习实战（七）date: 2020-04-07 09:20:50tags: [AdaBoost, bagging, boosting, ROC]categories: 机器学习实战更多内容请关注我的博客利用AdaBoost元算法提高分类性能在做决定时，大家可能会吸取多个专家而不是一个人的意见，机器学习也有类似的算法，这就是元算法（meta-algorithm）。元算法是对其他算法进行组合的一种方式。基于数据集多重抽样的分类器前面已经学习了五种不同的分类算法，它们各有优._loadsimpdata

python内置数据结构---字符串_python 中列表 choice.lower()-程序员宅基地

文章浏览阅读217次。字符串str:单引号，双引号，三引号引起来的字符信息。数组array：存储同种数据类型的数据结构。[1, 2, 3], [1.1, 2.2, 3.3]列表list:打了激素的数组, 可以存储不同数据类型的数据结构. [1, 1.1, 2.1, 'hello']元组tuple:带了紧箍咒的列表, 和列表的唯一区别是不能增删改。集合set:不重复且无序的。 (交集和并集)字典dict：{“name”:"westos", "age":10# 1. 字符串str字符串或串(String)是由数字、字母_python 中列表 choice.lower()

超实用可执行程序-PDF文字复制后的回车符去除和谷歌百度英汉翻译-python GUI_文献翻译复制的时候都是回车-程序员宅基地

文章浏览阅读4.1k次，点赞4次，收藏3次。超实用python程序-PDF文字复制后的回车符去除和谷歌百度英汉翻译超实用python程序-PDF文字复制后的回车符去除和谷歌百度英汉翻译痛点界面与功能功能详细说明：过程记录代码和组件分析exe程序生成记录结语痛点PDF文档文字复制会包括回车符，使得文字粘贴和翻译都不方便，尤其是对于双栏的PDF。界面与功能以下为详细说明和..._文献翻译复制的时候都是回车

求正整数N以内的所有勾股数。 所谓勾股数，是指能够构成直角三角形三条边的三个正整数（a,b,c）。_编写程序,计算0到输入的整数n范围内的勾股数。假设3个正整数x、y和z是勾股数,-程序员宅基地

文章浏览阅读291次。#include"stdio.h"void main(){int n;int i,j,k;int count=0;while(scanf("%d",&n)){for(i=1;i<=n;++i)for(j=i+1;j<=n;++j)for(k=j+1;k<=n;++k)if(ii+jj==k*k){printf("[%d,%d,%d], ",i,j,k);count++;}printf(“total number: %d\n”,count);}}_编写程序,计算0到输入的整数n范围内的勾股数。假设3个正整数x、y和z是勾股数,

随便推点

ActiveMQ-cpp客户端程序应用异常退出问题_activemq-cpp客户端stop会奔溃-程序员宅基地

文章浏览阅读1.9k次。笔者使用ActiveMQ作为系统中消息分发的服务器，由Java Web程序读取数据库实时记录作为Producer，接收端为C++Builder开发的客户端程序，常驻客户端右下角，弹窗显示实时消息。测试时发现，当客户端断网（网线拔掉）或者服务器重启等连接中断时，客户端会直接退出，windows也没有报程序崩溃的问题，很是费解。 Debug调试代码发现问题出在自定义的Concumer_activemq-cpp客户端stop会奔溃

php中对类中静态方法和静态属性的学习和理解_静态属性和静态方法的特点-程序员宅基地

文章浏览阅读1.7k次。什么是静态方法或静态属性 static关键字声明一个属性或方法是和类相关的，而不是和类的某个特定的实例相关，因此，这类属性或方法也称为“类属性”或“类方法静态方法的特点 1.static方法是类中的一个成员方法,属于整个类,即使不用创建任何对象也可以直接调用! 2.静态方法效率上要比实例化高，静态方法的缺点是不自动进行销毁，而实例化的则可以做销毁。 3.静态方法和..._静态属性和静态方法的特点

遇到问题---thrift--python---ImportError: No module named thrift_importerror:no module named thrift.thrift-程序员宅基地

文章浏览阅读9.1k次。情况我们在启动hbase的thrift服务后使用python来进行测试连接hbase时报错ImportError: No module named thrift。完整报错如下:[root@host252 thrift]# python test.pyTraceback (most recent call last): File "test.py", line 3, in &l..._importerror:no module named thrift.thrift

华科电气专业转计算机专业,华中科技大学转专业-程序员宅基地

文章浏览阅读1k次。关于转专业，华科有两次机会，大一下是可以跨大类转，当然也可以在大类内部转；大二下是只能在学科大类内部转。华科有以下几个大类 信息大类、机械大类、土建环大类、电气大类、文科大类。跨大类转时信息大类与临床医学是不能转入的，但可以通过考光电中法班，通信中英班的方式转入，但是学费要高些，而且毕业是出国的(当然也可以选择不出)。很多同学对船舶与海洋工程不了解，其实这个专业就业非常不错，比信息大类内的不少专业..._华中科技大学转专业机会

spring cloud的RefreshScope注解进行热部署_spring refresh 热部署-程序员宅基地

文章浏览阅读2.5w次，点赞5次，收藏36次。需要热加载的bean需要加上@RefreshScope注解，当配置发生变更的时候可以在不重启应用的前提下完成bean中相关属性的刷新。经由@RefreshScope修饰的bean将会被RefreshScope代理，其关于bean生命周期的相关方法也在此定义。@ManagedOperation(description = "Dispose of the current instanc..._spring refresh 热部署

php抓取网指定内容,php获取网页内容方法总结-程序员宅基地

文章浏览阅读388次。抓取到的内容在通过正则表达式做一下过滤就得到了你想要的内容，至于如何用正则表达式过滤，在这里就不做介绍了，有兴趣的，以下就是几种常用的用php抓取网页中的内容的方法。1.file_get_contentsPHP代码复制代码代码如下:$url="http://www.jb51.net";$contents=file_get_contents($url);//如果出现中文乱码使用下面代码//$getc..._php正则截取file_get_contents里的域名

推荐文章

热门文章

相关标签