HTML之样式定义、div布局、按钮布局

落叶无声 阅读:51 2022-08-02 17:20:15 评论:0

样式定义:

标签样式通过style去定义,可以直接放到div开始标签中,也可以div中定义类名,将style放到head中,通过类去定义样式。如下布局中的示例。不及div的样式可以通过style设置以及在head中添加,其它标签如button的宽高也可以在style及head中添加。

注意:在标签中直接设置style和在head中添加style,在语法格式是存在差异,具体见下面示例。

备注:在head中定义styel样式:点后面跟上类名即可识别各种标签,并且每个样式值后面都要带上分号,包括最后一个样式值,直接在标签中定义style也如此。当然最后一个样式不带分号也不影响。

布局定义:

margin(外边距/边界)
border(边框)
padding(内边距/填充 )

1、HTML中div上下左右布局,可使用style属性margin,表示与上下左右div间的距离,单位:px。

1.1、style属性直接放到div开始标签中
在这里插入图片描述

<div class="logo" style="width:250px;height:130px;margin-top: 20px;margin-left: 20px;">		 
</div> 

1.2、div中定义类名,将style放到head中,通过类去定义样式

class="logo"的div横向布局
在这里插入图片描述
2、div纵向排列

注意:一般情况,默认的div是写一个换一行,div纵向排列。备注:其它标签默认横向排列,如<button><a>

3、div横向排列

3.1、在body的div中,加上class属性

<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:300px;height:240px;text-align:center;margin-top: 10px;margin-left: 20px;"></div> 
<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:300px;height:240px;text-align:center;margin-top: 10px;margin-left: 20px;"></div> 

3.2、先在head中定义div样式style,如:

<style> 
	.div-a{
     display: inline-block;} 
	.div-b{
     display: inline-block;}	 
</style> 

即可实现div换行

4、定义文本内边距

在html中,padding的意思为“填充;内边距”,是一个简写属性,可以定义元素边框与元素内容之间的空间,即上下左右的内边距。

使用padding方法:
在这里插入图片描述

5、设置文本对齐方式

左右对齐方式:style中使用text-align:

  • left 把文本排列到左边。默认值:由浏览器决定。
  • right 把文本排列到右边。
  • center 把文本排列到中间。

在这里插入图片描述

上下对齐方式: line-height

后面的属性值设置和父级的盒状标签高度相同,这样就可以做到文字垂直方向上居中了

<div class="div-a" id='2' style="background-color:rgb(0, 255, 0);width:200px;height:50px;text-align:center;line-height:50px;margin-top: 10px;margin-left: 20px;"> 
			<a href="http://testscf.dmall.com">测试环境</a> 
		</div> 

6、按钮布局

设置按钮间的距离:可以在标签中设置margin属性,即:style=“margin:5px 0 5px 0;”(顺序:上、右、下左,亦可简写为style=“margin: 5px 0;”),作用是在当前标签外部的上下各留出5px的空白。

<div class="logo"> 
	<a href="https://dfuatweb-logistics-mp.rta-os.com/login" target="_blank"> 
 	<button class = "btn1" style="margin: 5px 0 5px 0;">按钮1</button> 
 	<a href="https://dfuatweb-logistics-mp.rta-os.com/login" target="_blank"> 
 	<button class = "btn1" style="margin: 15px 0 5px 0;">按钮2</button> 
	</a> 
	</div> 

7、html怎样让div居中(div中所有元素都居中对齐)

7.1、通过加<center>内容</center>标签让div居中;

“HTML Center 元素 (<center>) 是个块级元素,可以包含段落,以及其它块级和内联元素。这个元素的整个内容水平居中 (通常是)。”

<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
<title>center居中</title> 
 
</head> 
 
   
 
<body> 
 
<center> 
 
<div>我要居中啦</div> 
 
</center> 
 
</body> 
 
</html> 

7.2、在div中加入“margin:0 auto属性;”自动调节居中。

<html> 
 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
 
<title>margin居中</title> 
 
<style type="text/css"> 
 
.d1{
      
 
border:1px solid red; 
 
width:200px; 
 
height:200px; 
 
text-align:center; 
 
line-height:40px; 
 
margin:0 auto; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<div class="d1"> 
 
我是div,我居中啦... 
 
</div> 
 
</body> 
 
</html> 

8、弹性布局:display: flex 非常好用也非常适用,界面的布局也很合理,看起来很清晰

在这里插入图片描述


本文参考链接:https://blog.csdn.net/baidu_24752135/article/details/108152425
标签:HTML5CSS
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

搜索
排行榜
关注我们

一个IT知识分享的公众号