整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
紹三個和行相關的屬性。
定義行高，即行的高度，數值單位用px、字號倍數、百分比表示。
<!--方式一 屬性單位 為px-->
<style>
p {
line-height:30px
}
</style>
<!--方式二 不帶單位，表示字號的倍數-->
<style>
p {
line-height: 1.5
}
</style>
<!--方式三 百分號， 表示 原字號的百分比（倍數）-->
<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>這是標題</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>
<!-- 開發過程中通常可以用text-align實現水平居中-->
<p class="acenter">水平居中</p>
</body>一個實現垂直和水平居中的例子
垂直方向：行高等于盒子高。
水平方向：文字的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>這是標題</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>文本和內容的縮進量。
梯機動態效果圖
程序員總是會在無聊的時候做出一些讓我們覺得腦洞大開的效果，這次就用了430純css代碼做了一個小球彈跳上樓梯這樣的效果，而且不加任何javascript代碼，下面我們一起來看一下效果的源碼吧。
小球彈跳上樓梯源碼：
因為代碼高達500行全部發出感官效果不理想，只能截取部分源碼用于文章分享。
代碼過長有需要文檔版源碼的可以加群589651705獲取，已上傳群文件
需要更多的web前端企業級特效，學習方法，敬請關注本頭條號！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
