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

样式定义：

标签样式通过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 非常好用也非常适用，界面的布局也很合理，看起来很清晰

9、图片对齐方式设置：使用<img>标签使图片左对齐或右对齐

<img src="D:\games\Wesnoth\editor.ico" align="left">
<img src="D:\games\Wesnoth\editor.ico" align="right">

另 align属性有很多，也即对齐方式有很多种，不同对齐方式会影响页面效果

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>图片与文字的相对位置</title><style>img{width: 160px;height: 126px;margin: 10px;}</style>
</head>
<body>
<h3>图片与文字的相对位置</h3>
<!--    absmiddle       图片中间与同一行最大元素中间对齐；absbottom       图片下边缘与同一行最大元素下边缘对齐；baseline        图片下边缘与第一行文本下边缘对齐；bottom          图像下边缘与第一行文本下边缘对齐；left            图像沿网页左边缘对齐，文字在图像向右边换行；middle          图像中间与第一行文本的下边缘对齐；notset          未设定对齐方式；right           图像沿网页的右边缘对齐，文字在图像左边换行；texttop         图片上边缘与同一行最高文本上边缘对齐；top             图片上边缘与同一行最高元素上边缘对齐。--><!--图片中间与同一行最大元素中间对齐--><img src="../image/ab1.jpg" align="absmiddle"/><!--图片下边缘与同一行最大元素下边缘对齐--><img src="../image/ab2.jpg" align="absbottom"/><!--图片下边缘与第一行文本下边缘对齐--><img src="../image/ab3.jpg" align="baseline"/><!--图像下边缘与第一行文本下边缘对齐--><img src="../image/ab4.jpg" align="bottom"/><!--图像沿网页左边缘对齐，文字在图像向右边换行--><img src="../image/ab5.jpg" align="left"/><!--图像中间与第一行文本的下边缘对齐--><img src="../image/ab6.jpg" align="middle"/><!--未设定对齐方式--><img src="../image/ab7.jpg" align="notset"/><!--图像沿网页的右边缘对齐，文字在图像左边换行--><img src="../image/ab8.jpg" align="right"/><!--图片上边缘与同一行最高文本上边缘对齐--><img src="../image/ab9.jpg" align="texttop"/><!--图片上边缘与同一行最高元素上边缘对齐--><img src="../image/ab10.jpg" align="top"/>
</body>
</html>

其它小技巧：设置图片大小，如：style="max-width:50px;max-height:50px"

HTML之样式定义、div布局、按钮布局相关推荐

HTML-用css样式定义div的边框样式
我们都知道html中div定义的是一个块,有时候我们需要给这个块增加一些边框来达到我们所需要的要求. 1.如何定义边框如下所示我用css定义了这个边框的属性 <style> .c{wid ...
html表格自动分列,[css]display: table-cell，用div做分列布局
table-cell我们却能用得到,而且是用它来干一件很重要的事情--多列布局. 多列布局在css中有多重要就不用我说了吧,传统模式下大家都使用float来解决这一问题,但是float写出来的东西代码 ...
网站开发之DIV+CSS简单布局网站入门篇（五）
这篇文章主要介绍如何使用DIV和CSS简单布局一个网站的首页,通常将网站划分为顶部(Logo.导航条).中部(页面主要内容.左右栏目).底部(制作方介绍.超链接).这是非常基础的一篇引入性文章,采用案 ...
CSS布局教程：用DIV CSS实现国内经典式三行两列布局-CSS布局实例
我们碰到过很多的企业网站或其它小型的展示类网站,有一些共同的特点,即顶部放一个大的导航或BANNER,右侧是链接或图片,左侧放置内容,页面底部放置版权信息等.这样的形式是国内经典式的布局,我们这里不对 ...
轻松学DIV教程（div＋css布局）
我爱棒棒糖! 你正在学习CSS布局吗?是不是还不能完全掌握纯CSS布局?通常有两种情况阻碍你的学习: 第一种可能是你还没有理解CSS处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语 ...
web前端 --- CSS（04） -- 盒子模型、div+css网页布局、css3新特性
盒子模型 (1)网页标签分类: 行内元素: 块级元素:有宽高,可以设置大小,同时不会让其他块元素默认占据当前行 (2)内边距: 内容和边线之间存在空白区域,空白区域被称为:内边距(padding) 盒 ...
用html和css布局如下图像,HTML CSS + DIV实现整体布局
什么是 HTML? HTML 是用来描述网页的一种语言. HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (ma ...
html div 内部左右布局,div布局大全
div+css布局还有哪些布局方式 LZ说的框架是不是frame,框架适用于后台管理界面,一般顶部或左侧是功能菜单,右侧是内容显示页面而DIV+CSS是前台界面各模块设计,两者没交集, html 用d ...
DIV+CSS网页布局（新手必备)
文章目录一:网页布局的目的二:如何布局 (1):确定"版心" (2):分析模块三:页面元素的定位机制 (1)流式布局 (2)浮动-float (3)绝对定位(position ...

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

HTML之样式定义、div布局、按钮布局相关推荐

最新文章

热门文章