整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
紹三個(gè)和行相關(guān)的屬性。
定義行高，即行的高度，數(shù)值單位用px、字號倍數(shù)、百分比表示。
<!--方式一 屬性單位 為px-->
<style>
p {
line-height:30px
}
</style>
<!--方式二 不帶單位，表示字號的倍數(shù)-->
<style>
p {
line-height: 1.5
}
</style>
<!--方式三 百分號， 表示 原字號的百分比（倍數(shù)）-->
<style>
p {
line-height: 150%
}
</style>垂直居中
有一種垂直居中的方式就是用行高等于盒子高。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>這是標(biāo)題</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: red;
line-height: 300px;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
</div>
</body>
</html>文本的水平對齊方式
值 | 意思 |
left | 左對齊 |
right | 右對齊 |
center | 水平居中 |
<style>
p {
width: 1100px;
}
.aleft {
text-align: left;
}
.aright {
text-align: right;
}
.acenter {
text-align: center;
}
</style>
<body>
<p class="aleft">左端對齊</p>
<p class="aright">右端對齊</p>
<!-- 開發(fā)過程中通常可以用text-align實(shí)現(xiàn)水平居中-->
<p class="acenter">水平居中</p>
</body>一個(gè)實(shí)現(xiàn)垂直和水平居中的例子
垂直方向：行高等于盒子高。
水平方向：文字的text-align屬性為center。
<!--文字垂直和水平都居中-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>這是標(biāo)題</title>
<style>
.box {
height: 300px;
width: 300px;
background-color: red;
line-height: 300px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<p>文字</p>
</div>
</body>
</html>文本和內(nèi)容的縮進(jìn)量。
梯機(jī)動態(tài)效果圖
程序員總是會在無聊的時(shí)候做出一些讓我們覺得腦洞大開的效果，這次就用了430純css代碼做了一個(gè)小球彈跳上樓梯這樣的效果，而且不加任何javascript代碼，下面我們一起來看一下效果的源碼吧。
小球彈跳上樓梯源碼：
因?yàn)榇a高達(dá)500行全部發(fā)出感官效果不理想，只能截取部分源碼用于文章分享。
代碼過長有需要文檔版源碼的可以加群589651705獲取，已上傳群文件
需要更多的web前端企業(yè)級特效，學(xué)習(xí)方法，敬請關(guān)注本頭條號！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
